Add Separating Line in Qlik Sense Extension Settings

[TKendrick20]

I am creating a listbox extension. I have added a lot of different settings for when the object is in edit mode. I was wondering how to add lines between the various settings so that they are easier to tell apart.

The above image is from the Appearance (I don't know why the button next to Show Titles is all messed up).

[Stefan_Walther]

Hi,

I have unfortunately bad news for you. There is good reason why we haven't exposed the syntax behind these lines so far, it's just weird and hard to maintain. But we are planning to expose a better syntax in the future. So even if you find out how to get the lines in, please be aware that this will very likely change in the near future.

Sorry that I don't have better news for you.

Regards

Stefan

[TKendrick20]

No problem, Stefan. I made a quick fix for those interested based off this fact: the "tid" attribute of the <div> which contains the visual input for custom properties is the same as the "ref" specified for that property, minus the "props." if you use that.

So, after you've specified a custom property item:

SingleSelection: {

    ref: "props.SingleSelection",

    type: "boolean",

    label: "Always One Selected value",

    defaultValue: false

},

You can run this jQuery code to add a new style attribute:

$('div[tid="SingleSelection"]').each(function() {

    $(this).css("border-bottom","1px solid #9D9D9D");

});

I have yet to test this, but I will do so and check back.

[Stefan_Walther]

[Yianni_Ververis]

Thank you for the tip. Now I start using separators in my extensions too!

I personally try to avoid jQuery manipulating dom though and I just inject the css. This helps me to avoid extra coding like hover rules etc.

  vars.css = '\n\
      div[tid="SingleSelection"] { \n\
      border-bottom: 1px solid #9D9D9D\n\
  } \n\
  ';
  $("<style>").html(vars.css).appendTo("head");

Yianni

[TKendrick20]

This checks out and is probably a little nicer than jQuery .each. The exact (tested) code I wrote was:

var css = 'div[tid="SingleSelection"] { border-bottom: 1px solid #D9D9D9 }';  
$("<style>").html(css).appendTo("head");  

(Note: I got the 9's and D's backwards in my original comment)

[Aiham_Azmeh]

I strongly advise you to not rely on the tid parameter. It is used for internal testing purposes, and probably will change sooner or later.

You should be able to use the grouped parameter:

definition:{

     uses: "settings",

     items: {

          settings: {

               type: "items",

               label: "Add Items",

               grouped:true,

               items: { [...] }

           }

But this is not documented, so we do not officially support it

[TKendrick20]

I was wondering why Qlik elements were completely devoid of any id attributes, but have tid attributes. Qlik isn't very speedy with their changes, so I'll stick with Yianni's suggestion.

Thanks!