LSPS documentation logo
LSPS Documentation
Creating CRUD Table in UI Forms

To create a CRUD table over a collection of objects, use the Generic View component provided by the Scaffolding Library: the component automatically generates the table

Note that scaffolding on UI forms is primarily intended for records and might not work if its objects are of other data type or of different types. From the table you will be able to create a new instances of the records, and delete and modify the existing ones.

For example, if you have a record Book with the fields isbn and title, and you define a list of book instances as the content of the Generic View component, the rendered table will have the columns isbn and title.

To create a CRUD component in a ui form, do the following:

  1. Make sure our project contains the Scaffolding Library.
  2. Import the scaffolding_ui module into your module.
  3. In your form definition, insert the Generic View component available under Custom Components.

    genericViewInPalette.png
    Generic view in palette
  4. Define the properties of the Generic View component:
    Object

    List of Objects that are the content of the form component

    Each object is represented by a table row.

    For object of a simple type, their value is rendered in a sole column; for objects of a record type, the value of each field is renderer in its own column; Note that this can be overridden by the record options property.

    Editable
    If true, the table is editable: if the table contains different types of objects, the table remains read-only.
    Object Type

    If the Object expression returns an empty Collection, the table is considered to operate over this data type, hence if the table is editable and you click Create new instance, the table creates a new instance of this type).

    Recursion Depth
    The relationship depth from the table record that is displayed directly in the component of the top data type: the related data types are displayed as sub-node components. They can be expanded directly in the parent component. Otherwise, the data is displayed on a new page and the depth is indicated only in the breadcrumb.
    Submit Button

    The component rendered instead of the default Submit button

    This expression has no impact on the OK & Persist button, which is displayed when creating a new instance in a Collection of shared Records from the Generic View.

    Record options

    Custom record rendering

    If defined, the table renders does not use the generic CRUD table but the form defined in this map to render the record data whenever it appears in the Generic View.

    [
      Author -> new RecordOptions(
        linkDisplayName -> {o:Object-> cast(o, Author).name},
        recordCustomForm -> {o:Object -> new OutputText(content ->{->"anonymous"})}
      ),
      Book -> new RecordOptions(
        propertyVisibilityDefault -> false,
        propertyOptions -> [
          Book.name -> new PropertyOptions(
            propertyVisibility -> true
          ),
          Book.authors -> new PropertyOptions(
            propertyVisibility -> true
          )
        ]
      )
    ]
    

Recursion Depth

When the Generic view has records as its content and the record has a relationship to another record, the rendered CRUD table contains a column with a link to the related record. When you click the link, the data of the related record is displayed in its own component. You can navigate back with a breadcrumb.

However, you can display such related objects as part of the CRUD component: define the Recursive property on your Generic View as an Integer that represent the number of relationships to navigate through: The reachable record instances are rendered as a nested component that can be expanded.

Note: The component immediately loads the data within the reach of one relationship so that when requested the data is already available.

recursiveDepthSample.png
Document with Generic Views. The top Generic View has the Recursive depth property set to 0 while the bottom Generic View has the Recursive depth set to 2.