How do I modify the dojo templateString data?

Fredrik von Werder

Vote:

Hi,

In a default templateString there is div with attribute

data-dojo-attach-point="contentName"

This renders the IContent Name and status (Published)

But if I want to show some other properties here, how shall I do? I would like to show "StartPublish"

Can I just add elements with other attach points in the template?

What are the names of properties to add here?

contentName, etc what else is there?

#87570

Jun 17, 2014 12:35

Fredrik von Werder

Vote:

Can I just add another attach-point with contentDate for example?

#87615

Jun 18, 2014 9:44

Ha Bui

Vote:

Hi, I don't understand your question so much!

I guess that your widget inherited from another and now you want customize it's UI right?

If true, you can override the postCreate method and inject whatever you want or simply copy the default template and modify ...

// Ha Bui

#87716

Jun 20, 2014 6:38

Fredrik von Werder

Vote:

Hi,

Well I don't understand your answer either so that's fine :)

Any links to articles about modifying the templateString widget to show other properties that just the pagename, would be appreciated.

/Fredrik

#87758

Jun 23, 2014 9:41

Ha Bui

Vote:

Hi Fredrik,

I think these're some helpful links:

I use example in epiwiki, we have a widget:

define([
    "dojo/_base/declare",
    "dojo/html",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
//CMS (use "epi/cms" if you are running EPiServer 7.0, "epi-cms" if you are running 7.1 or above)
    "epi/cms/_ContentContextMixin",
    "dojo/text!./templates/CustomComponent.html"
], function (
    declare,
    html,
    _WidgetBase,
    _TemplatedMixin, 
    _ContentContextMixin,
    template
) {
    return declare("alloy.components.CustomComponent",
        [_WidgetBase, _TemplatedMixin, _ContentContextMixin], {
            templateString: template,
            contextChanged: function (context, callerData) {
                html.set(this.contentName, context.name);
                this.inherited(arguments);
            }
        });
});

with the template is:

<div>
    <div data-dojo-attach-point="contentName"></div>
</div>

Now I create new widget that inherited from the widget above and want to add more information about "StartPublish" with attach-point name is: "contentDate"

define([
    "dojo/_base/declare",
    "dojo/when",
    "alloy.components.CustomComponent"
], function (
    declare,
    when,
    CustomComponent
) {
    return declare("alloy.components.MyComponentCustomTemplate", [CustomComponent], {
        template: "\
            <div>\
                <div data-dojo-attach-point=\"contentName\"></div>\
                <div data-dojo-attach-point=\"contentDate\"></div>\
            </div>",

        contextChanged: function (context, callerData) {
            this.inherited(arguments);
            when(this.getCurrentContent(), function (currentContent) {
                html.set(this.contentDate, currentContent.lastPublished);
            });
        }
    });
});

Hope that help!

// Ha Bui

#87764

Jun 23, 2014 11:38

Fredrik von Werder

Vote:

Thanks Ha Bui,

however, I did exactly as described, but I failed, I guess there is something more..

And besides, I have problems editing the .js file and then refresh, files are stuck in the browsers cache it seems, what files is best to edit to make fresh reload of all the js/html files in the widget?

#87825

Jun 24, 2014 10:15

Ha Bui

Vote:

Hi Fredrik,

I typed wrong in last example: "templateString" insteadof "template". So sorry for that!

If you're using Chrome you can enable "Developer Tool" by press F12 and check "Disable cache" option.

// Ha Bui

#87837

Edited, Jun 24, 2014 11:59