none
Finding problem in new visio javacsript API for Visio. RRS feed

  • Question

  • Hi peeps



    Earlier I was using visio web access service in order to display the visio diagram. Found that its very slow on rendering the diagram. So we decided to use newly released api for visio functionality. While using web access service they had provided a event called 'OnDiagramComplete' which I used to perform my reading shapedata functionality on that perticular event.

    Now in the new api I am not getting any event called diagramComplete. Since All the api are asynchronous call shapeData reading method is getting called before initialization(between developer frame and visioOnline) happens. I can achieve my target by blocking thread for some secs but which will reduce the performance. Can any one tell me is there any way I can find odiagram complete event or how can I know when the initialization completes when it is a async call in new javascript api.



    Any suggestion would greatly appreciated.Please Let me know if u need more information.

    Iam using below code.

    <script src='https://visioonlineapi.azurewebsites.net/visio.js' type='text/javascript'></script>
    
    Enter Visio File Url:<br/>
    <script language="javascript">
    document.write("<input type='text' id='fileUrl' size='120'/>");
    document.write("<input type='button' value='InitEmbeddedFrame' onclick='initEmbeddedFrame()' />");
    document.write("<br />");
    document.write("<input type='button' value='pagedatas' onclick='getpagedata()' />");
    document.write("<textarea id='ResultOutput' style='width:350px;height:60px'> </textarea>");
    document.write("<div id='iframeHost' />");
    
    var textArea;
    // Loads the Visio application and Initializes communication between devloper frame and Visio online frame
    function initEmbeddedFrame() {
            textArea = document.getElementById('ResultOutput');
        var url = document.getElementById('fileUrl').value;
        if (!url) {
            window.alert("File URL should not be empty");
        }
        // APIs are enabled for EmbedView action only.   
        url = url.replace("action=view","action=embedview");
        url = url.replace("action=interactivepreview","action=embedview");
      
           var session = new OfficeExtension.EmbeddedSession(url, { id: "embed-iframe",container: document.getElementById("iframeHost") });
           return session.init().then(function () {
            // Initilization is successful 
            textArea.value  = "Initilization is successful";
            OfficeExtension.ClientRequestContext._overrideSession = session;
        });
         }
    
    // Code for getting selected Shape Text using the shapes collection object
    function getpagedata() {
        Visio.run(function (ctx) {  
           var page = ctx.document.getActivePage();
           var shapes = page.shapes;
           shapes.load();
               return ctx.sync().then(function () {
                   textArea.value = "Please select a Shape in the Diagram";
                   for(var i=0; i<shapes.items.length;i++)
                {
                  var shape = shapes.items[i];
                      if ( shape.select == true)
                   {
                    textArea.value = shape.text;
                        return;
                       }
                }
          });
         }).catch(function(error) {
            textArea.value = "Error: ";
            if (error instanceof OfficeExtension.Error) {
                textArea.value += "Debug info: " + JSON.stringify(error.debugInfo);
            }
        });
    }
    </script>

    Getpagedata method is working fine on click of button. same will not work on pageload only.

    please help

    Thursday, April 13, 2017 5:19 AM

All replies

  • Use onPageLoadComplete method instead to see what happens.

    https://dev.office.com/reference/add-ins/visio/pageloadcompleteeventargs

    Friday, April 14, 2017 9:17 AM
  • Hi zst56

    I exactly tried as you said. I used pageloadcomplete event which is also getting called asynchronously. That means before initialization happens between developer frame and visio online frame onPageLoadComplete is getting called. There for api will not be able to resolve the promise. But if I call the same method after some time duration using setTimeOut method will be perfectly working. I feel this method will not wait until page loads completely. The code I wrote on document ready is shown below.

    $(document).ready(function(){
    		
    		
    		initEmbeddedFrame();
    		
    		pageloadevent();
    	
      
    });
    
    
    function initEmbeddedFrame() {
    	//ShapeDataInsertToDB();
    	
          textArea = document.getElementById('ResultOutput');
        var url=File_RedirectionURL;
        if (!url) {
            window.alert("File URL should not be empty");
        }
        // APIs are enabled for EmbedView action only.   
        url = url.replace("action=view","action=embedview");
        url = url.replace("action=interactivepreview","action=embedview");
    	url = url.replace("action=default","action=embedview");
    
      
            session = new OfficeExtension.EmbeddedSession(url, { id: "embed-iframe",container: document.getElementById("iframeHost") });
    
           return session.init().then(function () {
            //Initilization is successful 
          // textArea.value  = "Initilization is successful";
           debugger;
            OfficeExtension.ClientRequestContext._overrideSession = session;	
    		
        });
    	
    
    
    }	
    
    function pageloadevent()
    {
    	Visio.run(function (ctx) { 
      var document1= ctx.document;
                   var page = document1.getActivePage();
                eventResult1 = document1.onPageLoadComplete.add(
                function (args){
                      alert("Page name: "+args.pageName);
                });
    
        return ctx.sync().then(function () {
         alert("page load event Success");
            });
    }).catch(function(error) {
           alert("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
    });
    
    }

    Error that I am getting on calling pageloadevent is

    TypeError: Cannot read property 'executeRichApiRequestAsync' of undefined↵    at https://visioonlineapi.azurewebsites.net/visio.js:3042:32↵    at Promise (<anonymous>)↵    at OfficeJsRequestExecutor.executeAsync (https://visioonlineapi.azurewebsites.net/visio.js:3041:20)↵    at RequestContext.ClientRequestContext.syncPrivate (https://visioonlineapi.azurewebsites.net/visio.js:1604:36)↵    at https://visioonlineapi.azurewebsites.net/visio.js:1572:30"

    This is the error I am getting.Any method if I call before initialization throws the same error.  

    Monday, April 17, 2017 9:33 AM