Skip to main content

Integration, Extension & APIs

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

Announcements
Welcome to Qlik Community! Check out our new navigation! FIND OUT MORE
cancel
Showing results for 
Search instead for 
Did you mean: 
TKendrick20
Partner - Specialist
Partner - Specialist

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
Stefan_Walther
Employee
Employee

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
Partner - Specialist
Partner - Specialist
Author

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
Employee
Employee

Yianni_Ververis
Employee
Employee

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
Partner - Specialist
Partner - Specialist
Author

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
Employee
Employee

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
Partner - Specialist
Partner - Specialist
Author

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!