Breadcrumb Customization

Hi,

How can I customize the existing Breadcrumb MVC widget in sitefinity?

I need to add a new dropdown field in the widget designer of breadcrumb widget. I have created the field referring  : github.com/.../ 

But I'm not getting the value of that field in the server side.

I have added the extra property in the extended model of BreadcrumbModel.cs. 

But the value is not persisting in the backend. Does anyone know why the value is not getting stored? Is there any additional steps to be done for persisting the data?

Regards,

Bini

Developing such a task requires few extensions according to the MVC pattern with C# for the model, Razor for the Views and AngularJS for the designer logic.

1) Extend the Breadcrumb model to include the value which you would like to be displayed, and register the new model using dependency injection in Global.asax file. You can use the example here: docs.sitefinity.com/feather-extend-the-navigation-widget-model

2) Extend the view of the breadcrumb widget to display that property from the model The name of the View is Breadcrumb.cshtml and it should be located under Breadcrumb folder. The file should be located under SitefinityWebApp/Mvc/Views/Breadcrumb Refer to the link for more info: docs.sitefinity.com/feather-modify-widget-templates

3) Extend the designer view cshtml to display the dropdown following the same pattern for the view with DesignerView.Simple.cshtml An example is provided here: docs.sitefinity.com/feather-add-client-components-to-the-news-default-designer-view You can see how a dropdown is developed here: github.com/.../DesignerView.Simple.cshtml

4) Create an angular controller scope in the Javascript to watch for changes of the value of the dropdown in the designer and repaly them to the server side model property. File should be based on designerview-simple.js of the breadcrumb. Example: docs.sitefinity.com/feather-add-custom-client-side-logic-to-the-javascript-file-of-the-news-designer You can use see how the widgets are developed here and use it as a reference github.com/.../Breadcrumb

In order to persist the value, you must create two watches:

1.One which takes the selected value and transfers it to the angular scope.

2.One which takes that change of the scope and transfers it to the selected value.

You can find the example in the following link: docs.sitefinity.com/feather-use-single-content-item-selectors Look for the section under "Next, you add the following code in the designer's controller:"

By default, the way to persist the values requires the property to be in the C# controller of the widget. (That is the default behavior of the property service in the designer view, which transfers the values)

Unfortunately, there is no direct way to modify the controller of a built-in widget. The easiest approach would be to use the extension: github.com/.../Sitefinity.MvcCustomModelDesigner Copy the PropertyDescriptors folder, and install the classes in the global.asax, as described in the link. This allows to get the properties of the model directly in the designer.

Regards,

Bini