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.
- From within our
lesson.model.ts
, find the protected region called calledAdd groups for the entity here
and activate it. -
Add two groups, one called
estimators
and one calleddescriptors
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 };
-
Now to apply these groups, find our attributes as defined in
getProps()
and your referencesgetRelations()
. For each attribute/reference there will be a protected region calledAdd any additional model attribute properties for [ATTRIBUTE NAME] here
for attributes andAdd 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.
- Navigate yourself to
clientside/src/app/lib/scss/frontend/behaviours/crud/
and open thecrud.scss
file. - Turn on the protected region
Change form submission styles here
and find the classname.form-container__section
. -
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.
Was this article helpful?