topic Re: set tab title from nls in Web AppBuilder Custom Widgets Questions

set tab title from nls

LefterisKoumis — Sun, 12 Dec 2021 06:50:11 GMT

I am trying to assign a title to a tab from the nls.strings, however I get this error. The only way is to assign the title is by using the widget.js? Thanks.

HTML:

nls.strings.js

define({
  root: ({
    subjectA: "Subject A",
-------
--------‍‍‍‍‍

Re: set tab title from nls

RobertScheitlin__GISP — Thu, 11 May 2017 01:36:01 GMT

Lefteris,

You need to wrap all html properties in double quotes.

<div data-dojo-type="dijit/layout/ContentPane" title="${nls.subjectA}" >‍‍

Re: set tab title from nls

LefterisKoumis — Thu, 11 May 2017 02:20:18 GMT

Thanks Robert. I tried that already, same result.

Re: set tab title from nls

RobertScheitlin__GISP — Thu, 11 May 2017 02:27:14 GMT

I don't see how you would be getting the same error unless you are not clearing your cache or changing the stemapp and not the apps version of the widget.

Re: set tab title from nls

LefterisKoumis — Sun, 12 Dec 2021 06:50:14 GMT

I don't know either. I cleared my cache and I even run the app on another workstation. I am working directly on the app folder and not the sitemap. Yes, I do get the same error. Perhaps the error is not originated from the format but instead of how the template in WidgetsInTemplateMixin is expecting the string?

HTML

<div >
<br / >
    <div class="help-text"><span style="color: blue">Check to add up to <span style="color: red; font-weight: bold; font-size: 200%">5 layers </span> to the map</span></div>
    <br / >
    
        <div  data-dojo-type="dijit/layout/TabContainer" style=" height: 700px; width: 630px; " >
            <div data-dojo-type="dijit/layout/ContentPane" title="${nls.subjectA}" >
                <div data-dojo-attach-point="layerListSubjectA"> </div>
            </div> 

            <div data-dojo-type="dijit/layout/TabContainer" title="${nls.subjectB}" nested="true">
                <div data-dojo-type="dijit/layout/ContentPane" title="${nls.subjectB1}" data-dojo-props="selected:true" style="">
                     <div  data-dojo-attach-point="layerListSubjectB1"> </div>
                </div>
                <div data-dojo-type="dijit/layout/ContentPane" title="${nls.subjectB2}">
                    <div  data-dojo-attach-point="layerListSubjectB2"> </div>
                </div>                
            </div>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍--------
-------‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

strings.js

define({
  root: ({
    subjectA: "Subject A",
    subjectB: "Subject B",
    subjectB1: "Subject B1",
    subjectB2: "Subject B2",
    
---------
---------‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: set tab title from nls

RobertScheitlin__GISP — Fri, 12 May 2017 16:21:39 GMT

Lefteris,

Do you have this line in your Widget.js:

return declare([BaseWidget, _WidgetsInTemplateMixin], {

Re: set tab title from nls

LefterisKoumis — Sun, 12 Dec 2021 06:50:17 GMT

Yeap....

define([----

        "jimu/BaseWidget",
        'dijit/_WidgetsInTemplateMixin',  
   ------
---------
 ],
    function (
       -----
-----
        BaseWidget,
         _WidgetsInTemplateMixin,
-----
-----

) {
        return declare([BaseWidget, _WidgetsInTemplateMixin], {
-----
-----‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: set tab title from nls

RobertScheitlin__GISP — Fri, 12 May 2017 18:49:54 GMT

Lefteris,

Strange. Can you attach your whole widget for inspection?

Re: set tab title from nls

LefterisKoumis — Mon, 15 May 2017 17:03:47 GMT

This is a modified version of the Add Layer widget where I added tabs.

Thank you.

Re: set tab title from nls

RobertScheitlin__GISP — Sun, 12 Dec 2021 06:50:19 GMT

Lefteris,

Wow you have lots of syntax errors in your Widget.html (missing closing double quotes, extra spaces in property names). Then you were referencing nls properties that did not exist in your nls String file.

Corrected and formatted Widget.html:

<div>
  <br />
  <div data-dojo-type="dijit/layout/TabContainer" style="height:700px; width:630px;">
    <div data-dojo-type="dijit/layout/ContentPane" title="${nls.subjectA}">
      <div data-dojo-attach-point="layerListSubjectA"></div>
    </div>
    <div data-dojo-type="dijit/layout/TabContainer" title="${nls.subjectB}" nested=" true ">
      <div data-dojo-type="dijit/layout/ContentPane" title="${nls.subjectB1}" data-dojo-props="selected:true">
        <div data-dojo-attach-point="layerListSubjectB1"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" title="${nls.subjectB2}">
        <div data-dojo-attach-point="layerListSubjectB2"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" title="${nls.subjectB3}">
        <div data-dojo-attach-point="layerListSubjectB3"></div>
      </div>
    </div>
    <div data-dojo-type="dijit/layout/TabContainer" title="${nls.subjectC}" nested="true">
      <div data-dojo-type="dijit/layout/ContentPane" title="${nls.subjectC1}" data-dojo-props="selected:true">
        <div data-dojo-attach-point="layerListSubjectC1"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" title="${nls.subjectC2}">
        <div data-dojo-attach-point="layerListSubjectC2"></div>
      </div>
    </div>
  </div>
  <div data-dojo-attach-point="message"></div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

What you had in the strings.js:

root: ({
subjectA: "Subject A",
subjectB: "Subject B",
subjectB1: "Subject B1",
subjectB2: "Subject B2",
subjectB2: "Subject B3",
subjectC: "Subject C",
subjectC: "Subject C1",
subjectC: "Subject C2"
}),

Corrected portion of strings.js:

  root: ({
    subjectA: "Subject A",
    subjectB: "Subject B",
    subjectB1: "Subject B1",
    subjectB2: "Subject B2",
    subjectB3: "Subject B3",
    subjectC: "Subject C",
    subjectC1: "Subject C1",
    subjectC2: "Subject C2"
  }),‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Did your JS code editor not indicate that you had syntax errors?..

Re: set tab title from nls

LefterisKoumis — Tue, 16 May 2017 14:54:02 GMT

The actual widget is 3 times bigger so I created this smaller version so I can send it to you. The original widget does not have any syntax errors but it seems when I created these two files in the smaller version, I rushed. The original string.js and widget.html have the same scripts as the ones you posted here and I get the error that I stated in my original posting.

Thank you.

Re: set tab title from nls

RobertScheitlin__GISP — Tue, 16 May 2017 15:01:18 GMT

Lefteris,

Well I really can't help if you not providing your actual widget code. When I made those changes to the widget code you provided the tabs appeared with the text just fine.

Re: set tab title from nls

LefterisKoumis — Tue, 16 May 2017 15:18:29 GMT

ok. The code I provided to you without the syntax errors still shows the same error as the actual code. If you don't see the same "dijit._WidgetsInTemplateMixin template:nls.subjectA" error then I can't explain what's wrong with it. Thank you anyway.

Re: set tab title from nls

RobertScheitlin__GISP — Tue, 16 May 2017 16:23:05 GMT

Lefteris,

So you must have an error in your code still then. Here is the widget you send me working:

Re: set tab title from nls

LefterisKoumis — Tue, 16 May 2017 18:35:35 GMT

Thank you. I posted the zip file you provided to me and no errors appear!! This is bizarre. I run the notepad++ compare module and saw no differences between original versions of strings.js and widget.htm and the same ones in the zip filel!!!

Re: set tab title from nls

RobertScheitlin__GISP — Tue, 16 May 2017 18:41:44 GMT

check the manifest.json. you had haslocale as false.

Re: set tab title from nls

RobertScheitlin__GISP — Wed, 17 May 2017 19:11:02 GMT

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