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

Posted by Community Admin on 14-Dec-2015 00:00

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

Posted by Community Admin on 17-Dec-2015 00:00

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

This thread is closed

All Replies