Add Text if field is populated?

HI!,
Currently i am displaying 4 fields: Name, Position, Current Office and Permanent office. Permanent Office is only populated for a few employees. when the Permanent Office field is populated how can I display: Permanent Office and then the value of the field?

image

any help is greatly appreciated

Hi @Jeniffer_Rivera,

Switch the Editor mode of your Box template to HTML:

Once the editor is in HTML mode, go ahead and add this snippet of code:

{{#if YourFieldName}}
    <div class="poch-box__field">
        Permanent Office: {{YourFieldName}}
    </div>
{{/if}}

Make sure to replace "YourFieldName" with the actual name of your field.

Hope this helps!

1 Like

can this be done based on the specific value of the field? that way if there is one value, you can display one message and if there is another then a different message?

Hi @Jeniffer_Rivera,

Sure, you can do that. You'll have to use custom JavaScript for that though.

Here's an example:

api.onBoxRendered((box, itemData) => {
    let fieldText = 'Permanent Office'
    let department = itemData.Department;
    
    let $card = $(box.elem).find('.poch-box__fields-container');
    let fieldHTML;

    if (department == 'Marketing Department') {
        fieldHTML = $(`<div class="poch-box__field">${fieldText}: ${department}</div>`);
    } else if (department == 'Financial Department') {
        fieldText = 'Some text';
        fieldHTML = $(`<div class="poch-box__field">${fieldText}: ${department}</div>`);
    }
    
    if (fieldHTML) {
        $card.append(fieldHTML);
    }
});

Result:

@a.cox thank you so much. i did try your sample and I changed it to look at another field that is not department and it doesn't seem to work :frowning:

here is my code:

api.onBoxRendered((box, itemData) => {
let fieldText = 'Detailed From'
let DetailOffice = itemData.field_12;

let $card = $(box.elem).find('.poch-box__fields-container');
let fieldHTML;

if (DetailState == 'Internal') {
    fieldHTML = $(`<div class="poch-box__field">${fieldText}: ${DetailOffice}</div>`);
} else if (DetailState == 'External') {
    fieldText = 'Detailed To';
    fieldHTML = $(`<div class="poch-box__field">${fieldText}: ${DetailOffice}</div>`);
}

if (fieldHTML) {
    $card.append(fieldHTML);
}

});

Hi @Jeniffer_Rivera,

Please try renaming the DetailOffice variable to DetailState as follows and let me know if that helps:

api.onBoxRendered((box, itemData) => {
    let fieldText = 'Detailed From'
    let DetailState = itemData.field_12;
    
    let $card = $(box.elem).find('.poch-box__fields-container');
    let fieldHTML;
    
    if (DetailState == 'Internal') {
        fieldHTML = $(`<div class="poch-box__field">${fieldText}: ${DetailState}</div>`);
    } else if (DetailState == 'External') {
        fieldText = 'Detailed To';
        fieldHTML = $(`<div class="poch-box__field">${fieldText}: ${DetailState}</div>`);
    }
    
    if (fieldHTML) {
        $card.append(fieldHTML);
    }
});
1 Like

perfect! i had to remove the previous If statement in the design Box Template and that made it work. Thank you so much!

1 Like

@a.cox would i be able to reuse this under the api.onTooltipRendered((tooltip, itemData) ?

Hi @Jeniffer_Rivera,

Sure, but the code needs to be slighltly modified:

api.onTooltipRendered((tooltip, itemData) => {
    let fieldText = 'Detailed From'
    let DetailState = itemData.field_12;
    
    let $tooltip = $(tooltip.elem).find('.poch-tooltip__fields-container');
    let fieldHTML;
    
    if (DetailState == 'Internal') {
        fieldHTML = $(`<div class="poch-tooltip__field is-size-4">${fieldText}: ${DetailState}</div>`);
    } else if (DetailState == 'External') {
        fieldText = 'Detailed To';
        fieldHTML = $(`<div class="poch-tooltip__field is-size-4">${fieldText}: ${DetailState}</div>`);
    }
    
    if (fieldHTML) {
        $tooltip.append(fieldHTML);
    }
});
1 Like