Creating a table layout with code optimization
Help users access and compare data with table layouts. Use tables in your applications as a flexible basis for users to process large amounts of information. For example, tables in a price comparison application can help users efficiently identify the best offer. You can also configure table layouts to support sorting and custom presentation options.
- Sourcing two columns from the same property can produce run-time issues in personal views. For example, if a user adds a second column sourced from the same property as an existing column in the view, the column might appear in the wrong place in the selector menu, or might not hide when toggled in the column selector.
- The UI Gallery landing page contains a working example of a table layout, which you can use as a reference for your application. For more information, see Accessing the UI Gallery.
- In the navigation pane of Dev Studio, click Records.
- Expand the User Interface category, and then click Section.
- Search for and open an existing section.
- If the section is based on a template, in the section editor header, click convert to full section editor, and then confirm the conversion.
- On the Design tab, expand the Structural list, and then drag the Table layout onto the work area.
- In the layout header, click the View properties icon.
- On the General tab, in the Table preference
section, select the Optimize code checkbox.
Note: On mobile devices, or to enable table personalization at run time, use the option for improved client-side performance. The optimization feature does not support all configurations of the table layout, such as table responsiveness or sourcing data from a report definition.
- Optional: To enable user personalization of tables, perform the following actions:
- Select the Personalize table checkbox.
- In the Default view name field enter a name for the default view.
- Optional: To automatically save a personalized view, select the Save
personalization automatically checkbox.
Note: By enabling personalization of table layouts, you help users change and save their table preferences, such as visibility, the order and width of columns, and sorting and filtering settings at run time as one or more views.
- In the Data source section, specify the source of the data for the
- To source the data from a page list or page group, select Property, and then in the List/Group field specify the name of the property.
- To access data from a range of sources on a clipboard, select Data Page, and then in the Data Page field specify the name of the page that you want to reference.
- In the Grid caption field, type a description of the table for
- You can override the
.grid-captionCSS class to modify the visual presentation of the caption.
- The grid summary attribute is no longer recommended because the HTML standard no longer supports it. Consider using the grid caption attribute instead.
- You can override the
- In the Conditions section, in the Grid
visibility field, select when you want to display the table layout.
For example: Set Grid visibility to Condition (expression), and then select IsMobile in the adjacent field.
- In the Row visibility field, select when you want to display the table rows.
- Optional: To split the database output into more manageable segments, in the
Pagination section, perform the following tasks:
- In the Pagination format field, select the Pagination 1,2,3 option.
- In the Page size (number of rows) field, define the number of rows that you want to have on one page of your table.
- Use pagination when you need to display significant number of rows in a grid. It is convenient to show just a few rows at a time, and load extra rows as and when required.
- Pagination improves the performance of the application.
- The UI Gallery landing page contains a working example of the Paging element. For more information, see Accessing the UI Gallery.
- Optional: To enable low-code authors to modify the table from App Studio, in the
Additional settings section, select the Editable in App
Studio checkbox.For more information, see Configuring a table at run time.
- Click Submit.
- On the section form, click Save.
- Modifying presentation options of the optimized table layout
Define the look and behavior of a table layout in your user interface to build a responsive, intuitive, and user-friendly application that meets your business needs. For example, you can select the transparent style for your table or enable display of custom actions in the toolbar.
- Arranging column visibility by importance
Ensure that the most important information in a table is always displayed by specifying which columns have priority.
- Prioritizing information in tables
Ensure that important information is always displayed by specifying which columns have the top priority.
- Configuring table activities
Improve the user experience by creating optional activities that respond to changes in a Table layout. For example, if a user reorders a list of tasks to display the most important assignments first, you can use activities to propagate the changes back to the data source and save their preferred setting.
- Configuring drag-and-drop functionality for tables
Configure tables and optimized tables so that users can reorder individual rows to adjust the content of tables.
- Enabling table personalization
Improve productivity by giving users the option to save specific table configurations as reusable profiles.
Previous topic Operations and actions in a table layout Next topic Modifying presentation options of the optimized table layout