Home  »  Publishing Options »  Embedding in Web Pages Reports

Embedding in Web Pages Reports

Tags:  

Embedding Views in Web Pages, Web Applications and Blogs





Embedding Views - Introduction

In Zoho Reports you can easily embed any view (reports, tables & dashboards) you create in to 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. We will discuss about how to embed each of these view types in the following sections.

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. These procedures are discussed in the sections given below.


Embedding Tables, Query Tables, Pivots, Summary and Tabular Views

To embed a Table, Query Table, Pivot Table, Summary View or Tabular View created in Zoho Reports you need to get the corresponding HTML code snippet (which links directly to your report) 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.

  • Embedding with Private Access with Login
  • Embedding with Private Access without Login
  • Embedding with Public Access

Embedding with Private Access with Login

When you embed your view in a web page it is embedded with Private Access with Login setting by default to provide highest level of security to your views. In this access mode you have to share your view to your users and those shared users must login to their Zoho accounts to access the corresponding view. Any other users to whom you have not shared the view or public users will not be able to access the embedded view.

The following steps illustrates how to embed a Table created in Zoho Reports into a web page

  • From the Explorer tab, open the corresponding report in the reporting database that you want to embed and invoke Publish -> Embed in Website or Blog option in the toolbar. In this example we are using a table. A dialog box opens as shown below.


  • Edit Width and Height values to make the embed report size fit to your needs. Using Theme option, select theme color for the report that is to be embedded.
  • Select the required options provided for the view.

    The following table describes various options available for different types of views.

  • OPTION
    DESCRIPTION APPLICABLE TO
    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 Charts, 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.
    Title
    Provides title of the View
    Applicable for Charts, Pivot and Summary views.
    Description Provides a brief description of the view Applicable for Charts, Pivot and Summary views.

  • HTML code snippet generated and displayed in the text area will be updated based on the values that you choose.
  • Copy the HTML <iframe> code displayed in the text area and paste it in to the corresponding HTML source code of your web page/blog into which you are embedded this view. The snippet should be included within <body> </body> tags in the web page
  • Click Close

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.

When the user logs in or has already logged into Zoho Reports, then the table will be displayed embedded in the webpage as shown below

Remember that as this table has been embedded with Private Access setting (default), only users to whom the table has been shared can access embedded table when they visit the web page (after logging into Zoho Reports). Next section talks about embedding a view with Private Access without login.


Embedding with Private access without Login

In case you want to embed a view 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 view with private Access without Login setting enabled in the embed dialog. 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 table with private access without login, follow the steps given below:

  • Open the table of the reporting database that you want to embed and Invoke Publish -> Embed in Website or Blog option in the toolbar. A dialog box appears as shown below.


  • Select Click Here link provided as part of the bulleted text "To access this view/table without login, Click Here" at the top.


  • Select/Edit the required options in the dialog box. For details about these options, refer to the Embedding with Private Access with Login section.
  • If you want to edit the permissions to be granted to this view, then click Editing Private Link Permissions link. A dialog box appears as shown below:


  • Grant or remove Read/Export permissions for the selected table by selecting/deselecting the corresponding check boxes and then click OK. An alternative way to change permissions is described under the topic Editing Permissions of Embedded Views section.
  • Copy the HTML <iframe> code displayed in the text area and paste it into the corresponding HTML source code of your web page/blog into which you are embedded this view. The snippet should be included within <body> </body> tags in the web page.
  • Click Close.

Note:

You can regenerate the random key, if you want to make the previously published link invalid for security reasons. To regenerate the random key, select Regenerate Random Key link at the bottom of the embed dialog box. You have to use the newly generated embedded code, if you want to continue your existing users to access the view without logging in.

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

Embedding with Public Access

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:

  • Make the table public. Refer to the topic Making Views/Database Public to know about how to make a report public and grant the required permissions.
  • Invoke Publish -> Embed in Website or Blog option in the tool bar. A dialog box appears as shown below.


  • Select the required view customization options. For details about these options, refer to the Embedding with Private Access with Login section.
  • Copy the HTML <iframe> code displayed in the text area and paste it into the corresponding HTML source code of your web page/blog. The snippet should be included within <body> </body> tags in the web page.
  • Click Close.

Editing Permissions of Embedded Views

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.

Embedding Charts

Zoho Reports provides you the option to embed a chart as an image or as an interactive chart in to your web pages. Depending on the option selected the Embed chart option will generate the appropriate HTML code snippet dynamically that can be embedded into your web page.

When you embed a chart as an image in a web page, the chart will be generated as a static image on the fly when the web page gets loaded. Also as it's an image the user will not be able to interact with the chart. When you embed as an interactive chart in a web page, then users visiting the web page can view and interact with the chart as they would do when viewing the chart within the Zoho Reports user interface.

The following are the three access models that you can choose from while embedding your chart (similar to embed options provided for the views discussed in the previous section):

  • Embedding with Private Access with Login
  • Embedding with Private Access without Login
  • Embedding with Public Access

