set tab title from nls

[LefterisKoumis]

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:

<div data-dojo-type="dijit/layout/TabContainer" style=" height: 700px; width: 630px; " >
<div data-dojo-type="dijit/layout/ContentPane" title=${nls.subjectA} >

nls.strings.js

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

[RobertScheitlin__GISP]

Lefteris,

   You need to wrap all html properties in double quotes.

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

[LefterisKoumis]

Thanks Robert. I tried that already, same result.

[RobertScheitlin__GISP]

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.

[LefterisKoumis]

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",
    
---------
---------‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Lefteris,

   Do you have this line in your Widget.js:

return declare([BaseWidget, _WidgetsInTemplateMixin], {

[LefterisKoumis]

Yeap....

define([----

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

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

[RobertScheitlin__GISP]

Lefteris,

  Strange. Can you attach your whole widget for inspection?

[LefterisKoumis]

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

Thank you.

[RobertScheitlin__GISP]

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