Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

TKendrick20
Valued Contributor

Add Separating Line in Qlik Sense Extension Settings

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.

Lines in Extension Settings.PNG

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

7 Replies
Employee
Employee

Re: Add Separating Line in Qlik Sense Extension Settings

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
Valued Contributor

Re: Add Separating Line in Qlik Sense Extension Settings

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.

Employee
Employee

Re: Add Separating Line in Qlik Sense Extension Settings

Employee
Employee

Re: Add Separating Line in Qlik Sense Extension Settings

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
Valued Contributor

Re: Add Separating Line in Qlik Sense Extension Settings

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)

Employee
Employee

Re: Add Separating Line in Qlik Sense Extension Settings

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
Valued Contributor

Re: Add Separating Line in Qlik Sense Extension Settings

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!

Community Browser