Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Table Records Widget

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • You can use the Table Records widget to display the records of an entity or a structure in a tabular layout. You can define the table records as sortable making it easier for the user to read or find information faster. Record sorting can be fixed or dynamic, meaning that it can change during runtime. You can change the emphasis of a table row by changing its height and increase users' ability to read and interpret data in a table record by using zebra stripping. You can also use pagination to divide content and present it in a limited and digestible manner.

    Overview of Table Records widget in use

    We've been working on this article. Please let us know how useful this new version is by voting.

    How to use the Table Records widget

    In this example, user data is fetched from the User entity and displayed on screen using the Table Records widget.

    1. In Service Studio, in the Toolbox, search for Table Records.

      The Table Records widget is displayed.

      Table Records widget

    2. From the Toolbox, drag the Table Records widget into the Main Content area of your application's screen.

      Drag Table Records widget onto screen

    3. Add the relevant content to the Table Records widget.

      In this example, from the Data tab, we drag the User entity into the Table Records widget.

      Drag User database into widget

    4. Return to your screen by selecting the Interface tab. Right-click the screen name and select Add Preparation.

      Add preparation

    5. Add an Aggregate to the Preparation.

      Add an aggregate

    6. Double-click the Aggregate, click the screen, and from the Select Source popup, select the database entity you want to retrieve data from. Click OK. In this example, we select the User entity.

      Select source entity

      The GetUsers aggregate is created.

      GetUsers aggregate is created

    7. Return to your main screen, select the Table Records widget, and on the Properties tab, select the Source Record List (in this example, the GetUsers aggregate we just created).

      Select Source Record List

    After following these steps and publishing the module, you can test the widget in your app.

    How to add a new column

    1. Select and right-click the Table Records widget, and select Table > Insert Column to the Left or Insert column to the Right.

      Add new column

    For more information about the Table Records widget properties, see Table Records Widget.

    Properties

    Name Description Mandatory Default value Observations
    Name Identifies an element in the scope where it is defined, like a screen, action, or module. Yes
    Source Record List Current list of records displayed by the widget. Yes The expression used in this property (if present) is evaluated when a widget runtime property is first used (e.g. an expression using the list Length runtime property) or when the widget is rendered.
    Empty Message Text displayed in the first row of the widget when there are no records to show. "No items to show..."
    Line Count Maximum number of rows to display in this widget. Yes 50
    Start Index Index of the first List item to iterate. Can be an expression. Yes 0 The expression used in this property (if present) is evaluated before the web screen preparation.
    Cell Height Height of cells in the table in pixels. Other accepted units are points(pt) or percentage(%). Overrides the style sheet definition.
    Cell Spacing Space between cells in pixels. Overrides the style sheet definition.
    Show Header Set as Yes to display the header row of the table. Yes Yes
    Style Classes Specifies one or more style classes to apply to the widget. Separate multiple values with spaces. "TableRecords"
    Header Style Specifies one or more style classes to apply to the header of the widget. Separate multiple values with spaces. "TableRecords_Header"
    Odd Line Style Specifies one or more style classes to apply to the odd lines of the widget (excluding the header). Separate multiple values with spaces. "TableRecords_OddLine"
    Even Line Style Specifies one or more style classes to apply to the even lines of the widget (excluding the header). Separate multiple values with spaces. "TableRecords_EvenLine"
    Extended Properties
    Property Name of an attribute to add to the HTML translation for this element. You can pick a property from the drop-down list or type a free text. The name of the property will not be validated by the platform.

    Duplicated properties are not allowed. Spaces, " or ' are also not allowed.
    Value Value of the attribute. You can type the value directly or write expressions using the Expression Editor.

    If the Value is empty, the corresponding HTML tag is created as property="property". For example, the nowrap property does not require a value, therefore nowrap="nowrap" is added.

    Runtime Properties

    Name Description Read Only Type Observations
    List Collection of records returned by the performed query. Record List
    LineCount Maximum number of rows displayed in the widget as defined in the Line Count property. Yes Integer
    StartIndex Index of the first record displayed in the widget as defined in the Start Index property. Yes Integer
    Id Identifies the widget instance at runtime (HTML 'id' attribute). You can use it in JavaScript and Extended Properties. Yes Text

    Layout of the widget

    The layout of this widget follows these rules:

    • Each record of the entity or structure corresponds to one row in this widget.
    • Each attribute corresponds to one column.
    • For each attribute, there is one column with n+1 rows with the following semantics:

      First row: The name of the attribute that corresponds to the Label property, if any, or the name of the attribute. You can apply styles to this row, by setting the Header style property.

      Other rows: The value of the attribute for each record shows as a Expression widget and, therefore, you can use the Expression editor to modify the content. You can also use the input widgets to allow editing. Set different styles in odd and even lines with Odd Line style and Even Line style properties.

    Iterating the widget

    Set the source data (entity and/or structure records) in the Source Record List property of Table Records. The data must be of the List type, and each item of the list shows on a different line. The first record that shows in the widget corresponds to the Start Index position on the list. The number of records that the table shows depends on the Line Count property.

    To iterate over the Source Record List, you have to update the Start Index property for each iteration by using the Line Count and Start Index runtime properties of the Table Records widget.

    Additional notes

    • The widget Id runtime property is only available in the screen scope when the widget property Name isn't empty.
    • LineCount and StartIndex are useful when you want to implement the previous/next behavior of a Table Records widget, because the parameters control how many records you show in the table and from which record number. Scaffold a screen by dragging an Entity to a web flow to get a table with pagination. You can then check out how LineCount and StartIndex work.
    • If you have an Aggregate in the Preparation that provides a list of records to Table Records and you leave empty the value Max. Records of the Aggregate, the platform calculates the value of Max. Records for you according to the following formula: Start Index of the Table Records + Line Count of the table + 1. A workaround is to set a static Line Count in the Table Records widget that's at least equal to the maximum number of records your query can retrieve.
    • Was this article helpful?