Using categories and data binding events a FlatSelector

Posted by Community Admin on 04-Aug-2018 15:10

Using categories and data binding events a FlatSelector

All Replies

Posted by Community Admin on 17-Sep-2013 00:00

I created a Dynamic Items Field Control Selector for a dynamic module that I have, which uses a FlatSelector to list out the items by default.  That all works fine, but I need to add another column to show the category that the item belongs to.  By default it just gives me the category's GUID, but I need to show the actual text.

I have 2 questions:
Why doesn't the OnDataBinding event fire for the FlatSelector?  I've successfully used this before with other controls (DynamicDetailContainer for example), but my breakpoint never gets hit at runtime.

OR

Is there any built in way to just show the category's name/hierarchy as a column in the FlatSelector?

Thanks in advance!

Posted by Community Admin on 18-Sep-2013 00:00

Hi Nate,

Yes, the GUID is quite useless to display. There is a request to improve this in Thunder, but it has still not been done. Please vote for it!

I received this work around from Support when asking about it:

The reason why only the Guids are displayed is that we do not know which provider is used for the dynamic content. In order to be able to display the item titles you will need to call the Dynamic module's Data service and get them from there.

In my scenario I have exposed one public GUID property on the widget called "SelectedItemID" like so:

public Guid SelectedItemId get; set;

Then I have created a widget designer with Thunder following the instructions from the referred documentation article. Here are the 2 changes I made to the widget designer's .js file:

1. In the refreshUI function I call the service in order to get the item's Title like so:

refreshUI: function ()
        var controlData = this._propertyEditor.get_control(); /* JavaScript clone of your control - all the control properties will be properties of the controlData too */
  
        if (controlData.SelectedItemId)
            var serviceUrl = this.get_SelectedItemIdItemSelector()._originalServiceBaseUrl;
            if (serviceUrl.endsWith("/live"))
                serviceUrl = serviceUrl.substring(0, serviceUrl.length - 5);
            
            var providerName = "";
            if (this.get_SelectedItemIdItemSelector().get_providerName())
                providerName = this.get_SelectedItemIdItemSelector().get_providerName();
            
            var me = this;
            $.get(serviceUrl + "/" + controlData.SelectedItemId +
                "/?provider=" + providerName +
                "&itemType=" + this.get_SelectedItemIdItemSelector().get_itemType(), function (data)
                    me.get_selectedSelectedItemId().innerHTML = data.Item.Title.Value;
                );
            //this.get_selectedSelectedItemId().innerHTML = controlData.SelectedItemId;
            this.get_selectButtonSelectedItemId().innerHTML = '<span class=\"sfLinkBtnIn\">Change</span>';
        
    ,

Basically this calls the service with the correctly populated values for provider, item type etc. which retrieves the item's title. It also strips off the "/live" from the string constructed.
 
2. In the Private methods section for DoneSelecting you also need to pass the title like so:


_SelectedItemIdDoneSelecting: function (sender, args)
        var selectedItem = this.get_SelectedItemIdSelectedItems()[0];
        if (selectedItem != null)
            this.get_selectedSelectedItemId().innerHTML = selectedItem.Title.Value;
            this.get_selectButtonSelectedItemId().innerHTML = '<span class=\"sfLinkBtnIn\">Change</span>';
        
        this._selectSelectedItemIdDialog.dialog("close");
        jQuery("body > form").show();
        dialogBase.resizeToContent();
    ,

Arno

Posted by Community Admin on 18-Sep-2013 00:00

Thanks, it hadn't occurred to me to try making an AJAX request to get the info.  I'll give that a try.

This thread is closed