Quickly Add Unique Identifier to Blox Action Buttons Without Modifying Blox Template

[JeremyFriedel]

Quickly Add Unique Identifier to Blox Action Buttons Without Modifying Blox Template

A customer recently had the unusual request for a method to select and distinguish, via a CSS selector used within a custom Javascript action, for specific Blox buttons in a existing Blox widget that contained multiple identical buttons, identical in inner text and all other parameters, without adding any new lines to the Blox template to add unique identifiers. 

The customer had concerns that using the index order of the buttons, where the button was selected based on order, may be likely to break in the future, due to a potentially minor change.

The method used for making the least possible change to the Blox template, requiring no new lines or new parameters, while also creating a unique resilient CSS selector method for each button unlikely to be broken by future changes to the template while using an existing parameter, was to use the unexpected route of using the existing "font-size" inline styling as a unique CSS and JS selector, using very small decimal precision that was irrelevant to the rendering of the button itself, but allowed for a unique selecting parameter, without adding a single new line of Blox templating.

Blox places CSS styling to actions inline, and this allows for this unusual form of element tagging, where CSS can select based on inline styling text. 

This is implemented by adding unnecessary and unique precision to the font-size parameter of a Blox template line such as this:

    "actions": [
        {
            "style": {
                "font-size": "13px"
            },

with a very similar line:

    "actions": [
        {
            "style": {
                "font-size": "13.01px"
            },

 This results in Blox generating the following HTML with inline styling:

<ul class="action-set">
  <li class="action">
    <button class="btn btn__text" style="font-size: 13.01px;">
      Button Text
    </button>
  </li>
</ul>

This then allows that unique button to be selected via the CSS selector (used in code):

button[style*="font-size: 13.01px"]

This was then repeated for all other buttons (13.02, 13.03...) in both the template and code. The standard Javascript querySelector or jQuery (included in all Sisense web pages) can use this as a CSS selector to return the specific button.

This method is valid because CSS treats inline style as any other HTML attribute, so the attribute selector in modern CSS can be used, by treating the "style" parameter as any other HTML attribute of an element.

As would be expected, this hundredth pixel does not affect the actual rendering of the button, and while not at all necessary can be identically by using the thousandth decimal place or smaller.

While Blox does place action font-size styling inline, it is worth emphasizing that this kind of pseudo-recursive CSS selectors based on inline styling, is only possible when styling is inline and not applied via stylesheets.

This request is rather unique, and this method was only required due to the very specific nature of the request and the customer's specific concerns, but the method was unusual and unexpected and worth noting for other Sisense users who may have a similar restrictive use case of selecting otherwise unique Blox action buttons and making very minimal changes to the Blox templating of a Blox type widget. 

Share your experience in the comments! 

[DRay]

Thank you Jeremy for another great article. Your willingness to share knowledge is much appreciated! 😎

[JeremyFriedel]

Thanks David 😎