Conditional attribute display logic in C#Bot

Context

I want to configure my CRUD display to show, hide or make read-only certain attributes depending on the context the CRUD display is being shown in.

Entity Model

The entity model has a few basic users with user extension and an entity named Application which has a workflow extension. All associations are one-to-many and have source optional and target optional set to true.

Interface Model

The Interface model has a page Dashboard, which has Is Home Page set to true. The Dashboard page also has a Custom Tile.

Security Model

The user entity Admin has full permissions, no visitor access is given to the site, and in general the security is very relaxed.

Front-end Code

Explanation

The Bot-Written component EntityAttributeList is the crud display for an Entity. In the code below we render the EntityAttributeList and tell it what entity we want to display. In this case, it’s an ApplicationEntity called model that we instantiate a few lines previously. We also provide a title, a formMode(are we creating, viewing or editing?) and the modelType which says tell the component what type the model we passed in is.

By default, the attributes will be displayed according to the formMode prop, however this can be over-written for each attribute by using the optional prop attributeBehaviours. attributeBehaviours takes an array of IEntityAttributeBehaviour which is an object with a name and behaviour property. name specifies the name of the attribute you are configuring, and behaviour specifies how to display the attribute. The options are VIEW (for read only) EDIT (so the attribute can be set) and HIDE (which will prevent the attribute from being displayed at all).

Using the attributeBehaviours prop, we can conditionally show, hide or make read-only any attribute on the model we pass to EntityAttributeList.

DashboardTile.tsx

In the Interface Diagram on the Codebots Platform we specified a Page Dashboard (which is our homepage) with a custom tile called Dashboard. We can configure this custom tile to display a CRUD view described above.

Open the file DashboardTile.tsx.

Find the protected region Add any extra imports here, turn it on and add the lines of code shown below.

// % protected region % [Add any extra imports here] on begin
import EntityAttributeList, {IEntityAttributeBehaviour} from "../Components/CRUD/EntityAttributeList";
import { ApplicationEntity } from 'Models/Entities';
// % protected region % [Add any extra imports here] end

Find the protected region Override contents here, turn it on and add the lines of code shown below.

// % protected region % [Override contents here] on begin
        const attributeBehaviours: IEntityAttributeBehaviour[] = [
            {
                name: 'justification',
                behaviour: AttributeFormMode.VIEW
            }
        ];

        const model = new ApplicationEntity();

        contents = (
            <>
                <EntityAttributeList
                    {...this.props}
                    attributeBehaviours={attributeBehaviours}
                    model={model}
                    sectionClassName="crud__create"
                    title={`Create New Application`}
                    formMode={EntityFormMode.CREATE}
                    modelType={Models.ApplicationEntity}
                />
            </>
        );
        // % protected region % [Override contents here] end

Outcome

In the image below, you can now see that the Justification attribute is displayed as read-only.