AnsweredAssumed Answered

Formatting on case List View and Dashlets

Question asked by David Sillah on Jul 12, 2017
Latest reply on Jul 12, 2017 by Francesca Shiekh

Like • Show 0 Likes0
Comment • 1

Is it possible to have a conditional formatting on cases list view and dashlets.

for instance a colour or a symbol which differentiates urgent cases on the list view and the dashlets?

any ideas feel free to comment.

cheers

No one else has this question

Outcomes

1 Reply

Francesca Shiekh Jul 12, 2017 10:23 AM

Hi David,

I did this for our Lead Score which is an integer. I wanted anything 60 or over to have a different font/style.

There may be cleaner/better ways but here is mine.

First I created the field type based on the original integer field:

custom/clients/base/fields/scoring-int/scoring_int.js

The key here is the format function where I set a value of true/false to a custom highpriority variable.

({
    /**
     * @inheritDoc
     *
     * The direction for this field should always be `ltr`.
     */
    direction: 'ltr',
    //** priority for formatting
    highpriority: false,
    /**
     * {@inheritDoc}
     *
     * Unformats the integer based on userPreferences (grouping separator).
     * If we weren't able to parse the value, `undefined` is returned.
     *
     * @param {String} value the formatted value based on user preferences.
     * @return {Number|undefined} the unformatted value.
     */
    unformat: function(value) {
        return app.utils.unformatNumberStringLocale(value, true);
    },

    /**
     * {@inheritDoc}
     *
     * Formats the integer based on user preferences (grouping separator).
     * If the field definition has `disabled_num_format` as `true` the value
     * won't be formatted. Also, if the value isn't a finite integer it will
     * return `undefined`.
     *
     * @param {Number} value the integer value to format as per user
     *   preferences.
     * @return {String|undefined} the formatted value based as per user
     *   preferences.
     */
    format: function(value) {
        //color code scores
        if (value >= 60){
          this.highpriority = true;
        }else{
          this.highpriority = false;
        }
        var numberGroupSeparator = '', decimalSeparator = '';

        if (!this.def.disable_num_format) {
            numberGroupSeparator = app.user.getPreference('number_grouping_separator') || ',';
            decimalSeparator = app.user.getPreference('decimal_separator') || '.';
        }

        return app.utils.formatNumber(
            value, 0, 0,
            numberGroupSeparator,
            decimalSeparator
        );
    }
})

The in the detail, edit, and list .hbs respectively I use that custom value in an if statement to format the value as desired.

For example in detail.hbs I put a red box around it:

{{#if value}}
  {{#if highpriority}}
<div class="ellipsis_inline" style="border-style:double;padding:4px;color:red;font-weight: bold"; data-placement="bottom" align="right";{{#if dir}} dir="{{dir}}"{{/if}} title="{{value}}">
    {{value}}
</div>
  {{else}}
<div class="ellipsis_inline" style="border-style:double;padding:4px;font-weight: bold"; data-placement="bottom"; align="right";{{#if dir}} dir="{{dir}}"{{/if}} title="{{value}}">
    {{value}}
</div>
  {{/if}}
{{/if}}

While in list view I make it bold and red

{{#if value}}
  {{#if highpriority}}
<div class="ellipsis_inline" style="color:red;font-weight:bold"; data-placement="bottom" align="right";{{#if dir}} dir="{{dir}}"{{/if}} title="{{value}}">
    {{value}}
</div>
  {{else}}
<div class="ellipsis_inline" style="font-weight:bold"; data-placement="bottom"; align="right";{{#if dir}} dir="{{dir}}"{{/if}} title="{{value}}">
    {{value}}
</div>
  {{/if}}
{{/if}}

Again, the hbs files are based off the original integer hbs, just adding conditions for formatting based on my custom value "highpriority".

HTH

FrancescaS

1 person found this helpful

Actions

Formatting on case List View and Dashlets

Outcomes

Related Content

Recommended Content