Previewing PDF and video content in widgets | Zoho Creator Academy

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.
NotesNote: 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.
Notes
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.
NotesNote: 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.
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.
  1. input.report_name = "Course_Management"; // Report link name of the 'Course Management' form's report.
  2. //The title and tagline below are for display purposes only. They do not affect the widget’s functionality and can be fully customized.
  3. input.title = "Course Management";
  4. 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

  1. Ensure that the report link name used in the script exactly match those defined in your application.
  2. Make sure the field names and types match exactly as specified in this tutorial.