Sitecore Speak Components: Part 2

Posted 01/03/2017 by Yogeshwer Sharma

Here is the part 2 of Sitecore speak components. If you haven't read part 1 yet, you can catch up here. In part 1 we discussed about ItemTreeView Speak components and attributes/properties of ItemTreeView component from Sitecore. In this post we will learn how to execute our custom code in Speak to execute our functionality.

Before starting with this I assume that you have an idea about how to communicate between components and how to use components in code if not please read the Speak Tutorials about this. Also in this post we will only see what we need to do to use our custom code to set everything on the first load of our Speak UI app.

In my case I have created a JS file under /sitecore/shell/client/Language And Version Manager/Dialogs/Language And Version Manager/ location with name LanguageAndVersionManager.js as I was working on Module Language And Version Manager. We will discuss later post more about this module. Now I assigned this JS to PageCode rendering which comes by default when we create page in Speak see below screenshot.


Open the property window by double click on PageCode.



In PageCodeScriptFileName attribute we need to provide path of our JS file which we have created.

Paste below code in that JS file

define(["sitecore"], function (Sitecore) {

    var CustomFile = Sitecore.Definitions.App.extend({

        filesUploaded: [],

        initialized: function () {
            
        },
    });        

    return CustomFile;
});

Now once you load your speak page this JS will load and you can update code what you want to update on load of speak UI.

In my case I created a function and load that function with ajax call to show custom data in components which I have on my speak UI page. Below is the JS code for same.

define(["sitecore"], function (Sitecore) {

    var CustomFile = Sitecore.Definitions.App.extend({

        filesUploaded: [],

        initialized: function () {
            this.GetLanguages();
        },
    });        

    return CustomFile;
});


GetLanguages: function () {
            $.ajax({
                url: "/api/sitecore/LanguageAndVersionManager/GetLanguages",
                type: "POST",
                data: {  },
                context: this,
                success: function (data) {
                    var json = jQuery.parseJSON(data);
                    this.language.set("items", json);
                    
                }
            });
        },

This function is calling action method of controller which I have created to get Languages Data.

Now once you will load your Speak UI application it will call this JS as we have defined this into PageCode rendering. And now it will call GetLanguages() function on initialize of the speak UI. In this function we can get data what we want to show on the first load of Speak UI also we can make the changes in components attributes dynamically.

In next post of this series we will learn how to set and get data of Item Treeview and ListControl component.

Share:

Add your comment

 
 

 

Archive

Syndication