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.

 

ComponentParameterDescription
sortType       DESCSort content in descending order
       ASC sort content in ascending order
isGlobalTRUEDisplay content from all portals
FALSEDisplay content from all current portal
showOnChannelLibraryTRUEDisplay content available in Portal Library
FALSEDo not display the content available in Portal Library
isFeaturedTRUEDisplay featured content
FALSEDo not display featured content
orderBy    WeightRanking in the featured content
UpdatedDateOrder by content update date
  PopularityOrder by content popularity
 TotalViewedOrder by total views of content
show-in-flat-viewTRUEDisplay content in a carousel
FALSEDo not display content in a carousel


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>


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>


Most Recent Media

The Most Recent Media section available on the Homepage, helps Portal users to get all the media uploaded to the portal recently at a glimpse from Portal Homepage. Use the code below to make required adjustments in the Most Recent Media section.


<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>


Most Popular Media

The Most Popular Media section available on the Homepage under the Most Recent Media, helps Portal users to get all the media which is most popular on the Portal at a glimpse from Portal Homepage. Use the code below to make required adjustments in the Most Popular Media section.


<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. 

Most Viewed Media

The Most Viewed Media section available on the Homepage under the Most Popular Media, helps Portal users to get all the media which is most viewed by the end-users at a glimpse from Portal Homepage. Use the code below to make required adjustments in the Most Viewed Media section.


<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>


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>

Featured Categories

Featured Categories appear on the Homepage of your portal. It helps your users to quickly view and navigate to the available categories. Use the code snippet below to control the placement and visibility of Featured Categories.


<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>


Category Page Widgets

Category Info and Banner

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>

To learn more about categories in VIDIZMO click here.


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>


Featured Media in Category Homepage

The Featured Media in Category Homepage similar to the Homepage can be controlled with the following code.


<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>


Most Recent Media in Category Homepage

The Most Recent Media Carousel in the Category Homepage can be controlled with the following piece of code.


<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>


Most Popular Media In Category Homepage

The following code snippet can be used to handle the customization of Most Popular Media in Category Homepage.the 


<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>


Most Viewed Media in Category Homepage

Use the code below to handle customizations in Most Viewed Media Carousel available on the Category Homepage.


<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>


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>


In VIDIZMO Portal, the sidebar navigation menu appears when an Anonymous+ user clicks on the navigation menu icon available on the top left corner of the Portal screen. This menu helps Portal users to see Portal name, logo, navigate to other Portals, view privacy policy so on and so forth. Using the Sidebar Navigation Template authorized Portal users can hide or display one or more menu components by replacing true with false or vice versa in the code snippet below.


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.