SpringBot CRUD Tile Attribute Grouping

At model time we define our attributes in an ordered list, this makes sense from a data structure and schema point of view but does not make sense from the perspective of your applications UX where attributes belong in logical groups. To resolve this, we utilise one of the features of the CRUD tile.


Model

Fishnatics Model

For this article we will be using our Fishnatics entity model as our example. Specifically our Tank entity.

Using this entity, and adding an associated CRUD tile we get an edit view like this:

CRUD View Default

Abstract Model

Open our 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 CRUD tile.

For this article, we will be making use of two of these:

  1. group and,
  2. index

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

Groups and Index’s

We now want to create some groups and apply them to our Tank CRUD tile. 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 tank.model.ts, find the protected region called called Add groups for the entity here and activate it.
  2. Add two groups, one called cleaning and one called dimensions as follows:

    static modelPropGroups: { [s: string]: Group } = {
         // % protected region % [Add groups for the entity here] on begin
         cleaning: {
             id: 'cleaning',
             displayName: 'Cleaning'
         },
         dimensions: {
             id: 'dimensions',
             displayName: 'Dimensions'
         },
         // % 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: TankModel.modelPropGroups.cleaning,
     // % protected region % [Add any additional model attribute properties for Clean here] end
    

    Applying the cleaning group to the attributes clean and lastCleaned as well as the dimensions group to the attributes width, length and height gives our three groupings. You will notice that we have not applied groups to our reference Fish or Name.

Styling the CRUD Tile

Styling the CRUD tile is like styling any other element, component and behaviour in your project.

  1. Navigate yourself to clientside/src/app/lib/scss/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 look like this:

CRUD View with Styling Improvements

Last updated: 02 June 2020


Start modelling your app today.