Embedding Chart with Private Access with Login

When you embed the Chart 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 chart.

You can embed the charts with Private Access with Login setting by following the steps below:

  • From Explorer tab, open the chart that you want to embed and invoke Publish -> Embed in Website or Blog option in the toolbar. The Embed Snippet dialog box will open.


  • Edit the width and height values to generate the embed iframe to fit the chart in the web page according to your sizing needs.
  • Select the required legend position in the chart from the drop-down list under Legend Position option. The possible options are:
    • Right - Places the legend to the right side of the chart
    • Left - Places the legend to the left side of the chart.
    • Top-Left - Places the legend to the top left of the chart below the title.
    • Top-Center - Places the legend to the top center of the chart below the title.
    • Top-Right - Places the legend to the top right of the chart below the title.
    • Bottom-Left - Places the legend to the bottom left corner of the chart.
    • Bottom-Center - Places the legend to the bottom center of the chart
    • Bottom - Right - Places the legend to the bottom right corner of the chart.
  • Select a theme from the drop down menu under Theme option. The selected theme will be applied only when you have the Toolbar (next option discussed) included.
  • Select Toolbar, if you want to include the chart toolbar when embedded.

Once you have selected the required option, you can choose whether the chart should be interactive when embedded or just an image. The options are discussed below.

Embedding as an Interactive Chart:

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:

  • Mouse over the chart for tooltips & highlights.
  • Click on any data point in the chart to view the underlying data (drill down).
  • You can also include the chart toolbar in your embedded chart to enable users to change the chart type.
  • Apply User Filters, if the chart contains user filters
  • Interact with legend for mouse over effects and chart filtering based on values listed in the legend.

To embed as an interactive chart:

  • Select Embed as Interactive Chart option in the embed dialog box (refer image above). Once you select this, dialog box presents you with a few more options to customize the report.
  • Select Toolbar option, to include chart's toolbar in the embedding iframe.
  • Select Title and Description options if you want to display the chart with the corresponding title and description.
  • Copy the HTML <iframe> code displayed in the text area and paste it into the corresponding HTML source code of your web page/blog. The snippet should be included/pasted within <body> </body> tags in the web page.


Embedding as an Image:

To embed your chart as a static image without interactivity, follow the steps below:

  • Select Embed as Image option in the embed dialog box.
  • Select Title and Description options to provide title and description of the chart in the embedding iframe.
  • Copy the random key based code and paste it into the source code of your web page.

Embedding Chart with Private Access without Login

In case you do not want all your users to login to Zoho Reports, but still want to share the chart securely, then you can embed the Chart into a private web page with Private Access with Login. You can embed the charts either as an interactive chart or as an image in this model. When this option is selected a HTML code snippet with a big randomly generated, hard to guess private key (private link) will be generated.

To embed a chart with private access without login:

  • Open the chart you want to embed and then click Publish > Embed in Website or Blog option in the toolbar. The Embed Snippet dialog box will open.



  • Select Click Here link provided as part of the bulleted text To access this view/table without login, Click Here at the top.




  • Customize the setting in the dialog to generate the embed iframe as per your requirement. For more details about the setting refer to Embedding Chart with Private Access with Login section.
  • If you want to edit the permissions to be granted to this view, then click Editing Private Link Permissions link. The Edit Permissions for the selected tables/report dialog box will open.

  • Grant permissions you want to give for the chart. An alternative way to change permissions is described in the Editing Permissions of Embedded Views topic.
  • Copy the HTML <iframe> code displayed in the text area and paste it in to the corresponding HTML source code of your web page/blog into which you are embedded this view. The snippet should be included within <body> </body> tags in the web page.
  • Click Close.

Note:

You can regenerate the random key, if you want to make the previously published link invalid for security reasons. To regenerate the random key, select Regenerate Random Key link at the bottom of the embed dialog box. You have to use the newly generated embedded code, if you want to continue your existing users to access the view without logging in.

Embedding Chart with Public Access

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.

  • Make the chart that you want to embed public. Refer to the topic Making Views/Database Public for information on how to make a report or dashboard public and to grant the required permissions.
  • Invoke Publish -> Embed in Website or Blog option in the toolbar. A dialog box appears as shown below:


  • Select the required view customization options. For more details about the setting refer to Embedding Chart with Private Access with Login section.
  • Copy the HTML <iframe> code displayed in the text area and paste it into the corresponding HTML source code of your web page/blog. The snippet should be included within <body> </body> tags in the web page.

Editing Permissions of Embedded Charts

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.

Embedding Dashboards

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 views discussed in the previous section):

  • Embedding with Private Access with Login
  • Embedding with Private Access without Login
  • Embedding with Public Access

Embedding Dashboard with Private Access with Login

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:

  • From the Explorer tab, open the dashboard that you want to embed and invoke Publish -> Embed in Website or Blog option in the toolbar. A dialog box appears as shown below.


  • Edit the width and height values to generate the embed iframe to fit the dashboard into your web page according to your sizing needs.
  • Select a theme color from the drop down menu under Theme option.
  • Copy the <iframe> code and paste it in to the source code of your web page. The snippet should be included/pasted within <body> </body> tags in the web page.
  • Click Close.

