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

[FrancescoTonini2]

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? 

[DarrenWiens2]

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

[FrancescoTonini2]

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

[RobertScheitlin__GISP]

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.

[FrancescoTonini2]

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.

[RobertScheitlin__GISP · Accepted solution]

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.