+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Dynamic Module, Related Content Type and a custom add/edit screen.

Dynamic Module, Related Content Type and a custom add/edit screen.

2 posts, 0 answered
  1. Wayne
    Wayne avatar
    1 posts
    Registered:
    10 Sep 2015
    14 Dec 2015
    Link to this post

    Hi, We're looking to customise a dynamic modules create/edit page.  Ideally we'd like to create a lookup field on related content type, when an item is selected, we'd like to populate some help/guidance notes in the side panel, similar to the attached layout.

    Any help would be gratefully received.

    Thanks

     

  2. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    08 Dec 2016
    17 Dec 2015
    Link to this post
    Hello,

    To extend the edit and insert(create) views for dynamic modules an extension script must be added to each view to handle the extension client side. To have sidebars will have to be styled separately since the structure of the edit/create views doesn`t have predefined sidebar placeholders so this have to be added manually trough js/css manipulations.

    The extension script for example managing dependency between two fields in the module, if there is a specific value in one field it will make another field required.

    The extension script must be registered from Advanced settings -> Dynamic Modules -> Controls -> Your module -> Views -> Backend insert view -> Scripts, create new:
    Location: the location of the script in your solution, for example:~\Publications\PublicationsDetailsViewExtensions.js
    Method: OnDetailViewLoadedCustom
    Register the script for the Edit view, as well, by following the above steps for the module BackendEditView.

    Here is the sample script:
    // called by the Detail Form View when it has loaded
    function OnDetailViewLoadedCustom(sender, args) {
        // the sender here is DetailFormView
        var currentForm = sender;
      
        TicketsDetailsViewExtender.initialize(currentForm);
    };
      
    var TicketsDetailsViewExtender = (function ($) {
      
        var extender = function (detailsView) {
            this._detailsView = detailsView;
        }
      
        extender.prototype = {
            init: function () {
                var element = this._detailsView.get_element();
                this.addRelatedDataToTagsDependency(this._detailsView.get_fieldControlIds());
            },
      
            addRelatedDataToTagsDependency: function (fieldControlsIds) {
                var dropdownControl = this.getDropdownControl(fieldControlsIds);
                var textControl = this.getTextFieldControl(fieldControlsIds);
      
                var handlerSelected = createDelegate(textControl, this.validateTextFieldRequired);
                dropdownControl.add_valueChanged(handlerSelected);
            },
      
            validateTextFieldRequired: function (sender, args) {
                var value = sender.get_value();
                var validator = this.get_validator();
                if (value && value.Text == "Option 1") {
                    validator.set_required(true);
                }
                else {
                    validator.set_required(false);
                }
            },
      
            getDropdownControl: function (fieldControlsIds) {
                var dropdownControl = null;
                for (var i = 0; i < fieldControlsIds.length; i++) {
                    var id = fieldControlsIds[i];
                    // name of the field
                    if (id.indexOf('OptionsControl') != -1) {
                        dropdownControl = $find(id);
                        break;
                    }
                }
      
                return dropdownControl;
            },
      
            getTextFieldControl: function (fieldControlsIds) {
                var textControl = null;
                for (var i = 0; i < fieldControlsIds.length; i++) {
                    var id = fieldControlsIds[i];
                    // name of the field
                    if (id.indexOf('OtherControl') != -1) {
                        textControl = $find(id);
                        break;
                    }
                }
      
                return textControl;
            }
        };
      
        return {
            initialize: function (detailsView) {
                if (!detailsView) {
                    throw new Error("detailsView is not defined");
                }
      
                var detailsViewExtender = new extender(detailsView);
                detailsViewExtender.init();
            }
        };
      
    }(jQuery));
      
    // --- Helpers ---
      
    // From Microsoft.Ajax - Function.createDelegate
    function createDelegate(a, b) {
        return function () { return b.apply(a, arguments) }
    };

    I have also recorded and attached a video of the sample. Modify the sample to achieve the customization.

    Note that any configuration change done to dynamic modules will be lost if the module gets updaed add/remove field or simply save the module from Administration->Module Builder. This is because the module dynamically regenerates its configuration files.
    In this case add all the script registrations trough code. Since DynamicModulesConfig.config can`t be modified since its an Internal class the configurations for dynamic modules are also available from Advanced Settings->ContentView->Controls-> <module type>
    Here is a sample on how to access this configuration in Global.asax subscribed to the event executed every time the site starts.
    protected void Application_Start(object sender, EventArgs e)
           {
               Bootstrapper.Initialized += Bootstrapper_Initialized;
           }
       
           void Bootstrapper_Initialized(object sender, Telerik.Sitefinity.Data.ExecutedEventArgs e)
           {
               if (e.CommandName == "Bootstrapped")
               {
                   var configManager = ConfigManager.GetManager();
                   var configSection = configManager.GetSection<ContentViewConfig>();
       
                   var moduleSection = configSection.ContentViewControls.Values
                                                                       .Where(v => v.ContentTypeName == "Telerik.Sitefinity.DynamicTypes.Model.Greatnes.Awesome").FirstOrDefault();
       
                   var view = moduleSection.ViewsConfig.Values.FirstOrDefault() as MasterGridViewElement;
                   view.SortExpression = "FirstName ASC";
       
                   configManager.SaveSection(configSection);
               }
           }



    Regards,
    Stanislav Velikov
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
2 posts, 0 answered