How to add drop down/up chevron in My Request ESC

[Eli7]

Hi All,

I am trying to add the up or down chevron to the My request sys_updated_on and sys_created_on column but cannot figure it out.

I see the below column sort function in the client script and I added the c.sortColumn = "fa-chevron-down";  /up but not sure this will even work.

How should the <I element be defined I tried a number of things but cannot get it to work.

HTML:

<span role="columnheader" class="col-xs-2 padder-r-none padder-l-none" ng-click="c.sortTable('sys_updated_on')">${updated_capital}<i class="  how do I do it?"></span>
<span role="columnheader" class="col-xs-2 padder-r-none padder-l-none"ng-click="c.sortTable('sys_created_on')">${created_capital}</span>

Client script:

 c.sortColumn = "sys_updated_on";

    c.sortDesc = true;

    c.sortTable = function(sortColumn) {

        if (sortColumn == c.sortColumn) {

            c.sortDesc = !c.sortDesc;

c.sortColumn = "fa-chevron-down";

        } else {

            c.sortColumn = sortColumn;

            c.sortDesc = true;

c.sortDesc = "fa-chevron-up"; 

        }

        c.server.get({

            action: 'sort',

            lastLimit: c.data.lastLimit,

            view: c.viewFilter,

            search_text: c.filterText,

            desc: c.sortDesc,

            column: c.sortColumn

        }).then(function(response) {

            c.data = response.data;

        });

    }

Many Thanks!

[Malte_K · Accepted solution]

Hello Eli,

in your HTML template you can use the css classes "fa fa-chevron-up" or "fa fa-chevron-down" to add a chevron element, which is pointing up or down next to the header column title.

<i class="fa fa-chevron-up"/>

<!-- OR -->

<i class="fa fa-chevron-down"/>

<!-- Example in updated header -->

<span role="columnheader" class="col-xs-3 padder-r-none padder-l-none">
    <i id="u-chevron-update-header" class="fa fa-chevron-up"/>${updated_capital}
</span>

In your client script dont assign "fa-chevron-up/down" to c.sortColumn or c.sortDesc as this variables will be used for the querying the database for records depending on the order.

Instead you can do the following to toggle your chevron in the client script:

c.sortColumn = "sys_updated_on"; // Records will be sorted by col sys_updated_on
c.sortDesc = true; // Sort is descending
 
c.sortTable = function(sortColumn) {
        if (sortColumn == c.sortColumn) {
            c.sortDesc = !c.sortDesc;
        } else {
            c.sortColumn = sortColumn;
            c.sortDesc = true;
        }

           // Code to switch css classes to toggle the chevron
        const chevronElement = document.getElementById("u-chevron-update-header");
        if(c.sortDesc) // sort is descending
               chevronElement.classList.replace("fa-chevron-up", "fa-chevron-down");
        else // sort is ascending
               chevronElement.classList.replace("fa-chevron-down", "fa-chevron-up");

        c.server.get({
            action: 'sort',
            lastLimit: c.data.lastLimit,
            view: c.viewFilter,
            search_text: c.filterText,
            desc: c.sortDesc,
            column: c.sortColumn
        }).then(function(response) {
            c.data = response.data;
        });
    }

I hope this helped!