BloX Sort Values Action

[intapiuser]

Challenge:

When making a BloX widget, there is no UI element that you can use to sort the widget.

Solution:

This custom BloX action allows you to trigger a sort for any widgets including itself.

Steps To Implement:

STEP 1A: CREATING THE ACTION

Create the action using the following code and name it "sort value"

var widgetIds = payload.data.widgetToSort
var valueIndexToSort = payload.data.valueIndexToSort
var sortOrder = payload.data.sortDirection
payload.widget.dashboard.widgets.$$widgets
    .filter(i => widgetIds.includes(i.oid))
    .forEach(function (widget) {
        // delete all sorts
        widget.metadata.panels[1].items.forEach(function (i) {
            if (i.jaql.hasOwnProperty('sort')) {
                delete i.jaql.sort
            }
        })
        // add new sort
        widget.metadata.panels[1].items[valueIndexToSort].jaql.sort = sortOrder
        widget.changesMade()
        widget.refresh()
    })

STEP 1B: CREATING THE ACTION SNIPPET

In Step 2 of 2 Create Action Snippet add the following snippet:

{
    "type": "sort value",
    "title": "sort",
    "data": {
        "widgetToSort": "enter ID here",
        "sortDirection": "choose desc/asc",
        "valueIndexToSort": "0"
    }
}

STEP 2: IMPLEMENTING THE ACTION

In the example gif, the clickable element was used. You can find it in the action snippets.

You can also use this action in a standard action button.

Here is the code for the clickable element:

{
   "type": "TextBlock",
   "text": "⬆",
   "selectAction": {
      "type": "sort value",
      "title": "sort",
      "data": {
         "widgetToSort": "5f1a0895fb660605bcc72a3a",
         "sortDirection": "asc",
         "valueIndexToSort": "0"
      }
   }
}

[Astroraf]

Hi  intapiuser,

I have tried recreating this script but I cannot seem to get the same results you are getting. 

[Astroraf]

Maybe @DRay you can also help with this?

[DRay]

Hi @Astroraf,

I have reached out internally to try and get an answer.

[Liliia_DevX]

@Astroraf hi!

Since this article doesn't provide a full template example with the solution for a sort button, could you please share your implementation example? We'll do our best to understand what could go wrong and advise you on the further troubleshooting steps. 

Thanks, Lily

[Astroraf]

Hi @Liliia_DevX 

I recreated what @intapiuser has in his article. My editor script is as follows. (it's not pretty, don't judge me) 

{
    "style": "",
    "script": "",
    "title": "",
    "showCarousel": true,
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Revenue",
                    "size": "small"
                },
                {
                    "type": "TextBlock",
                    "text": "⬆",
                    "selectAction": {
                        "type": "sort value",
                        "title": "sort",
                        "data": {
                            "widgetToSort": "66e864c5120ed200336a489d",
                            "sortDirection": "asc",
                            "valueIndexToSort": "0"
                        }
                    }
                },
                {
                    "type": "TextBlock",
                    "text": "⬇",
                    "selectAction": {
                        "type": "sort value",
                        "title": "sort",
                        "data": {
                            "widgetToSort": "66e864c5120ed200336a489d",
                            "sortDirection": "desc",
                            "valueIndexToSort": "1"
                        }
                    }
                }
            ]
        }
    ],
    "actions": []
}

I have directed it towards the widget I want to affect but nothing is happening. 

[Liliia_DevX]

@Astroraf hi,

Please try to use the simplest example below. Make sue you created an additional widget to be used in "widgetToSort":

{
    "style": "",
    "script": "",
    "title": "",
    "showCarousel": false,
    "body": [],
    "actions": [
        {
            "type": "sort value",
            "title": "⬆",
            "data": {
                "widgetToSort": "66ea95365e49a3002a99e4d9",
                "sortDirection": "asc",
                "valueIndexToSort": "0"
            }
        },
        {
            "type": "sort value",
            "title": "⬇",
            "data": {
                "widgetToSort": "66ea95365e49a3002a99e4d9",
                "sortDirection": "desc",
                "valueIndexToSort": "0"
            }
        }
    ]
}

Then update the action code to the one below. This is required due to this change to make it work for newer Sisense versions.

var widgetIds = payload.data.widgetToSort
var valueIndexToSort = payload.data.valueIndexToSort
var sortOrder = payload.data.sortDirection
payload.widget.dashboard.widgets.$$widgets
    .filter(i => widgetIds.includes(i.oid))
    .forEach(function (widget) {
        // delete all sorts
        widget.metadata.panels[1].items.forEach(function (i) {
            if (i.jaql.hasOwnProperty('sort')) {
                delete i.jaql.sort
            }
        })
        // add new sort
        widget.metadata.panels[1].items[valueIndexToSort].jaql.sort = sortOrder
        widget.changesMade('bloxAction', ['metadata'])
        widget.refresh()
    })

This example worked from my side on L2024.2 and it could be used for developing more complex solutions 😊

Best,

Lily