How to Show, Hide or Rearrange VIDIZMO Widgets

Overview

While businesses are rapidly undergoing major digital transformations, VIDIZMO recognizes the increasing need of tailoring digital solutions and their layout to meet the need of the customer organizations. By using Widgets, you can now customize and control the look and feel of your VIDIZMO Portal with a few breezy steps.

Before you start

• Only Manager+ portal users can add or update Widgets to the VIDIZMO Portal.
• Any error in the code snippets, provided below, while configuring a Widget through Theme Editor may distort the User Interface or even some feature(s) of the Portal, therefore, it is recommended that changes should be made carefully. Also, try and maintain a back-up of the original widgets so that you may go back to the default view in case the changes are unwanted. 
• You can also use this documentation as a back-up of the original widgets so that you may restore the default view in case of unintended changes.

VIDIZMO Widgets

VIDIZMO Widgets may add/remove content and features to your Portal's Homepage and/or Category Homepage. Widgets can help your Portal users to seamlessly navigate to your VIDIZMO application and help them get useful insights right on the Portal / Category Homepage. 

Theme Editor

Theme Editor is the place where Widget Code can be placed and modified as per the requirements. To access Theme Editor;

1. From the Portal's Homepage:

i. Click on the navigation menu on the top left of your screen.

ii. Expand the Admin tab.

iii Click on Portal Settings.

2. From the Portal Settings screen;

i. Navigate to Branding and click to expand it

ii. Select the Theme Editor.

iii. Here, you will find three sets of Widgets each with well-defined code and comments to help you explain the usability of each code snippet;

a. Account Homepage: This page will allow you to manage all the Widgets specific to the Portal Homepage.

b. Category Homepage: As the name suggests, it will help you manage all the Widgets specific to Category Homepage.

c. Sidebar Navigation: This page will help you enable or disable Widgets available in the Sidebar Navigation menu.

d. Topbar navigation: This section helps you placing the Portal logo in the top bar navigation.

Widgets' Parameters Description

The table below shows the description of various parameters used in VIDIZMO Widgets code snippets.

Account Homepage Widgets

Homepage Banner

The Homepage Banner is an image that can be displayed under the Navigation Menu of your Portal Homepage. Once you have uploaded a Banner you can resize, relocate, display or even hide it by using the code below in the Theme Editor.

<div class="row">
   <div class="slctrChannelHeader">
      <vdz-account-header template-type="AccountHomePageHeader"> </vdz-account-header>
   </div>
</div>

Featured Media

VIDIZMO users can set their uploaded media on the homepage of the portal as featured. Setting media as featured allows users to give prominence and quick access to their content. The below code snippet will help you make necessary arrangements related to the Featured Media.

<div class="ibox float-e-margins">
   <div class="no-padding">
      <vdz-mashups-featured
         mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":36,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"isFeatured":true,"orderBy":"Weight"}'
         replace-mashups="false"> </vdz-mashups-featured>
   </div>
</div>

<div class="ibox float-e-margins no-margins slider-height">
   <div class="ibox-content no-padding bg-muted">
      <vdz-mashups-most heading="MashupsMostMostRecent" id="mashupsMost-MostRecentHeadingBtn"
         mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":18,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"orderBy":"UpdatedDate"}'
         replace-mashups="false" page-size-md="3"> </vdz-mashups-most>
   </div>
</div>

<div class="ibox float-e-margins no-margins slider-height">
   <div class="ibox-content no-padding bg-muted">
      <vdz-mashups-most heading="MashupsMostMostPopular" id="mashupsMost-MostPopularHeadingBtn"
         mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":18,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"orderBy":"Popularity"}'
         replace-mashups="false" page-size-md="3"> </vdz-mashups-most>
   </div>
</div>

Note: Most Popular Media is marked on the basis of sum of likes, rating, marked as favorite and comments on that media. 

<div class="ibox float-e-margins no-margins slider-height">
   <div class="ibox-content no-padding bg-muted">
      <vdz-mashups-most heading="MashupsMostMostViewed" id="mashupsMost-MostViewedHeadingBtn"
         mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":18,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"orderBy":"TotalViewed"}'
         replace-mashups="false" page-size-md="3"></vdz-mashups-most>
   </div>
</div>

Featured Portals 

Featuring portals section on the Homepage is the best way of promoting it to users. This helps users to identify Portals of importance and relevance and makes it easier for them to access its content. Use the code below to make the required changes to the placement of this section.

<ng-container>
   <vdz-featured-channel heading="FeaturedPortalsFeaturedChannel"
      tenant-search-criteria='{"isGlobal":true,"isFeatured":true,"pageIndex":0,"pageSize":15000,"orderBy":"Weight","sortType":"ASC","tenantSearchPart":["BasicInfo","TenantDetailInfo","ChannelStats"]}'>
   </vdz-featured-channel>
</ng-container>

Tag Clouds 

Tag Cloud section is available under the Featured Portal section on the Homepage. Here an end-user can see the most used tags used in the metadata of the media uploaded to the Portal. Use the code below to make the required changes to the placement of this section.

<vdz-enterprise-tag-cloud-filter></vdz-enterprise-tag-cloud-filter>

<div class="ibox float-e-margins no-margins">
   <vdz-category-most is-featured="true" page-size-md="4" parent-category="" show-in-flat-view="false">
   </vdz-category-most>
