Developer Docs

Styling attributes in a C#Bot CRUD view

[EntityName]Entity.tsx

In the client-side of your application, open the entity model file for the entity whose CRUD view you wish to style. The models are found in /clientside/src/Models/Entities. Each attribute is written into the file with a @CRUD tag above it.

className is an optional field that can be provided to the @CRUD tag. This className will then be added as a class when the attribute view is rendered to the DOM.

Image
@Validators.Required()
@observable
@attribute()
@CRUD({
    // % protected region % [Modify props to the crud options here for attribute 'state'] off begin
    name: 'state',
    displayType: 'textfield',
    headerColumn: true,
    searchable: true,
    searchFunction: 'like',
    searchTransform: AttrUtils.standardiseString,
    className: 'my-custom-className'
    // % protected region % [Modify props to the crud options here for attribute 'state'] end
})
public state: string;

SCSS

Find the file crud.scss in the behaviours/crud folder and make changes to the SCSS code provided. If you want to add some custom styles, go to the protected region at the bottom of the file called Add additional crud styles here.

Turn on the protected region and target the className you provided to the @CRUD tag. Using the className used in above example, I could write the following scss:

Image
.my-custom-className{
    background-color: #009FDD;
}

Default

The image below shows the default styling for a CRUD view in C#Bot.

Image

Styled

This image shows the same CRUD view after taking the steps described above.

Image

For more custom styling you can start reading Introduction to Harmony.

Was this article helpful?

Thanks for your feedback!

If you would like to tell us more, please click on the link below to send us a message with more details.

Tool:

Generate

Iterate

Bot:

C#Bot

SpringBot

On this page

New to Codebots?

We know our software can be complicated, so we are always happy to have a chat if you have any questions.