topic Re: adding a border to a text box in Integration, Extension & APIs

adding a border to a text box

Tue, 23 Sep 2014 17:24:10 GMT

Hi,

Has anyone added a simple extension for a bordered text box? I used these a lot in Qlikview for KPI's.

I am trying to figure out the code I need in my javascript. I have created a copy of the 'hello world' extension and added CSS to it.

I don't know how to write the js to take text as an input.

Apologies if I've missed where this has been explained.

Re: adding a border to a text box

ToniKautto — Wed, 24 Sep 2014 05:29:58 GMT

I am a bit unclear on exactly what you are trying to do and where you get stuck, since I can see two different questions in your description.

1. Text with a border. In your example you just add text into the extension element. In the .html() function you can add any custom HTML script, which will then become the actual extension content. If you are not familiar with HTML and how to structure your content, there are multiple web sources that can guide you towards mastering HTML and CSS. Common sources are Codecademy and W3Schools.

Learn to code | Codecademy

W3Schools Online Web Tutorials

2. Handling user input. To handle input you first need a HTML element to receive the user input. A JavaScript can then be used to handle the actual input value, but a solution can also be to use HTML forms and just send the content to a server for further action.

HTML input tag

HTML Forms and Input

3. JavaScript coding. Codecademy can be a good start to understand the JavaScript basics. Once you have mastered the basics, a good way to progress can be to analyze how others have setup their extensions. For example you can find example extensions on Qlik Branch.

http://branch.qlik.com/

In summary you can start by generating web content outside of Qlik Sense extension context. Once your HTML and JavaScript works as expected, you can start looking into how this can be transformed into an extension.

Re: adding a border to a text box

Wed, 24 Sep 2014 05:37:03 GMT

Hi Toni,

Thanks for the response. So I'm OK with basic HTML and CSS, but I don't know how to write the JS so that QlikSense treats my custom textbox like a normal text box: by that I mean that it allows me to then 'click to add text and measures' (when I drop an instance of it onto the sheet) - or am I barking up the wrong tree and I should treat it more like a web form?

Thanks,

Dave

Re: adding a border to a text box

ToniKautto — Wed, 24 Sep 2014 06:18:01 GMT

I find the extension templates quite handy when I comes to figuring out how to set things up. For example create a extension based on the Qlik Sense Workbench chart template, and you will see how the dimensions and measures are defined in the JavaScript file. From these settings Qlik Sense automatically renders the "Add dimension" and "Add measure" UI.

https://help.qlik.com/sense/en-us/developer/index.html#../Subsystems/Workbench/Content/qswb_wb_launch.htm

The help has a short walk through of the JS setup for example extensions.

https://help.qlik.com/sense/en-us/developer/index.html#../Subsystems/Workbench/Content/CodeExamples/ext_peoplechart.htm%…

Re: adding a border to a text box

Wed, 24 Sep 2014 06:25:12 GMT

Thanks, I can see documentation for dimensions and measures, which is really helpful. However, I want my element to have the properties of a QlikSense text element and I haven't found documentation that explains how to do that.

You have given me the idea that a work around could be to add a single measure, which would work in my current scenario, I think.... Thanks!

Re: adding a border to a text box

ToniKautto — Wed, 24 Sep 2014 06:31:07 GMT

I am not able to figure that one out either, by looking at the JS configuration.

The only way I can see is that you add a div with the "Click here..." message, and then switch the div to a input box when the div is clicked. With jQuery you should be able to do that really smoothly.

Sorry for being a bit slow on getting your question, it is a bit too early yet for me

Re: adding a border to a text box

Wed, 24 Sep 2014 06:37:19 GMT

Ah... great idea, thanks. I will have to try that a bit later on (my JS / jQuery isn't so strong) and will update on how it goes.

Thanks!

Re: adding a border to a text box

ToniKautto — Wed, 24 Sep 2014 06:47:06 GMT

In jQuery you address the id $("#MyElementId"), calss $(".MyElementClass") or by element type $("div"). Naturally you have a bunch of function to call on the fetched object, but the hide and show are very intuative.

http://www.w3schools.com/jquery/jquery_hide_show.asp

jQuery is enabled by default in Qlik Sense.

Remember to press F5 to refresh your application in the Qlik Sense Desktop (or browser)

Good luck!