Overview
In the App Designer editor, the Data table control allows you to represent information contained in the forms of a collection by means of a table, arranging the information in an organized and appealing way.
Adding the control to your page
To add the Data table control to your app page, open the Controls menu (located at the top left corner of the screen) by clicking it. Then, look for the Collections control, and click the arrow icon to open a drop-down list that allows you to visualize the different options in the form of collections. Scroll down until you find the Data table control and drag it to your page.
Once you have done this, the control appears on your page as follows:
Managing the control content
With the control already added to your app, you can manage the content to be displayed on it. To do this, click the control to display the configuration options. Select the Manage Content option to add data to the control.
There are two types of content when adding data to a collections control: Static content (fixed content that does not change over time) and Dynamic content (content that comes from a data fetch of the Persona's Views, My Stuff, or Cases).
Static content
When adding Static content (i.e., when you click the Fixed tab in the Manage Content window that appears), notice that you can configure the name, the rows and the columns of the table.
First, to change the name of the table, type the new name in the text box beneath the Table name label.
Columns
In the Columns drop-down container, you can add a column to the table or modify the value type for existing columns.
Add a column
To add a new column, click the Add new column label located in top right corner of the Columns drop-down container. Type a name for the column and determine its value type, selecting between Text or Image. Then, click the Apply & close button.
|
Note that when configuring the Data table control with Static content, any values you need to add of other data types such as Number, Currency, and Date will be treated as Text. |
Modify a column
To modify a column, begin by selecting it from the list under the Columns label. You have the option to change the column name or its value type.
To rename the column, type the new name in the text box provided beneath the Column name label. Similarly, to change the value type of the column, click the drop-down list under the Type label and choose between Text or Image. Click the Apply & close button to save your changes.
Rows
In the Rows drop-down container, you can add a row to the table or set the value for each cell of the row.
Add a row
To add a new row, click the Add new row label located in top right corner of the Rows drop-down container. Then, click the Apply & close button.
Set the value of a cell
To set the value of a cell, first, select the row containing the desired cell from the list under the Rows label. You can modify various aspects of each cell:
•Value: This refers to the content of the cell, which depends on the value type chosen for the column.
•Link: Determine the type of link associated with the cell. Choose between an External link, directing to a website outside your app (e.g., google.com), or an Internal link, redirecting to a page within your app (e.g., Home page).
•URL/Page: If you select the External link option, a text box labeled URL appears, allowing you to enter the destination URL. For the Internal link option, a drop-down list displays all available pages within your app, from which you can select the desired destination.
•Open in a new tab: If selected, this checkbox enables opening the linked website or page in a new browser tab.
Dynamic content
As mentioned before, you can add content that comes from a data fetch of the Persona's Views, My Stuff, or Cases to any Collections control. To configure Dynamic content, go through the steps of the Connection Wizard (detailed in Dynamic content). Once you are done configuring the data, notice that the control displays labels indicating the data mapping, as well as the data source (in this case, a View named LoanBooksView) at the bottom right corner. These labels indicate that the control has been set up with dynamic data.
In the example below, you can see how the Data table control looks like when adding dynamic content.
Add records
When you set up the data source of your Data table control as My Stuff, a + button appears in the control, allowing you to add new records to it. It is important to note that this functionality only works in your published app; you cannot add new records from the App Designer editor.
Sorting records
You can arrange the records displayed in your Data table control, either in ascending or descending order. However, unlike other Collections controls where you can configure sorting from the App Designer editor using Sort by, sorting the content of a Data table control is done from your published app. To do so, keep the following in mind:
From your published app, next to the title of each column of the Data table control, you will see two arrows: one pointing upwards and the other downwards.
To sort the column content in ascending order, click the upward-pointing arrow. Conversely, to sort the column content in descending order, click the downward-pointing arrow.
Notice that the sorting you apply to one column will consistently sort the content of other columns accordingly.
The Data table control allows sorting based on the following value types:
•Number: Sorting in ascending order arranges from lowest to highest values, while descending order sorts from highest to lowest.
•Date: Sorted in ascending order from oldest to most recent and in descending order from most recent to oldest.
•Currency: Follows the same ascending and descending order rules as numbers.
•Text: Sorted alphabetically in ascending order from left to right, and in descending order, it is sorted in reverse alphabetical order.
|
When handling Text containing numbers, special characters, and letters, sorting prioritizes numerical characters, followed by special characters, and finally alphabetical characters.
Sorting records is also available for a Data table control with static content. That said, keep these sorting rules in mind, as static content can only be sorted by Text. |
Common Actions
The Data table control allows for both singular and multiple record selections, displaying common Actions below the title for you to execute. You can select multiple records using the checkboxes next to each record.
Common Actions are shown if they are available for the selected records. If no Actions are available, a message stating there are no actions to executed is displayed. You can still execute individual Actions from the menu without affecting the multiple record selection.
After an Action is executed, a pop-up notification indicates successful execution, partial error or total error for the selected records. If errors occur, an additional message with a View Report button appears, allowing you to view detailed error report(s).
|
Remember that when a common Action is applied to multiple records, the Action will be applied individually to each record. (i.e. if you have 5 records, an action per record will be applied) |
View Report
This section displays each record on which an Action has been executed. For failed records, clicking the information icon shows error details.
Inside the report, clicking the information icon next to a record shows the error details in the Detail section.
Defining the control appearance
You can also change the control's look and feel by adjusting its settings.
Adjusting the control settings
To adjust the control settings, hover over the control to display the configuration options and select the Settings option.
|
Be mindful of the Reset button at the bottom of the configuration panel, as this button allows you to restore the default settings of the control. |
Pointedly, you can modify three control settings:
1.Style: In this setting, you can define the following options:
•Align: Align the text to the left, center, or right side of the control.
•Control width: Define the percentage of the column width for the control.
2.Fonts: In this setting, you can modify the following options:
•Font family: Allows you to define the font family for the table item text. The font by default is Poppins Regular.
•Font size: Lets you set the size (in pixels) of the text for the table items.
3.Colors: In this setting you can set the color for the font, background, and border of the control.
•Font color: Lets you set the color of the text for the table items. When you click the first square of the option, a color picker palette opens for you to select the text color you want. Likewise, you can select the color by specifying its hex color code in the Hex field.
•Background color: Lets you select the color for the background of the control.
•Border color: Lets you set the color of the border between collection elements.
When you group the content of your control using the Group by option, you can define one more color:
•Active group button color: background color of the active group button. The active group is the value of the category currently used to filter the dynamic content.
Visibility options
In this section of the menu, you can configure who can visualize the control, by selecting the Personas. You can enable the All option to select all Personas, or you can select the Personas you want to have access to the control.
Last Updated 9/12/2024 10:20:39 AM