It is another one of the form tools used for reporting within the form page. The desired information is displayed on the user screen as a card. List Card element can also be used to manage the work while moving in a process. In order to use this visual system, the List Card tool must be used with the List Card Connected tool.
| View in Toolbox | View in Free Form | View in Responsive |
| This form widget is only used in Free Form. |
Compatibility
| Free Form | Responsive Form | Mobile |
When the List Card form tool is dragged and dropped on the white canvas, it comes with two form elements. The List Card element is the most comprehensive of these. Group Box represents the card/cards that will take place in the List Card.
Click here to review the Group Box form tool.
Properties of List Card form tool |
|
Type: Indicates the field type of the added form tool. The value here cannot be changed. Name: Represents the name of the field in the actions to be used in the form. Help Text: On the client side, informative text is written about how to enter information into the element. Height/Width: Regulates the height and width of the form widget (Width field has been removed from Responsive Forms). SQL Query: A query must be written for the values that will appear in the List Card. If the query field is left blank, no data will appear in the List Card. Fit Horizontal: Fits the form tool horizontally to the full screen on the user's screen. Pin Right: Pin the form tool to the right. Display: Makes the form tool not visible on the Client screen. Paging: It is the feature used to turn on the paging feature in the List Card field. If there are too many values in the List Card, this field is selected as ‘Yes’ and the paging feature is added. |
Actions that can be used in List Card
There are different actions for each added form element on the form page. If you want to view the actions defined for the List Card tool, first select the List Card element and then open the action menu.
The actions that can be used in List Card and their details are as follows.
When the row selected:It is the form action used when an action will be performed according to the card selected in the List Card.
Record is Added: It is the action that works when a new card is added to the List Card tool.
| In order for the values sent to the List Card to be displayed on the Client screen, it must be triggered by an external action. You can trigger the List Card field with the update value action when the form page is opened. |
Example 1:
Let's create a design where we can show our users in a form. Since our XPODA_CLIENT_USERS table contains our users, let's show the information we want in this table in card format.
For this example, let's first open a free form and add our List Card tool to our form. Since the information to be included in our List Card tool users will come from a table XPODA_CLIENT_USERS, the following query is written in the SQL Query field.
The query written is as follows.
SELECT
XPODA_CLIENT_USERS.UserID,
XPODA_CLIENT_USERS.UserFullName,
XPODA_CLIENT_USERS.UserEmail
FROM dbo.XPODA_CLIENT_USERS WITH (NOLOCK)
|
|
List Card form tool is a form tool that works by being triggered from outside. For this reason, let's add When the form is opened action to our form and trigger the List Card tool when the form is opened. The final image of our action will be as follows. |
After this process, let's first save the action. Then save the form page and go to the Client screen with the Run button. The appearance of the form element on the Client screen will be as follows.
The values to be shown in the cards are shown in the card by adding the Label tool. For this reason, let's go back to the studio. First of all, let's click on the small box in our ListCard tool and type the title we want in the Text field in the properties section and then add the Label fields to the box by drag and drop.
Fill the Label fields in $P...$ format. This format will ensure that our dynamic values pulled from the table will come. Let's edit our fields according to this format as in the image below.
|
|
If ALIAS is used in the query, the value after ALIAS, if not, the field name should be written exactly. |
After the edits are made, let's save the form page and go to the client screen with the Run button. The appearance of List Card on the Client screen will be as follows.
|
|
If process management is to be done via List Card, it must be used with List Card Connected tool. Click for List Card Connected tool. |
Example 2:
In this example, let's make a fom where we will observe the production status of a company's products with the list card tool. To use our List Card tool, click on the button marked in green in the image below and open a new form.
Then select the Responsive Form option from the form selection screen.
This form will be a form where the data of our products will be saved. Our data must have a table to be saved in the database. For this reason, when our form is opened, let's make the necessary naming from the properties field on the right side. Let's name it as below. After creating these fields, we can now add form elements.
Name: Products
Table Name: PRODUCTS
Type: Form
Then let's add the following tools to our form to enter product details:
Picture tool for Product Image,
Text Box tool for Product ID and Product Name,
DropDownBox tool for Category,
Figures Box for Price, Planned Quantity, Produced Quantity and Num_5 fields,
Finally, drag and drop the Progress Bar tool to provide a visual appearance. After naming, let's create a view like below.
After preparing the fields we want to have in our table as above, we can organize the fields as we want and start adding our actions.
First of all, let's click on our DropDown Box tool and select the Field Type field as Combo Box. Since we will not pull the Field Style field from the database and we will write a fixed value, let's set it as Constant Value. Then, in the Values field, let's add the options we want to appear in our Drop Down tool as follows.
Electronics
Clothing
Food
Home and Furniture
Sports and Outdoor
After determining our Category fields, let's add an action to the Planned Quantity and Produced Quantity fields. This action will print what percentage of the planned quantity is produced in the numeric field we added as Num_5 every time these two fields change. For this, first select the Planned Quantity field and switch to the action tab from the properties section on the right. Then fill in the fields as follows and save our action by clicking the save button of the action itself.
Type of action; On Value Change
Operation; Calculate From Fileds
Linked Field; Num_5
Calculate Grid; ('$PProducedQuantity$'*100)/'$PPlannedQuantity$'
The final image of our action will be as follows:
Let's do the same in the Produced Quantity field and create the same action there and save it.
Since we want our Progress Bar tool to be triggered when our Num_5 tool is triggered, let's add one more action. For this action, first click on our Num_5 tool, then go to the actions tab on the right side. Fill in the action as below and save it with the save button.
Type of action; On Value Change
Operation; Update Value
Value Area; Progress_1
SQL Query; SELECT ‘$PNum_5$’
Then let's authorize the Num_5 field because we don't want it to be visible to users. For this, first select our form and click on the authorization tab on the right side. Fill in the fields in this tab as follows and save the authorization with the Save button.
Type of Authority; Authority of Field
Action; It can not see fields
Fields; Lbl_10- (Lbl_10), Num_5 (Num_5 contains both nomenclature of our tool)
Condition Type; Manually select users…
User Type; Those Selected
Users; Admin (In our example, we applied this authorization for the admin user. But if we want to hide the view from all users, we should select the User Type field “All Users”)
When we press the save button and run our form with the run button, a screen like the one below will open.
After entering the information we want in this field, click the green button at the bottom right and save it. A sample record will be as follows:
Now let's create another form to list the List Card tool. This form we will create should be Free Form.
| ListCard tool only works in Free Form. |
The Type field of this form should be selected as Report. After making the nomenclature as follows, let's drag and drop our ListCard tool from among our tools on the left side to our form.
Name; ListCard_Report
Type; Report
Report Type; List
Display Name; ListCard Report
Our next step is to make our data appear in our list card tool in our Products table that we first created. For this, let's drag and drop the fields from our first form to the GroupBox in our Listcard tool from the toolbox on the left side. This time let's add an additional Picture tool and Button to our form. The Picture widget will be the area where we keep our Icon. With the action we will add to the Button tool, we will be able to go to the details of the related record.
| Since we have a table to pull the data from, we need to write these dynamic values in $P...$ format. |
After dragging and dropping the tools and naming them, the final view will be as follows.
Since we want the data to be found in our List Card tool, let's click on our List card tool and write our query containing the fields of our first table we created in the SQL Query field in the properties field. In addition to this query, since images with different extensions can be placed in our List card tool, we have added a case when structure that determines which image will be added under which condition to the Picture tool we added as Icon. In this structure, if the Num_5 field is greater than and equal to 45, we will show the image with the .gif extension we have determined, and if it is smaller, we will show the image with the .png extension we have determined. Our query will be as follows.
SELECT
PRODUCTS.UserTableID,
PRODUCTS.ProductID,
PRODUCTS.ProductName,
PRODUCTS.Category,
PRODUCTS.Price,
CONVERT (NVARCHAR(50), CreatedDate, 104) AS CreatedDate,
PRODUCTS.PlannedQuantity,
PRODUCTS.ProducedQuantity,
CASE WHEN Num_5<= 45 THEN 'https://cdn.pixabay.com/animation/2023/10/08/03/19/03-19-26-213_512.gif'
else 'https://cdn.pixabay.com/photo/2018/02/26/14/47/check-3183217_1280.png' END as Icon,
PRODUCTS.Product_Image,Num_5 as [Percent]
FROM
dbo.PRODUCTS WITH (NOLOCK)
We need to add an action to the button we added. For this, click on the button and go to the action tab on the right side. Fill in the fields as below and save the action with its own save button.
Type of action; When clicked
Operation; Open Form- Detail
Condition; In New Tab
Module; ListCard
Form; Products
List ID Field; UserTableID
List Type Field; FormTypeID
After saving all the data, before running our form, we need to add an action that triggers our List Card tool to the form opening because we want the data to come to the List Card tool when the form is opened. For this, let's select our report form and go to the actions tab on the right side. Let's fill in the fields as below and save our action with the action's own save button.
Type of action; When the form is opened
Operation; Update Value
Value Area; ListCard_1
Finally, since our application is ready to use, let's click on the save button to save our form and go to the client screen with the run button. Finally, the final image will be as follows: