topic Re: WAB: How to add onclick button trigger to theme header subtitle? in Web AppBuilder Custom Widgets Questions

WAB: How to add onclick button trigger to theme header subtitle?

FrancescoTonini2 — Thu, 14 Sep 2017 20:28:50 GMT

I am customizing the header of the foldableTheme in WAB Dev Edition, and would like to make either the "subtitle" element or one of the "links" elements a button attached to an "onclick" event trigger to open a different URL (as an example). It seems like to customize the subtitle to a button I need to modify the main config.json in my web app:

config.json:

...
"appId": "",
"authorizedCrossOriginDomains": [""],
"title": "<div class=\"attribute-custom-style\"></div>",
"subtitle": "<button class=\"jimu-button-tutorial\" onclick=\"window.open(\"<my_url_here>\")\"><b><font size=\"2\" style=\"\">Start Tutorial</font></b></button>",
"keepAppState": true,
...

The subtitle parameters is passed as a text string to the index.html and jimu styler, I am guessing. Then I can style my button creating a class called "jimu-button-tutorial" inside ~jimu.js/css/jimu.css. However, the button does not click nor triggers any window opening with my URL. Any idea on what am I doing wrong?

Re: WAB: How to add onclick button trigger to theme header subtitle?

DarrenWiens2 — Thu, 14 Sep 2017 21:01:58 GMT

I think you missed escaping one quote, but not sure if that's the problem: \"<my_url_here>\"

Re: WAB: How to add onclick button trigger to theme header subtitle?

FrancescoTonini2 — Thu, 14 Sep 2017 21:06:59 GMT

Hi Darren, no I just typed <my_url> in the message above to replace my full URL and forgot to add it there, but I have the escape \ correctly set up...

Re: WAB: How to add onclick button trigger to theme header subtitle?

RobertScheitlin__GISP — Thu, 14 Sep 2017 21:24:42 GMT

Francesco,

Just adding HTML elements to the config.json like that will not work. There is not code in the Header controller widget that will parse the html element. You need to make your code changes to the Actual Header Controller widget .html and .js files.

Re: WAB: How to add onclick button trigger to theme header subtitle?

FrancescoTonini2 — Thu, 14 Sep 2017 22:12:20 GMT

Rob,

that makes sense...so basically to accomplish what I want (fairly easy) I will need to find the subtitle object in the header controller files and add that same logic there (button trigger)? I thought that subtitle in the config.json passed the actual <div> elements that go into index.html.

Re: WAB: How to add onclick button trigger to theme header subtitle?

RobertScheitlin__GISP — Thu, 14 Sep 2017 23:51:15 GMT

Francesco,

I thought that subtitle in the config.json passed the actual <div> elements that go into index.html.

Nope not at all. It is just a string that goes to the header controller widget and that string gets set to the HeaderController Widget.html subtitleNode as it's innerHTML.

The proper way to do it is to add a new html element to the HeaderController Widget.html and then add your logic (button click event) to the Widget.js.