We have a widget that loads a different map from AGOL to the a custom Web AppBuilder app based upon a customized foldable theme. The widget works great; however, we would like to change the subtitle of the app based upon the loaded map. I am having trouble figuring out how to access the header widget from the map loader widget. I tried to use @RobertScheitlin__GISP approach in Change Subtitle Text from a Widget but the query cannot resolve “.jimu-subtitle.jimu-float-leading”from the map loader widget. I can update this.appConfig.subtitle to the new value but cannot get the header widget to pickup the new value.
Any direction and input would be appreciated.
Solved! Go to Solution.
So if that css query is not working then you have to find out what are the classes applied to your apps subtitle. To do that you can right click on the apps subtitle and choose inspect. It will look something like this:
<h2 class="jimu-subtitle jimu-float-leading jimu-leading-margin5" data-dojo-attach-point="subtitleNode" id="jimuUniqName_3a452e20_256f_8d5f_03c5_14ade087e765_2" style="line-height: 40px; display: block;">with ArcGIS Web AppBuilder</h2>
Notice class="jimu-subtitle jimu-float-leading jimu-leading-margin5"
So in my case above this code would work:
var appSubTitleNode = query('.jimu-subtitle.jimu-float-leading')[0];
So if that css query is not working then you have to find out what are the classes applied to your apps subtitle. To do that you can right click on the apps subtitle and choose inspect. It will look something like this:
<h2 class="jimu-subtitle jimu-float-leading jimu-leading-margin5" data-dojo-attach-point="subtitleNode" id="jimuUniqName_3a452e20_256f_8d5f_03c5_14ade087e765_2" style="line-height: 40px; display: block;">with ArcGIS Web AppBuilder</h2>
Notice class="jimu-subtitle jimu-float-leading jimu-leading-margin5"
So in my case above this code would work:
var appSubTitleNode = query('.jimu-subtitle.jimu-float-leading')[0];
Thanks Robert,
The inspection of the subtitle shows basically the same as yours.
<h2 class="jimu-subtitle jimu-float-leading jimu-leading-margin5" data-dojo-attach-point="subtitleNode" id="jimuUniqName_fff752ca_2251_9d00_5896_abf840b08962_2" style="line-height: 50px; display: block;">with ArcGIS Web AppBuilder</h2>
Running the following code returns: appSubTitleNode: undefined
var appSubTitleNode = query('.jimu-subtitle.jimu-float-leading')[0];
console.log("appSubTitleNode: ", appSubTitleNode)
This is being called from our MapLoad Widget after the new map has been successfully loaded.
It was a scope issue pertaining to how the new map is loaded. Robert's code worked fine, as usual, once moved to a point that had appropriate scope.