Extend the model of built-in widgets

You can extend widget models to modify widgets implementation.

The following example demonstrates  how to extend the model of the Navigation widget and thus modify the widget's display settings. You first implement a custom model that represents page nodes with descriptions and then modify the widget's view to use the new model.

Implement the custom model

First, in the Mvc/Models/Navigation folder you create a new view model that represents a page node. The model inherits from the default model, so it is usable. Add an extra Description property to the model:

As a result, the new model extracts page descriptions.

Next, you create a new model that is aware of the custom view model. The new navigation model inherits from the default model and exposes the same constructors. You then override the InstantiateNodeViewModel method and its overloads in the new model:

Modify the view to use the new view model

You use the NavigationView.Tabs view as a starting point. Wherever page nodes are enumerated, make sure to specify the new view model class and print the node's Description:

Rebind the model to the new implementation

You finally replace the original implementation of the Navigation widget model with the new model. You do this using Bootstrapper.Bootstrapped event. Place the following code in your Global.asax file:

List of built-in widget models

Interface Implementation
IBlogModel BlogModel 
IBlogPostModel BlogPostModel 
ICardModel CardModel 
ICommentsModel CommentsModel
IContentBlockModel ContentBlockModel 
IDynamicContentModel DynamicContentModel 
ISubscribeFormModel SubscribeFormModel 
IUnsubscribeFormModel UnsubscribeFormModel 
IEventModel EventModel 
IEventSchedulerModel EventSchedulerModel 

IFormModel:

  • ICaptchaModel
  • ICheckboxesFieldModel
  • IDropdownListFieldModel
  • IFileFieldModel
  • IHiddenFieldModel
  • IMultipleChoiceFieldModel
  • INavigationFieldModel
  • IPageBreakModel
  • IParagraphTextFieldModel
  • ISectionHeaderModel
  • ISubmitButtonModel
  • ITextFieldModel
  • IFormFieldModel

FormModel:

  • CaptchaModel
  • CheckboxesFieldModel
  • DropdownListFieldModel
  • FileFieldModel
  • HiddenFieldModel
  • MultipleChoiceFieldModel
  • NavigationFieldModel
  • PageBreakModel
  • ParagraphTextFieldModel
  • SectionHeaderModel
  • SubmitButtonModel
  • TextFieldModel
  • FormFieldModel 
IAccountActivationModel AccountActivationModel 
IChangePasswordModel ChangePasswordModel 
ILoginFormModel LoginFormModel 
ILoginStatusModel LoginStatusModel 
IProfileModel ProfileModel 
IRegistrationModel RegistrationModel 
IUsersListModel UsersListModel 
IEmbedCodeModel UsersListModel 
IJavaScriptModel JavaScriptModel 
IStyleSheetModel StyleSheetModel 
IListsModel ListsModel 
IDocumentModel DocumentModel 
IDocumentsListModel DocumentsListModel 
IImageModel ImageModel 
IImageGalleryModel ImageGalleryModel 
IVideoModel VideoModel 
IVideoGalleryModel VideoGalleryModel 
INavigationModel NavigationModel 
INewsModel NewsModel 
IFeedModel FeedModel 
ISearchBoxModel SearchBoxModel 
ISocialShareModel SocialShareModel 
IFlatTaxonomyModel FlatTaxonomyModel 
IHierarchicalTaxonomyModel HierarchicalTaxonomyModel 

Additional resources

ARTICLES

Tags

Was this article helpful?