Forum Discussion

Rishabh Agrawal's avatar
Rishabh Agrawal
Icon for Microsoft rankMicrosoft
Nov 23, 2016

Visio Javascript API for VIsio Online

Hello,   Visio Online  is the new way to view and share Visio diagrams on the web. We are pleased to announce general availability of Visio JavaScript APIs . These APIs are the first step towards...
visio
David Sisques Daniel's avatar
David Sisques Daniel
Copper Contributor
Feb 18, 2018
In our company we have office 365 and sharepoint since August. We want to publish certain documentation in sharepoint for the knowledge of all the employees. Some of the documents are in Visio and we are using the javascript api to publish it. But we have some problem caused because we do not know and we do not find how to control the style of the iframe content. We want to remove the border, the scroll and the margins, but we do not know how or we have seen any example.
Rahul.Mittal's avatar
Rahul.Mittal
Icon for Microsoft rankMicrosoft
Feb 19, 2018

Hi David

 

It is good to hear that you want to use Visio Online APIs for publishing documents on SharePoint.  You can find more details in the API reference and some examples in this blog.

 

Regarding the issues faced, you can change the styling of the iframe by getting the iframe element through it's id and applying the properties. Something like

document.getElementById("embed-iframe").style.marginTop = "10px";
 

As scroll bars help the user in panning the diagram, you can hide the scroll bars, by disabling the pan capability by calling the below API.

document.view.disablePan = true;

 

Regards

Rahul Mittal | Microsoft Visio

  • KanchanKumbhar's avatar
    KanchanKumbhar
    Copper Contributor
    Oct 19, 2020

    Hello Rahul.Mittal ,

     

    The link you mentioned in the above post regarding API doesn't exists anymore. Could you please share the latest links of API's.

    I am very new to Visio online.

    I am using Embed web part on Modern Site to show Visio file .I need to hide the header and footer of it.

    Would you like to put some highlights on it, how can I achieve it?

     

  • Paras Dodhia's avatar
    Paras Dodhia
    Iron Contributor
    Aug 30, 2018

    Hello everyone, 

    Please refer to my blog post on embedding Visio files on a SharePoint page - hope it helps and makes life easier.

    https://blog.dodhia.co/github-update-embed-visio-files-onto-a-sharepoint-page-with-this-sharepoint-online-web-part/

    Thanks!

    Paras

  • David Sisques Daniel's avatar
    David Sisques Daniel
    Copper Contributor
    Feb 21, 2018

     

     

    Thanks for your help. But there is still some issues, i would like to remove the white margins so the image fills up the whole space, and to completely remove the iFrame´s border .

    • Rahul.Mittal's avatar
      Rahul.Mittal
      Icon for Microsoft rankMicrosoft
      Feb 24, 2018

      Hi

       

      You could try the below options to get rid of the extra space and borders.

       

      1. If your diagram canvas has white space, please use 'Fit to Drawing' option available in Visio Desktop. See attached.

      2. Use the document.view.hideDiagramBoundry = true; to hide the diagram boundary.

      3. Change the width/height of the iFrame to fit your drawing page, by using the below code during initialization:

        var session = new OfficeExtension.EmbeddedSession(

                url,

                {

                    id: "embed-iframe",

                    container: document.getElementById("iframeHost"),

                    width: "400px",

                    height: "100%"

                });

      4. There is an API under development for completely hiding the iFrame borders. application.showBorders = false;

      The API should be available by March and you could check this page for updates related to this API.

       

      Regards

      Rahul Mittal

Resources