sitecoresitecore-speak-ui

Sitecore Speak - Set the title of an Expander in JavaScript


Using the cintelUtil, I can pretty easily set the Text for most SPEAK controls, on data binding. But for an Expander, I can't seem to set it. The setText has no effect.

It should be noted that my Expander is in a DataRepeater item. So it is going to dynamically render as many as needed for the data. Right now I am setting the text in the Expander rendering, but I need it to be dynamic because of the DataRepeater.

Below is the function for binding the data to the template. The Expander's name is InfoExpander.

    setupCompanyInfo: function (intelBaseUrl) {

                  providerHelper.initProvider(this.CompanyInfoProvider,
                      "companyinfo",
                      intelBaseUrl,
                      this.ExternalDataTabMessageBar);

                  providerHelper.setupDataRepeater(this.CompanyInfoProvider, this.CompanyInfoRepeater);

                  this.CompanyInfoRepeater.on("subAppLoaded", function (args) {
                      var data = args.data,
                          subapp = args.app;

                      cintelUtil.setText(subapp.InfoName, data.Name, true);
                      cintelUtil.setText(subapp.InfoExpander, data.Name, true);

                  }, this);

                  providerHelper.getListData(this.CompanyInfoProvider);
}

Solution

  • Through lots of debugging and a better understanding of Backbone, I found my answer.

    1. Use an Advanced Expander instead of the normal Expander I was using.
    2. Create an item using the template /sitecore/client/Business Component Library/version 1/Layouts/Renderings/Containers/AdvancedExpander/AdvancedExpander Parameters
    3. In that item you can set the parameters of you accordian. i.e. is it open by default, can it open, etc.
    4. In the Advanced Expander, set the datasource to your newly created item of step 3.
    5. When the Advanced Expander is used with a datasource, in Backbone a new attribute shows up called "header". We can set this property in our code to set the value. Use the code "subapp.InfoExpander.set("header", data.Name);" to accomplish that.

    setupCompanyInfo: function (intelBaseUrl) {    
        providerHelper.initProvider(this.CompanyInfoProvider,
            "companyinfo",
            intelBaseUrl,
            this.ExternalDataTabMessageBar);
    
        providerHelper.setupDataRepeater(this.CompanyInfoProvider, this.CompanyInfoRepeater);
    
        this.CompanyInfoRepeater.on("subAppLoaded", function (args) {
            var data = args.data,
                subapp = args.app;
    
            cintelUtil.setText(subapp.InfoName, data.Name, true);
    
            subapp.InfoExpander.set("header", data.Name);
    
        }, this);
    
        providerHelper.getListData(this.CompanyInfoProvider);
    }