DataTable Component (How to attach an ORDA Data Class?)

[jeremy]

I created a web form, jeremy_datatable_try.

I placed a Stylebox on the form.

Then, from the Components tab, I selected a DataTable.

Here’s what I now see after placing the DataTable within the Stylebox.

I want to attach the ORDA data class named item.

QUESTION:

1. How do I attach the ORDA data class item as the DataTable datasource?

[Fadwa]

Hey Jeremy!

After creating an entity selection datasource, use it to bind data to the DataTable component, using these steps:

Step 1:
Create a datasource of that type from the datasources panel:

Step 2:
Once you’ve confirmed the creation of the selection, you can either drag and drop it to your datatable or input the name of the datasource in the datatable properties:

Step 3:
Final step is to actually add the columns youn want to display in that datatable, either by dragging and dropping the attribute from the datasource, or by adding them from the properties panel.

[jeremy]

@Fadwa

…using these steps…

Sandbox: Qodly matrix and dateable

I created a web form named jeremy_datatable.

The form is supposed to show:

1. 1,000 entities from the demo’s item table displaying the item.name attribute in a single column of a DataTable component.
2. A Text component showing the number of entities displayed in the DataTable component.
3. Another Text component shows the item.name attribute for the currently selected row in the DataTable component.

Running the web form in Studio shows the following.

Note the following in the image above:

4. Rows are selectable but fail to display the entity’s item.name value.
5. The vertical scroll moves and appears to recognize rows present.
6. The number of entities in the table is correctly displayed as 1,000.
7. Fails to display the name attribute for the currently selected row (see #4.)

---

Here is an annotated snapshot of a web form named jeremy_datatable as it appears in the Cloud Studio editor.

Annotations in the above image follow.

8. The Catalog shows a Data Class named item.
9. This Webform shows the references I will use for the DataTable component’s properties DataSource (item_eso) and Selected Element (item_eo).
10. The Outline shows the position of the various components I placed on the web form. Note that light grey text in parentheses identifies the data references placed in some components.
11. The DataTable will display an entity selection of item entities.
12. Text that will display the number of entities in an entity selection of item objects displayed in the DataTable. Selecting this text in the Studio editor highlights the matching item in the Outline.
13. The value of the item.name attribute for the currently selected row in the table. Selecting this text in the Studio editor will highlight the matching item in the Outline.
14. The property specifies the first column will display the attribute item.name.
15. The property specifies the DataTable will use my entity selection reference item_eso.
16. The property specifies the DataTable will place the currently selected row in my entity reference item_eo.

QUESTIONS

17. Why does each row highlight as a pointer moves over that row?
18. Why is the item.name value blank in each row?
19. Does the vertical scroll moving indicate that there is a collection present in the DataTable?
20. Why is the reference item_eo.name failing to display a value?
21. Are any of my annotation notes (#8 through #16) incorrect?
22. How do I get item_eso.name to display its value in the table?
23. How do I get item_eo_name to display the value of the currently selected table row?
24. What am I missing here?

[Fadwa]

Hey Jeremy!

The procedure you followed sounds correct, but I’m wondering, did you bind your column with item.name or name directly?

[mikey]

long shot (and you clearly know a lot more about qodly than i do): wondering if the text color might be white, or the alpha might be 0, so it is not visible against a white background.

[jeremy]

@Fadwa

but I’m wondering

PROBLEM SOLVED

Adding the attribute name in the expanded column panel solved the display problem. Now, the attribute values appear when the page is rendered.

SUGGESTION

It would be very helpful for all controls (that you can click) to have tooltips that display their purpose.

I missed that I could expand the column panel by clicking one of the controls.

That’s the difference between seeing the panel closed:

and seeing the panel expanded:

The tooltip for the expand/collapse might read “expand/collapse column properties”.

Similarly, the second item’s tooltip could indicate “Append to column”.

And the third item’s tooltip could say “Delete this column”.

[ayoub]

Hey Jeremy,

Thank you for your feedback. i will add this remarks to the this feature request : displaying a tooltip when you hover icons.