How do I customize a widget view?

  • Updated
Follow

When using an existing widget, there will often come the need to extend or change the view for that widget. This can be done for a number of reasons such as:

  • You would like to add in a new field to be shown.
  • You would like to remove a field or other markup.

To accomplish you need to clone and then edit the new view. You'll need to clone the view because the out of box views are subject to being overwritten during an upgrade.

Creating a Custom View from an "Out of the Box" View

 NOTE: These instructions assume that you know:

  • The instance that you want to edit.
  • Where the existing view is located.

Copy the existing view

  1. To copy the existing view, you will need to locate the view in the View Manager management app in AppManager.mceclip0.png
  2. Once located, select all of the view’s contents. Then, open a preferred editor, and save the view as another file name, for example Modified.html.
  3. Next, you will need to upload the new view, which you can do via the use of the Add New button. Select the file (Modified.html in our example) and then select the folder path if it is not already selected. Click Save.mceclip1.png
  4. Once done, the view will appear in the same folder as the original.

Register the new view

  1. You must now register the view with the widget definition. Go into the Widget Manager management app in AppManager, and locate the widget definition. Click Edit to go into the edit widget definitions screen. In the WidgetViews section, click + to add another view.
  2. For the newly added row, give a name, then select View Picker to open a modal dialog. Select the view created in the previous step.

Enable the new view

  1. From the Widget Manager’s main screen, again locate the row corresponding to the widget. This time, click View Instances. Locate the instance you will want to edit, and click Edit for that row. In the WidgetOptions section, for the newly added view, select Display View and Selected View.
  2. At the top of the page, click Save & Exit to commit the change.
  3. The widget instance will now use the updated view.

Edit the new view

  1. With the existing widget instance using the new view, you can now edit it as you want. Navigate back to the view inside the View Manager app, and start making changes.mceclip2.png
  2. You can subtract elements from the view, or add to it as needs dictate.
  3. You can also edit the view directly from the front end site. See this topic “Editing Views Directly from the Front-end Site“.

Related articles