Have widget update app subtitle

489
3
Jump to solution
01-20-2022 02:37 PM
LanceCole
MVP Regular Contributor

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.  

 

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

@LanceCole 

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]; 

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Emeritus

@LanceCole 

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]; 
LanceCole
MVP Regular Contributor

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.

0 Kudos
LanceCole
MVP Regular Contributor

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.

0 Kudos