Previewing PDF and video content in widgets
Requirement
Display video and PDF content from a report directly on a page using a custom widget. The widget retrieves media files from reports, such as video and file upload fields that store uploaded resources, and displays them on the page for easy access.
Usecase
An educational institution wants to make its course materials easily accessible to students. We’ve created a widget that fetches files and videos, and enables users to preview them directly on a page. It is linked to the form where instructors add their course details along with study materials. Using this widget, instructors can embed recorded lectures (videos) and course textbooks (PDFs) from forms onto a single page. This allows students to conveniently view all the required resources in one place.
Steps to follow
Create the Form
1. Create a form named Course Management to store course-related information and learning materials.
Form Name | Form Link Name |
Course Management | Course_Management |
2. Add the fields below to the Course Management form and name the fields accordingly.
Note: To make the Instructors field a lookup, create a separate form that includes a field with the link name Instructor, along with any additional instructor details you wish to collect. The First Name from that form can then be mapped as the lookup value in this form.Field Type | Field Name | Field Link Name |
Single Line | Course Title | Course_Title |
Lookup | Instructor | Instructor |
Drop-Down | Duration | Duration |
Drop-Down | Difficulty | Difficulty |
Multi-Line | Description | Description |
Image | Thumbnail | Thumbnail |
Video | Class Recording | Class_Recording |
File upload | Textbook | Textbook |
Create the Page
1. Create a page named Course Dashboard.
2. Click Widgets in the left pane of page builder and navigate to Custom and select Create Widget. Select Upload File.
Note: Alternatively, you can navigate to the Settings of your Creator application, click Widgets and select Create.
Add a Widget
Now it is time to upload the widget needed for this tutorial.
This tutorial is designed to work with the sample widget file we have provided below. It contains a widget that displays course information.
Note: You can also upload any widget of your choice for your business use case. However, if you want to try the tutorial as-is, use the sample ZIP file provided at the end of this page.1. Enter a name for the widget. The hosting option will be preselected as Internal; This procedure applies to widgets hosted within Creator. Although widgets can also be hosted externally and linked to Creator, retain the Internal option since the tutorial uses it.
2. Specify the index path as /widget.html, and click Create.
3. Drag and drop, or double-click the widget to add it to the page. Once added, the widget functions as a placeholder in the page without any content to display. Next, we will see how to connect this widget to the report you added.
Link the Widget to the Report
1. Navigate to the page variables by selecting Page Variable and the Scripts icon (
) at the top-right corner. Add the following variables to map them to the widget.
Variable | Data Type | Reason for Requirement |
report_name | TEXT | Identifies the report that will serve as the data source for this widget, ensuring it pulls the correct course details. |
title | TEXT | Provides the main heading for the widget, making it visually appealing while conveying key information about the institution to students. |
tag_line | TEXT | Adds a short, informative line that gives students additional context about the institution. |
2. Navigate to Script next to Variables and configure the Page Script by adding the following script to the editor to map the page variables with the report.
- input.report_name = "Course_Management"; // Report link name of the 'Course Management' form's report.
- //The title and tagline below are for display purposes only. They do not affect the widget’s functionality and can be fully customized.
- input.title = "Course Management";
- input.tag_line = "Manage courses, modules, and resources efficiently.";
The widget is now ready for use. All records added to the mapped form will be displayed on the page through the widget.
See how it works
Points to note
- Ensure that the report link name used in the script exactly match those defined in your application.
- Make sure the field names and types match exactly as specified in this tutorial.
Access your files securely from anywhere
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho Writer?
Create. Review. Publish.
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Understand preview of file in list report
The File Preview feature enables you to view files in a report before downloading them. You will be able view the file in a preview window. Previewing will be applicable to fields that capture files: this includes file upload, image, audio, and video ...Understanding the file upload field
The file upload field enables your users to upload files while submitting their data through your forms. This field can be configured to support either single or multiple file uploads. When multiple uploads are enabled, the admin/developer can also ...Understanding reports in a page
Embedding reports inside the page makes it easier for the user to monitor and analyze their business data and derive meaningful insights straight from the dashboard. It saves the effort of having to leave the page, navigate to a report from the same ...Understand reports
Note: To optimize efficiency and security, support for XLS format has been deprecated, and instead, the XLSX format will be supported with effect from 21-March-2024. We insist you to replace any instance of .xls to .xlsx across Deluge scripts in your ...Upload media
This API service lets you manage the different functionalities in a form. Upload media Methods upload(media:withFileName:for:form:completionHandler:)This uploads files entered in the file upload, audio, video, and image fields in the form. This has ...
New to Zoho LandingPage?
Zoho LandingPage Resources