In Zoho Reports you can easily embed any view (reports, tables & dashboards) you create into a website, web application, blog or an intranet page. Zoho Reports allows you to embed views with private access with/without login or with public access. Users visiting the website or blog will be able to see the latest live version of the view and any changes you make to the view or the underlying data will be reflected in the embedded version of the view automatically.
You can embed any type of view that you have created in Zoho Reports including Tables, Query tables, Charts, Pivot tables, Summary views, Tabular views and Dashboards. To embed any view into your Web page, Zoho Reports generates a HTML code snippet (containing an iframe HTML element), which should be included into your Web page HTML content (within the <body> </body> tags) at the appropriate position. On including this code snippet, whenever the Web page is loaded in a browser, the embedded view(s) from Zoho Reports will also get loaded.
By default, all views created in Zoho Reports are private. Only users to whom the view has been shared (For more information on how to share reports to users, Refer to the topic Sharing and Collaboration) can see the embedded view when they visit the web page. Shared user has to login into Zoho Reports when the embedded iframe in the web page prompts for login. If the user has already logged into Zoho Reports (in the same browser), then it will not prompt for login.
In case you do not want the users to be logged into Zoho Reports, while accessing the Web page, then you need to generate the embed HTML code snippet with the setting Access Without Login or make the view Public.
We will discuss about the various access models for each view type in the following sections.
Zoho Reports supports embedding chart as an image or as an interactive chart into your web pages. With this you will be able to embed your charts with interactive options as you have within the Zoho Reports service such as toolbar menu, user filters, mouse over effects. Depending on the option selected the Embed chart option HTML code snippet (which links directly to your report) will generated and that can be embedded into your web page.
When you embed a chart in interactive mode in a web page, then users visiting the web page can view and interact with the chart as you could do when you view the chart within the Zoho Reports user interface. The following interactions are possible when a chart is embedded in interactive mode:
When you embed a chart as an image, the chart will be generated as a static image and thus the web page will get loaded faster.
The following are the three access models that you can choose while embedding your chart for both Interactive and Image mode.
When you embed your chart in a web page, by default it will be set to embed with Private Access with Login setting to provide highest level of security to your chart. In this access mode you have to share the chart to your users and those shared users will be able to access the embedded chart, on successful login. Any other users to whom you have not shared the view or public users will not be able to access the embedded chart.
You can embed the charts with Private Access with Login setting by following the steps below:
Once the <iframe> code is pasted into HTML source code of your web page/blog, when a user visits the web page it will prompt for login details as shown below, in case the user has not logged in already into Zoho Reports. On successful login they will be able to access the chart.
In case you want to embed a chart into a private web page, like an intranet web page of a company that only employees can see, and do not want them to login into Zoho Reports every time they visit the web page, then you have to embed the chart with private Access without Login setting. You can embed the chart either as an interactive chart or as an image in this model. When this setting is selected Zoho Reports will generate a embed URL (within an iframe code) which will contain a big randomly generated private key (private link), making them secure and very hard (if not impossible) to guess.
To embed a chart with private access without login:
In case you want your embedded chart to be accessible to all the users who visits your web page and do not require the random key based link generation (as in Private access without login option), then you have to embed your chart with Public Access setting.
You can edit permissions of the embedded chart anytime you want. Refer to the Editing Permissions of Embedded Views section to know how to edit permissions of a embedded view.
Zoho Reports supports embedding view (Table, Query Table, Pivot Table, Summary View and Tabular View) created in Zoho Reports into your web pages. To embed a view created in Zoho Reports, you need to get the corresponding HTML code snippet generated by Zoho Reports and embed the same into the appropriate position in your web page.
Following are the three access models that you can choose while embedding your view (similar to embed options provided for the Charts discussed in the previous section):
When you embed the view with Private Access with Login, then it would prompt for the users to login with Zoho Reports login ID to access the embedded view. Also, only users to whom you have shared the view (Using the Share option) would be able to access the embedded view, on successful login. This is the most secure way of embedding a view.
The following steps illustrates how to embed a table created in Zoho Reports into a web page
|Width||Allows you to set the width of the embedded view.||Applicable for Tables, Query Tables, Pivots, Summary and Tabular views.|
|Height||Allows you to set the height of the embedded view.||Applicable for Tables, Query Tables, Pivots, Summary and Tabular views.|
|Theme||Allows you to set the theme of the embedded view.||Applicable for Tables, Query Tables, Pivots, Summary and Tabular views.|
|Auto Refresh Every N Seconds||Allows you to automatically refresh your view at a set interval to display latest data.||Applicable for Tables, Query Tables, Pivots, Summary and Tabular views.|
|Data Type Symbol||Provides the data type symbol of the corresponding column in the header, when you embed a view. |
Symbols used e.g.:- for text data type, for date etc.
|Applicable for Tables, Query Tables and Tabular views.|
|Toolbar||Provides a toolbar of the corresponding view at the top, when embedded.||Applicable for Tables, Query Tables, Pivots, Summary and Tabular views.|
|Search Box|| |
Provides a search box at the top of the view.
When you check the Toolbar option, this option becomes inactive.
|Applicable only for Tables.|
|Column Chooser||Provides an option to show or hide columns from the view||Applicable for Table, Tabular view and Query Table,|
|Title||Provides title of the View||Pivot and Summary views.|
|Description>||Provides a brief description of the view||Applicable for Pivot and Summary views.|
|Specify Filter Criteria||Allows you to filter the data by specifying a filter criteria.||Applicable for Tables, Query Tables, Pivots, Summary and Tabular views.|
Once the <iframe> code is pasted into HTML source code of your web page/blog, when a user visits the web page it will prompt for login details as shown below, in case the user has not logged in already into Zoho Reports.
On successful login they will be able to access the view.
In case you do not want all your users to login to Zoho Reports, but still want to share the view securely, then you can embed the view into a private web page with Private Access without Login. When this option is selected a HTML code snippet with a big randomly generated, hard to guess private key (private link) will be generated which you can embed in your web page.
To embed a table with private access without login, follow the steps given below:
After embedding with private access without login, the embedded table is displayed as shown below when a user visits the web page (without prompting for login).
In case you want your embedded view to be accessible to all the users who visits your web page, you have to embed your view with Public Access setting. To embed a table with public access, do the following:
You can edit permissions of the embedded view anytime you want. Refer to the Editing Permissions of Embedded Views section to know how to edit permissions of a embedded view.
Zoho Reports provides support to embed a live dashboard into a web page and thus enables you to display multiple reports for quick and easy data analysis / visualization. You can embed a dashboard similarly as you embed other views.
The following are the three access models that you can choose from while embedding your chart (similar to embed options provided for the Charts discussed in the previous section):
You can embed the dashboard following the same steps as described for other view types in the previous sections. To embed a dashboard, you need to get a HTML code snippet, which links directly to your dashboard. You can do that as follows:
Once the <iframe> code is pasted into HTML source code of your web page/blog, when a user visits the web page it will prompt for login details as shown below, in case the user has not logged in already into Zoho Reports. On successful login they will be able to access the dashboard.
Dashboard can be embedded with Private access without Login setting in much the same way as other views discussed in the previous sections. To embed a dashboard with private access without login, follow the given steps below:
If you want your embedded your dashboard to be accessible to all the users who visits your web page, you have to embed your dashboard with Public Access setting.
You can edit permissions of the embedded dashboard anytime you want. Refer to the Editing Permissions of Embedded Views section to know how to edit permissions of a embedded view.
If you want to edit previously granted permissions provided for the embedded view (Table, Charts, Query Table, Pivot, Summary, Tabular views and Dashboard) or to completely remove access to the private or public user, do the following.
You can grant or remove permissions for the selected view by selecting/deselecting the corresponding check box in the Edit Permission dialog box. Click OK and then Close to complete the process. If you want to remove access to the private/public or shared users, click on the corresponding Remove link adjacent to each shared member and then click Close.
Zoho Reports offers a powerful feature of applying dynamic filters when you embed any view into your Web page. These filters get applied on the fly over the data displayed as part of the view, when users access them in the embedded web page. Using this feature, you can embed the same view in different web pages applying different set of filter criteria, to suit the allowed permission, context and profile of the user who is viewing the page. For example, an embedded sales report can have a 'Region' based criteria in each page that it's embedded, creating a scenario such that, when a sales person from say Region East views his/her accessible page, will only see the Sales from that region in the report embedded. A similar setup can be applied for sales person from other regions.
Filters can be applied by passing the required filter criteria to the parameter named ZOHO_CRITERIA and appending it as part of the Embed URL present in the HTML <iframe> code snippet. The embedded view's data is filtered and displayed based on the criteria specified, whenever the web page is loaded in the browser.
The generated HTML code snippet for embedding your view with the <iframe> tag would look like something given below (the following code snippet is for a Table):
The above snippet displays a Sales table when embedded in a web page. To limit the view to just show the Sales in the South Region, add the parameter &ZOHO_CRITERIA=("Region" = 'South') to the <iframe> code snippet. In this parameter Region is the column name in the view, which is filtered to display values matching the region South. The parameter should also be encoded. The encoded value will look like &ZOHO_CRITERIA="Region"='South'. The complete code snippet with this parameter is given below:
When you embed the above code snippet into a web page, the table view displayed will contain only the values matching the Region South.
The filter criteria that is passed follows the same format as that of the SQL SELECT Query's WHERE clause. You can also use SQL in-built functions as part of the criteria. These built-in functions should be the functions supported by any of Oracle, MS SQL Server, MySQL, DB2, Sybase, ANSI SQL, Informix and PostgreSQL databases.
The generalized format of simple criteria is given below.
|ZOHO_CRITERIA="(<column name/SQL expression/SQL function calls> <relational operator> <value/column name/SQL expression/SQL function calls>)"|
|column name||Refers to the name of the column on which you are applying the criteria|
|SQL Expression|| |
Any valid SQL Expression.
Supported Arithmetic Operators are: +, -, *, /
|SQL Function call||Oracle, MS SQL Server, MySQL, DB2, Sybase, ANSI SQL, Informix and PostgreSQL databases in-built standard functions |
Eg.: year(date_column) = 2008
|relational operator||Any relational operator to compare values supported in an SQL SELECT Query WHERE clause>. The following operators can be used: |
|Value||Refers to the exact value to match |
Eg.: "Department" = 'Finance"
here 'Finance' is a literal value to match.
You can also define filters containing multiple columns as the example given below
((Region='South' AND "Sales" < 10000) OR ("Region='West' AND "Sales" < 10000))
Notes for Criteria formation:
Refer to the SQL SELECT WHERE clause documentation to know more on how to construct the filter criteria.