Change button type based on record value

App Development
1

I’d like to change the button style OR the hover colors based on a record value.

Example: If {RecordCompleted} is Yes, then button style = success

Any ideas?

Thanks!

2

Hey @mdykstra!

This can certainly be done with some JavaScript on the page but I love using the Custom Component for this type of thing.

Here are 2 articles that I used for reference:

Working with Links
IS comparison helper

For this example, I used the Datatables template from the Custom Component Library

image
image2256×1278 201 KB

The piece of code that’s responsible for determining the button color of the details link is this:

{{#is field_35 "Won"}}

    <td><a class="btn btn-success" href="{{tb_link this tb-id="1"}}">Nice Job!</a></td>

{{/is}}

{{#is field_35 "Lead"}}

    <td><a class="btn btn-danger" href="{{tb_link this tb-id="1"}}">ALmost There!</a></td>

{{/is}}

{{#is field_35 "Contact"}}

    <td><a class="btn btn-primary" href="{{tb_link this tb-id="1"}}">Looks Promising!</a></td>

{{/is}}

We’re doing 3 comparisons using the {{#is}} helper to check if the status field (field_35) is Contact, Lead, or Won. The HTML within the {{#is}} helper outputs only when the comparison is TRUE. You’ll notice that each line of HTML contains a different btn-class.

The end result is visible here :point_right: https://timyoung.tadabase.io/custom-component-button-style#!/custom-component

If you’d like to try this out using the Sample Data Table, here’s the code for the whole component.

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Customer Name</th>
            <th>Email</th>
            <th>Status</th>
            <th>Details</th>
        </tr>
    </thead>
    <tbody>
        {{#each records}}
            <tr>
                <td>{{field_31}}</td>
                <td>{{field_32}}</td>
                <td>{{field_35}}</td>
                {{#is field_35 "Won"}}
                <td><a class="btn btn-success" href="{{tb_link this tb-id="1"}}">Nice Job!</a></td>
                {{/is}}
                {{#is field_35 "Lead"}}
                <td><a class="btn btn-danger" href="{{tb_link this tb-id="1"}}">ALmost There!</a></td>
                {{/is}}
                {{#is field_35 "Contact"}}
                <td><a class="btn btn-primary" href="{{tb_link this tb-id="1"}}">Looks Promising!</a></td>
                {{/is}}
            </tr>
        {{/each}}
    </tbody>
</table>

If you need any more information regarding this technique or if you need the custom component enabled for your account, please let me know!