Conditional Attribute Display Logic in C#Bot

This article shows you how to conditionally hide/show/make read-only any attribute in an entity CRUD view written by 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 behaviour and an entity named Application which has a workflow behaviour. All associations are one-to-many and have source optional and target optional set to true.

UI Model

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

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.

Frontend Code

Explanation

The Bot-Written component EntityAttributeList is the crud display for an Entity. In the code below we render the EntityAttributList 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 UI 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 descripbed 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.

Last updated: 15 September 2020