It allows the reports created on the Xpoda platform to be collected and visualized on a single dashboard. This form tool offers a more efficient use for reporting dashboards.
| Appearance in Toolbox | Appearance in Free Form | Appearance in Responsive Form |
| |
Compatibility
| Free Form | Responsive Form | Mobile |
Features
Type: Indicates the field type of the added form tool. The value here cannot be changed.
Name: The added form tool is given a name. In the actions to be used in the form, the field name defined here is used as the Tile Layout field name.
Rows Height: Determines the height of the column in each row in the form tool.
Columns Width: Determines the width of the column in each row in the form tool.
Help Text: On the Client screen, the informative text to be displayed when hovering over the Tile Layout form tool is written.
Height / Width: Adjust the height and width of the form tool.
From Left / Top: Adjust the position of the form tool from left and top.
Fit Horizontal: Fits the form tool horizontally to the full screen on the Client screen.
Display: The display status of the form tool on the client screen is set in this field (Yes à Visible / No à Not visible).
Column Count: Specifies the number of columns in each row in the form widget.
Example 1:
First, let's open a new form with Free Form property. To do this, click on the New Form icon marked with a red frame in the image below.
Select the Free Form option from the window that opens.
When Free Form is selected, a new form screen named Form_1 will be created.
Select the form named Form_1, then edit the form properties on the right side of the screen as follows.
Select the Properties field shown with number 1. Then select the Report option from the Type field shown with number 2.
When the Type property of the forms is selected as 'Form', a new table is created under the XPODA database in SQL with the name written in the Table Name property. If table creation is not desired, the Type property of the relevant form should be selected as 'Report'.
The form we created is opened with Free Form and Report properties.
Drag and drop the Tile Layout form tool from the area shown with number 1 and increase the height and width of the tool. After this process, the Tile Layout form tool will be added to our form as shown with number 2.
| Forms in the same or different modules can be added to the Tile Layout tool. |
| It is recommended to create the forms to be added to the Tile Layout tool with Responsive Form design. |
In this example, we will add the forms named Sales Stock Chart, Sales Company Chart, Sales Sector Chart and Sales List, which were previously created with Responsive Form design, into the Tile Layout tool.
The forms will be added to the Tile Layout as shown in the image below.
Let's make the necessary adjustments for this.
Select the Tile Layout tool. Then set the values of the Rows Height, Columns Width and Column Count fields in the properties section as shown in the image below.
Also, let's set the Fit Horizontal field to Yes so that the Tile Layout form tool fits horizontally on the Client screen.
The content of the Tile Layout tool will be organized in three columns; each column will be 300 pixels high and 550 pixels wide.
| For each form to be added to the Tile Layout tool, a new Template screen should be created by clicking Add Widget and the form to be added should be selected in this Template screen. |
Template Usage
To add a Template to the Tile Layout form widget, first select the Tile Layout form widget and then click on Add Widget on Tile Layout.
On the left side of the screen, under the Tile Layout form tool, the Template screen will be displayed as added and on the right side of the screen, the properties section for this Template screen will appear.
Properties of the added Template
Type: Shows the field type of the added Template. The value here cannot be changed.
Name: The added Template is given a name.
Header: In the Tile Layout tool, the column name of the added Template is determined in this field.
By entering the column name in the visual layout of the related Template, the data is labeled correctly and displayed correctly on the screen. This process allows for a more organized and understandable data view.
Rows Span: This field specifies how many rows the added Template will occupy in the Tile Layout tool.
This value determines the visual structure of the Template, allowing more efficient use of the areas in the Tile Layout tool and helping to create a harmonious appearance in terms of layout.
Column Span: This field specifies how many columns the added Template will occupy in the Tile Layout tool.
This value determines the visual structure of the Template, allowing more efficient use of space in the Tile Layout tool and helping to create a harmonious display in terms of layout.
Help Text: On the Client screen, when the mouse hovers over the added Template, the information text to be displayed is written.
The Help Text feature is currently unable to fulfill the desired operation. In new versions, improvements will be made on this feature.
Height / Width: Adjust the height and width of the added Template.
Since the height and width of the Template are set from the Rows Height and Columns Width fields in the properties section of the Tile Layout tool, this section cannot fully fulfill the desired operation at the moment. In new versions, improvements will be made on this feature.
From Left / Top: The position of the added Template from the left and top is adjusted.
From Left / Top feature is currently unable to fully fulfill the desired operation. In new versions, improvements will be made on this feature.
Order: The column order in which the added Template will be displayed in the Tile Layout tool is determined in this field.
The Order feature is currently unable to fully fulfill the desired sorting function. In the new versions, improvements will be made on this feature.
At this stage, it is recommended to leave the Order value as -1. This value is the most suitable option for now, and a more functional solution will be provided with future updates.
Display: The display status of the added Template on the client screen is set in this field. (Yes à Visible / No à Invisible)
Module: The project containing the form or report screen to be added to the Tile Layout tool is selected in this field.
Form: The form or report screen to be added to the Tile Layout tool is selected in this field.
Sub Form Mapping: This is the section where the field mappings of the form or report selected from the form field at the top are made.
The Sub Form Mapping feature is currently unable to fully fulfill the desired mapping process. Improvements will be made on this feature in the new versions.
- Field: The form elements of the form or report selected from the form field at the top are displayed in the field section.
- Type: In the line to be matched, the type of matching to be made with the relevant form field in the Field field is selected in this field.
There are three different matching types: Form Field, Constant Value and SQL Query.
- Value (Değer): For the row to be matched, the value to be matched is selected in this field.
When the Form Field option is selected in the type field at the top, matching can be done by selecting a field in the relevant form.
When the Constant Value option is selected in the Type field, matching can be done by manually entering a fixed value.
When the SQL Query option is selected in the Type field, the desired SQL query can be matched by typing it in this field.
Switching Between Template Area and Form Screen
| Template is added under the Tile Layout form tool on the left side. To switch from the Form screen to the Template screen, click on the symbol on the left side of the Tile Layout form tool shown with number 1. After that, the Template_1 field shown with number 2 will be displayed. Double click on Template_1 field to switch to Template field. |
| To switch from the Template field to the form screen, double click on the relevant form on the left side. In this example, you can switch from Template field to form screen by double clicking on Form_1 field. |
Select Template with the name Template_1.
Then give the Template a new name in the Name field in the properties section.
Write a suitable title for the Template in the Header field.
Since we want the Template we added to occupy a space of 1 row and 1 column in the Tile Layout tool, let's enter 1 in the Rows and Column Span fields.
Finally, from the Module and Form fields, select the form we want to display in the Tile Layout tool.
To add the Sales Company Chart form to the Tile Layout tool, let's first add a new Template.
For this, select the Tile Layout form tool.
Then, click on the Add Widget option on the Tile Layout.
This will create a new Template with the name Template_2.
Select the Template with the name Template_2.
Then give the Template a new name in the Name field in the properties section.
Write a suitable title for the Template in the Header field.
Since we want the Template we added to occupy a space of 1 row and 1 column in the Tile Layout tool, let's enter 1 in the Rows and Column Span fields.
Finally, from the Module and Form fields, select the form we want to display in the Tile Layout tool.
To add the Sales Sector Chart form to the Tile Layout tool, let's first add a new Template.
For this, select the Tile Layout form widget.
Then, click on the Add Widget option on the Tile Layout.
This will create a new Template with the name Template_3.
Select the Template with the name Template_3.
Then give the Template a new name in the Name field in the properties section.
Write a suitable title for the Template in the Header field.
Since we want the Template we added to occupy a space of 1 row and 1 column in the Tile Layout tool, let's enter 1 in the Rows and Column Span fields.
Finally, from the Module and Form fields, select the form we want to display in the Tile Layout tool.
Finally, to add the Sales List form to the Tile Layout tool, let's first add a new Template.
For this, select the Tile Layout form tool.
Then, click on the Add Widget option on the Tile Layout.
This will create a new Template with the name Template_4.
Select the Template with the name Template_4.
Then give the Template a new name in the Name field in the properties section.
Write a suitable title for the Template in the Header field.
Since we want the Template we added to occupy 1 row and 3 columns in the Tile Layout tool, let's enter the value 1 in the Rows Span field and 3 in the Column Span fields.
Finally, from the Module and Form fields, select the form we want to display in the Tile Layout tool.
After completing the necessary adjustments, save the project and then click the Run button to switch to the client screen.
|
On the client screen, the last saved version of the project is displayed. If you switch to the client screen without saving the project, the last changes cannot be displayed on the screen. |
The image of our form with the Tile Layout form tool attached on the client screen will be as follows.
In the properties section of the Tile Layout tool, the Column Count (the number of columns that should be in a row) value is set to 3.
Rows and Column Span values for each of Sales Stock Chart, Sales Company Chart and Sales Sector Chart Templates are defined as 1. This definition indicates that each Template will occupy 1 row and 1 column space on the Tile Layout.
Thanks to this structure, these three Templates are placed in the first row, filling a total of 3 columns.
Since Tile Layout cannot have more than 3 items in a row, which is the defined Column Count, Sales List Template is automatically placed in the bottom row.
For Sales List Template, Row Span value is set as 1 and Column Span value is set as 3. This means that the Template will be positioned horizontally in the new row covering all columns.
Example 2:
In this example, we will continue with the previous example.
In the Tile Layout tool, let's create a layout with 4 columns in each row and let the Sales List Template in the second row be displayed in the first row.
First, select the Tile Layout form tool. Then, in the properties section, set the Column Count value to 4.
Save the project and then switch to the client screen by clicking the Run button.
On the Client screen, in the Tile Layout tool, the space marked with a red frame below is reserved for the fourth column. The width and height values of the columns were determined according to the Rows Height (300) and Columns Width (550) parameters in the properties section of the Tile Layout tool.
The reason why the Sales List Template appears in the second row, even though 1 column is created in the first row, is that the Column Span value in the properties section of the Template is set to 3.
Since this template is configured to take up 3 columns of space, the 1 column space in the first row is not enough and therefore it is automatically moved to the bottom row.
| When the number of columns to be occupied by the Template is more than the number of columns left empty in the row, the Template is automatically moved to the bottom row. |
To place the Sales List Template in the 1 column space in the first row, first select the Template. Then, in the properties section, set the Column Span value to 1.
Save the project and then click the Run button to switch to the client screen.
On the client screen, the Sales List Template will appear moved to the first row.
|
Since the forms added in the Template are created using Responsive Form design, the elements in the form are automatically sized according to the dimensions of the Template. |
In the same way, the list in the form added to the Sales List Template is sized according to the dimensions of the Template, so scroll bars appear on the list.
Example 3:
In this example, we will continue with the previous example.
Let's make the necessary adjustments to create the appearance of the Tile Layout tool as shown in the image below.
Select the Tile Layout tool. Then type the value 5 in the Column Count field in the properties section.
Let's type 2 in the Column Span field in the properties section of Sales Stock Chart, Sales Company Chart and Sales Sector Chart Templates.
Finally, type 3 in the Column Span value of the Sales List Template.
Save the project and then click the Run button to switch to the client screen.
The appearance of the Tile Layout tool on the client screen will be as shown in the image below.
Sales Stock Chart and Sales Company Chart Templates occupy the 4 columns in the first row.
Since the Sales Sector Chart Template is set to occupy 2 columns, it could not be placed in the remaining 1 column area in the first row and was automatically moved to the next row.
In the second row, Sales Sector Chart Template has 2 columns and Sales List Template has 3 columns, covering all columns horizontally.
Changing Column Orders in Tile Layout
| In order to change the column order in Tile Layout, Template must be selected first. Then, from the Header field in the properties section, a header name suitable for the selected Template should be specified. |
On the Client screen, the order of the columns can be changed by dragging and dropping with the mouse from the Header section.
In order for the Header section to appear on the Client screen, the Header field in the properties section of the Templates on the Studio screen must be full.
If the Header field is empty, the column order cannot be changed on the Client screen.
Let's save the project and then switch to the client screen by clicking the Run button.
On the Client screen, when the mouse hovers over the Header section, the four-way arrow icon is displayed. After seeing this icon, the relevant column can be moved to the desired row by dragging and dropping.
The move operation is not only limited to the columns in the current row; it can also be moved to the desired column in the next lower or upper row.
Example 4:
In this example, we will continue with the previous example.
Let's make the necessary adjustments to create the appearance of the Tile Layout tool as shown in the image below.
Select the Tile Layout tool. Then type the value 5 in the Column Count field in the properties section.
Let's set the Rows Span and Column Span values in the properties section of Sales Stock Chart, Sales Company Chart, Sales Sector Chart and Sales List Templates as in the images below.
Save the project and then switch to the client screen by clicking the Run button.
The appearance of the Tile Layout tool on the client screen will be as in the image below.
By setting the Rows Span value of the Sales Stock Chart tool to 2, it is ensured that it occupies an area of 2 rows.
Example 5:
| On the client screen, the scales can be changed both horizontally and vertically by dragging and dropping over the border lines of the templates. |
| The important point here is that if the width of the scaled Template exceeds the number of columns in the row, the Template will be automatically moved to the bottom row. |
When the width of the Sales Stock Chart Template was increased, the Templates were moved to a lower row because there was not enough space for other Templates in the row.
| In case the edits made on the Client screen do not return to their previous state even if the screen is refreshed, you need to clear the cookies in your browser to return the screen to its default settings. |
Example 6:
| When a value of 0 is entered in the Column Count field in the properties section of the Tile Layout tool, the added Templates are displayed in the bottom rows with only one column per row. |
Select the Tile Layout tool. Then enter 0 in the Column Count field in the properties section.
Enter 1 in the Rows and Column Span fields of the Sales Stock Chart and Sales Company Chart Templates.
Save the project and then click the Run button to switch to the client screen.
The appearance of the Tile Layout tool on the client screen will be as shown in the image below.
Actions
A value in the form to which the Tile Layout form tool is connected can be transferred to a field in the connected form in the Template.
In order to perform this operation, let's first add a Drop Down Box widget to our form named Form_1 where our Tile Layout form widget is located and then make the property settings of the field as follows.
Let's add a Text Box tool to the Sales List form screen that we connected to the Sales List Template and name this field TemplateSectorName.
Let's change the name of the Template we named SalesList_Template to Template_4.
| In order for the Item List field to become visible in the action to be used, the Template names should be named as Template_1, Template_2 .... |
Finally, after selecting the SectorName field, let's go to the actions section.
Click on the Add New Action field.
From the options that come up;
Type of Action: On Value Change option.
Select Operation: Update Value.
Select Value Area: Template_4 option.
When Template_4 option is selected in the Value Area field, the Item List field will become visible just below it.
Item List: Select TemplateSectorName.
(The value selected from the drop-down box will be transferred to the TemplateSectorName field on the Template screen named Template_4).
SQL Query: SELECT '$PSectorName$'.
Then save the action.
The saved action will look like the picture.
Let's save the project and then switch to the client screen by clicking the Run button.
When a Sector Name is selected from the drop-down box on the Client screen, this information is automatically transferred to the Sector Name field in the Sales List Template.