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
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.