SpringBot CRUD tile attribute grouping

Model

For this article we will be using our LMS entity model from our Learning Management System (LMS) - Example project as our example. Specifically our Lesson entity.

Using this entity, and adding an associated Data table data table we get an edit view like this.

Abstract model

Open the abstract.model.ts which can be found at clientside/src/app/lib/models/abstract.model.ts. We will focus on ModelProperty interface.

export interface ModelProperty {
    name: string;
    displayName: string;
    type: ModelPropertyType;
    elementType?: ElementType;
    enumLiterals?: { key: string, value: any }[];
    // Whether the data is sensitive, which could not be fetched from db, and would be show as password fields
    isSensitive?: boolean;
    // Used to control whether to hide element
    // If true, the element would be hide from the view
    hideElement?: boolean;
    readOnly?: boolean;
    validators?: ValidatorFn[];
    group?: { id: string, displayName: string };
    index?: number;
    [s: string]: any;
    // % protected region % [Add any additional model property fields here] off begin
    // % protected region % [Add any additional model property fields here] end
}

This interface represents all of the properties that are available to modify how an attribute is displayed on the Data table tile.

For this article, we will be making use of:

• group and,
• index

To explore these, open the lesson lesson.model.ts found at clientside/src/app/models/lesson/lesson.model.ts.

Groups and Indexes

We now want to create some groups and apply them to our Course Data table component. Indexes are zero based and define the sorting order of the attributes within their respective groups. For this example we will not use indexes.

1. From within our lesson.model.ts, find the protected region called called Add groups for the entity here and activate it.

2. Add two groups, one called estimators and one called descriptors as follows:

    static modelPropGroups: { [s: string]: Group } = {
         // % protected region % [Add groups for the entity here] on begin
         relations: {
             id: 'relations',
             displayName: 'Relations'
         },
         descriptors: {
             id: 'descriptors',
             displayName: 'Descriptors'
         },
         // % protected region % [Add groups for the entity here] end
     };
   

3. Now to apply these groups, find our attributes as defined in getProps() and your references getRelations(). For each attribute/reference there will be a protected region called Add any additional model attribute properties for [ATTRIBUTE NAME] here for attributes and Add any additional field for relation [REFERENCE NAME] here for references. Activate these and apply the groups and an index as shown in the following example:

    // % protected region % [Add any additional model attribute properties for Clean here] on begin
     group: LessonModel.modelPropGroups.descriptors,
     // % protected region % [Add any additional model attribute properties for Clean here] end
   

Applying the descriptors group to the attributes difficulty, duration and name as well as the relations group with the attributes courseLessonsIds, formTilesId, versionsId and publishedVersionId gives our three groupings.
You will notice that we have not applied groups to our reference summary or description.

Styling the Data table tile

Styling the Data table tile is like styling any other element, component or extension in your project.

1. Navigate yourself to clientside/src/app/lib/scss/frontend/behaviours/crud/ and open the crud.scss file.
2. Turn on the protected region Change form submission styles here and find the classname .form-container__section.

3. In the classname form-container_-section add the following changes:

    .form-container__section {
     display: flex;
     flex-wrap: wrap;
     width: 45%;
     justify-content: flex-start;
     align-items: flex-start;
     align-content: flex-start;
       
     &:nth-of-type(even) {
         margin-left: auto;
     }
       
     h6 {
         width: 100%;
         margin-bottom: 0;
         color: $color-primary;
         border-bottom: convert-rem(3px) solid $color-primary;
     }
    }
   

   Your tile should now look like this:

   

Solution

Have a look at the attribute-grouping branch to see the solution code.