</div>

Large-scale enterprises contain a collection of video content that needs to be divided into categories for better organization of the content. To solve this problem, VIDIZMO offers its customers to have distinct categories within a portal for content to be maintained and searched easily. Similar to the Homepage, VIDIZMO allows enterprises to add subjective styling to their Categories for their users to feel connected to their objectives. Use the code below to make the required changes to the placement of this section.

<vdz-category-info category-id="##categoryId##"></vdz-category-info>

Featured Category Carousel

The Featured Category Carousel can be seen in the General Category section. To customize its look and feel, the following code snippet can be used. 

<div class="ibox float-e-margins">
   <div class="no-padding">
      <vdz-mashups-featured
         data-mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":36,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"isFeatured":true,"orderBy":"Weight"}'
         replace-mashups="false">
      </vdz-mashups-featured>
   </div>
</div>

<div class="ibox float-e-margins">
   <div class="no-padding">
      <vdz-mashups-featured
         data-mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":36,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"isFeatured":true,"orderBy":"Weight"}'
         replace-mashups="false">
      </vdz-mashups-featured>
   </div>
</div>

<div class="ibox float-e-margins no-margins slider-height">
   <div class="ibox-content no-padding bg-muted">
      <vdz-mashups-most heading="MashupsMostMostRecent" id="mashupsMost-MostRecentHeadingBtn"
         data-mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":18,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"orderBy":"UpdatedDate"}'
         replace-mashups="false" page-size-md="3">
      </vdz-mashups-most>
   </div>
</div>

<div class="ibox float-e-margins no-margins slider-height">
   <div class="ibox-content no-padding bg-muted">
      <vdz-mashups-most heading="MashupsMostMostPopular" id="mashupsMost-MostPopularHeadingBtn"
         data-mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":18,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"orderBy":"Popularity"}'
         replace-mashups="false" page-size-md="3">
      </vdz-mashups-most>
   </div>
</div>

<div class="ibox float-e-margins no-margins slider-height">
   <div class="ibox-content no-padding bg-muted">
      <vdz-mashups-most heading="MashupsMostMostViewed" id="mashupsMost-MostViewedHeadingBtn"
         data-mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":18,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"orderBy":"TotalViewed"}'
         replace-mashups="false" page-size-md="3">
      </vdz-mashups-most>
   </div>
</div>

Media Gallery View

This is a comprehensive view that allows you to view all mashups together in a thumb-view, list-view, or detail-view. This correlates with the faceted navigation and helps you get to the desired content faster and more efficiently.

<vdz-mashup-thumb-view
   action-menu-items='{ "showLikeAction": "true", "showReportAction" : "true", "showFavoriteAction" : "true" }'
   heading="Collection"
   data-mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":18,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"mashupFormats":["collection"],"isGlobal":true,"showOnChannelLibrary":true,"orderBy":"UpdatedDate"}'
   show-description="false">
</vdz-mashup-thumb-view>

Note: Public/Anonymous Access is not available in VIDIZMO Digital Evidence Management (DEMS) product package.

<vdz-side-bar-nav show-home-option="true" show-portal-logo="true" show-portal-name="true" show-all-portals-option="true"
   show-about-us-option="true" show-contact-us-option="true" show-privacy-policy-option="true"
   show-download-desktop-app-option="true"></vdz-side-bar-nav>

Note: Options available in the menu depends upon the user role. The above screenshot is taken from an Admin account.

Topbar Navigation

Portal users can upload an image as the corporate logo for the Portal. This image represents the Portal and is shown as a thumbnail on the All Portals screen. If you do not upload a Portal thumbnail, then VIDIZMO’s logo will appear as the default image. The Topbar Navigation Template, in Theme Editor, allows you to display the logo in the top bar of your Portal. Paste the below code in your theme editor navigation menu in order to display your logo in the navigation bar.

<vdz-top-bar-nav show-portal-logo="true">
</vdz-top-bar-nav>

Hiding or Rearranging Widgets

VIDIZMO offers flexibility and customization in Widgets which is loved by our customers. VIDIZMO makes it very easy to show, hide, or reposition any widget on the Portal Homepage or Category page.  

• To hide any widget, simply comment out the code of that widget using <!-- widget code here -->. For instance to hide Tag Cloud comment the code of that widget as shown below.

<!--Example of code which is not commented-->
<vdz-enterprise-tag-cloud-filter></vdz-enterprise-tag-cloud-filter>

<!--Example of commented code-->
<!--<vdz-enterprise-tag-cloud-filter></vdz-enterprise-tag-cloud-filter>-->

• The position of a widget can be controlled by the placement of the widget code in the Theme Editor. To understand how it works, let's take the example of the Most Recent Presentations section which is available under the Featured Categories section on the Portal Homepage. If you want to move this section to the bottom of the Portal Homepage then all you need to do is;

i. Copy the Most Popular Media widget code from the Theme Editor and comment it out.

ii. Next, paste that copied code at the end of Theme Editor.

iii. Click on the Update & Save button. 

Note: It is recommended that you preview all changes before you click on the Update & Save by clicking on the Preview button.

Read Next

• How to Upload Homepage Banner
• How to Feature Media on Homepage
• How to Feature Media on Homepage
• How to Configure and Use Enterprise Tags