nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Change Subtitle Text from a Widget

BrittneyGibbons1

I would like the subtitle text of my application to change based on user input in the application. Although, I was able to do this, it appeared to corrupt the Header Controller of the theme and I was unable to save any edits in WebApp Builder afterwards. It seems like it may cause a problem because a change in the subtitle prompts the reset of the Save button in WebApp Builder. Is it possible to change the subtitle text from within the application without causing problems with the theme?

Thanks so much.

Brittney

タグ付けされた投稿をもっと見る

Accepted answers

RobertScheitlin__GISP

Brittney,

Sure you just edit the actual dom element in your code:

<SPAN class="keyword token">var</SPAN> appSubTitleNode <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.jimu-subtitle.jimu-float-leading'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>&nbsp;&nbsp;&nbsp; 
appSubTitleNode<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> <SPAN class="string token">"my new subtitle"</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

RobertScheitlin__GISP

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

BrittneyGibbons1

Thanks so much, that works perfectly. The way I was passing the parameter before must have been the issue.

Brittney

RobertScheitlin__GISP

Brittney,

Sure you just edit the actual dom element in your code:

<SPAN class="keyword token">var</SPAN> appSubTitleNode <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.jimu-subtitle.jimu-float-leading'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>&nbsp;&nbsp;&nbsp; 
appSubTitleNode<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> <SPAN class="string token">"my new subtitle"</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.