topic Re: Add Separating Line in Qlik Sense Extension Settings in Integration, Extension & APIs

Add Separating Line in Qlik Sense Extension Settings

TKendrick20 — Tue, 26 Jul 2016 17:25:17 GMT

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).

Re: Add Separating Line in Qlik Sense Extension Settings

Stefan_Walther — Tue, 26 Jul 2016 18:06:14 GMT

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

Re: Add Separating Line in Qlik Sense Extension Settings

TKendrick20 — Tue, 26 Jul 2016 18:26:10 GMT

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.

Re: Add Separating Line in Qlik Sense Extension Settings

Stefan_Walther — Tue, 26 Jul 2016 19:06:40 GMT

Re: Add Separating Line in Qlik Sense Extension Settings

Yianni_Ververis — Wed, 27 Jul 2016 12:02:24 GMT

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

Re: Add Separating Line in Qlik Sense Extension Settings

TKendrick20 — Wed, 27 Jul 2016 13:47:51 GMT

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)

Re: Add Separating Line in Qlik Sense Extension Settings

Aiham_Azmeh — Thu, 28 Jul 2016 06:32:59 GMT

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

Re: Add Separating Line in Qlik Sense Extension Settings

TKendrick20 — Thu, 28 Jul 2016 12:48:14 GMT

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!