By default when you embed a dashboard it is embedded in a private access mode, where the user who visits the web page (in which the dashboard is embedded) should log into Zoho Reports to view the embedded dashboard. Using other access modes are described below.

Embedding Dashboard with Private Access without Login

Dashboard can be embedded with Private access without Login setting in much the same way as other views discussed in the previous sections. You can find more detailed steps (including screen-shots) under Embedding with Private Access without Login section. To embed a dashboard with private access without login, follow the given steps below:

  • Open the dashboard of the reporting database that you want to embed and Invoke Publish -> Embed in Website or Blog.


  • Select Click Here link provided as part of the bulleted text To access this view/table without login, Click Here at the top.


  • Edit the width and height values to generate the embed iframe to fit the dashboard into your web page according to your sizing needs.
  • Select a theme color from the drop down menu under Theme option.
  • Copy the HTML <iframe> code displayed in the text area and paste it into the corresponding HTML source code of your web page/blog. The snippet should be included within <body> </body> tags in the web page.
  • Click Close.

Embedding Dashboard with Public Access

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.

  • Make the dashboard that you want to embed public. Refer to the topic Making Views/Database Public for information on how to make a report or dashboard public and to grant the required permissions.
  • Invoke Publish -> Embed in Website or Blog option in the toolbar. A dialog box appears as shown below:


  • Edit the width and height values to generate the embed iframe to fit the dashboard into your web page according to your sizing needs.
  • Select a theme color from the drop down menu under Theme option.
  • Copy the HTML <iframe> code displayed in the text area and paste it into the corresponding HTML source code of your web page/blog. The snippet should be included within <body> </body> tags in the web page.
  • Click Close.

Editing Permissions of Embedded Dashboard

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.

Editing Permissions of Embedded Views

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.

  • Open the corresponding view that has been embedded and invoke the Share ->Edit Existing Shared Details in the toolbar. A dialog will come up as shown below:


  • To edit permissions of a view embedded using private link (private embed without login, click Edit Permission link next to Private Link
  • To edit permissions granted for an embedded view to an individual users (i.e. through private embed with login) click on the Edit Permission link adjacent to the corresponding user name. 
  • To edit permissions granted for an embedded view with public access, click Edit Permission link next to Public Visitor. A dialog will come up as shown below:


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.

Applying Filters on Embedded Views

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.

Example:

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

<iframe frameborder=0 width='400' height='300' src='http://reports.zoho.com/ZDBDataSheetView.cc?OBJID=19601000000386026&STANDALONE=true&WIDTH=400&HEIGHT=300&ZDB_THEME_NAME=blue&DATATYPESYMBOL=false&REMTOOLBAR=true&SEARCHBOX=true'></iframe>

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:

<iframe frameborder=0 width='400' height='300' src='http://reports.zoho.com/ZDBDataSheetView.cc?OBJID=19601000000386026&ZOHO_CRITERIA="Region"='South'&STANDALONE=true&ZDB_THEME_NAME=blue&DATATYPESYMBOL=false&REMTOOLBAR=true&SEARCHBOX=true'></iframe>

When you embed the above code snippet into a web page, the table view displayed will contain only the values matching the Region South.



Filter Criteria Format

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

Description:
column name Refers to the name of the column on which you are applying the criteria
SQL Expression

Any valid SQL Expression.

Eg: "Sales"-"Cost">1000

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:
  • =
  • !=
  • <
  • >
  • <=
  • >=
  • LIKE
  • NOT LIKE
  • IN
  • NOT IN
  • BETWEEN
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<.p>

((Region='South' AND "Sales" < 10000) OR ("Region='West' AND "Sales" < 10000))

Notes for Criteria formation:
 

  • You can combine any number of criteria defined in the above specified format using Logical Operators like AND and OR to form complex criteria, the same way as in SQL SELECT WHERE clause. Also use Braces '()' to group the criteria for ordering.
  • Enclose string literals (i.e. values) in single quotes.
  • Enclose column names in double quotes.
    • Eg.: ("Date Of Birth" = '2007-01-31 00:00:00')
  • Currency symbols (or) percent symbol can't be used in criteria
    • Eg.: currency_column = 75.66 is valid
    • Eg.: percent_column = 100 is valid
    • currency_column = 75.66$ (or) percent_column = 100% is not valid

Refer to the SQL SELECT WHERE clause documentation to know more on how to construct the filter criteria.

Related Topics: Sharing Views to a User, Sharing Views to a Group, Accessing Shared Views, Making Views/Database Public
Previous: Publishing Options - Introduction
Next:
 
Creating URLs to Views


Post a comment

Your Name or E-mail ID (mandatory)

Note: Your comment will be published after approval of the owner.





 RSS of this page