locked
When clicked on Document it should be displayed in Content Editor Webpart or pageviewer webpart RRS feed

  • Question

  • hi,

    There is a Document Library and i want to open the documents when clicked  it should be displayed or opened in content editor or pageviewer webpart 

    below is the screenshot


    sal

    Thursday, November 16, 2017 6:54 PM

Answers

  • hi,

    Thanks for you reply.

    It is done, i used content editor webpart to achieve this. below is the script

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
    $(document).ready(function(){
           $("#myframe").attr("src","#");
     });    
            SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
                Templates: {
                    Fields: {
                        'LinkFilename': {
                            'View': function (ctx) {
                                var currentVal = '';
                                //from the context get the current item and it's value 
                                if (ctx != null && ctx.CurrentItem != null)
                                    currentVal = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    
                                var el = "<div><a class='ms-listlink ms-draggable' onclick='DocumentPreview(this);return false;' href='" + ctx.CurrentItem.FileRef + "'>" + ctx.CurrentItem.FileLeafRef + "</a></div>";
    
                                // Render the HTML5 file input in place of the OOTB
                                return el;
                            }
                        }
                    }
                }
            });
            function DocumentPreview(sender) {
                
                var source = $(sender).attr('href');
               
                  console.log(source);
                   
                   var myurl= "";
                   
                   if( source.indexOf('.pdf') >= 0){
                       console.log("This is PDF");
                        myurl="";     }
                  
                                
                             if ( source.indexOf('.xls') >= 0) { console.log("This is Excel");
                              myurl = "/_layouts/15/xlviewer.aspx?id=";}
               
                    
                  if ( source.indexOf('.docx') >= 0) { console.log("This is Word");
                              myurl = "";
                              source = "";}
                
                
               
                           
                
           $("#myframe").attr("src",myurl + source);
    
            }
        </script> 
    <iframe width="600" height="800" id="myframe" src="#"></iframe>

    I am not able to open the word document in browser because i didnt configure OWA

    Once it is configured it will be working fine and i just need to update some lines in scripts.

    Thanks


    sal

    • Proposed as answer by Dean_Wang Thursday, November 23, 2017 1:35 AM
    • Marked as answer by SB Ali Thursday, December 7, 2017 10:37 AM
    Wednesday, November 22, 2017 11:28 AM

All replies

  • Hi,

    Based on your screenshot, I suppose that you are using SharePoint Online or SharePoint 2016.

    In SharePoint Online, the Office Web Apps are built in. We can open the file in browser and preview file using Office Web Apps in SharePoint Online without configuring Office Web Apps additionally. If you are in SharePoint 2016, you should configure Office Online Server (the next version of Office Web Apps Server) for opening/preview files such as Word files in browser.

    An article about how to configure Office Online Server for SharePoint 2016:

    https://technet.microsoft.com/en-us/library/ff431687%28v=office.16%29.aspx?f=255&MSPPError=-2147217396

    Then, we need to embed iframe to the page for display the document preview. Using the code to generate the path of the file with the “<site>/_layouts/15/WopiFrame.aspx?sourcedoc=” format dynamically and set it as the src of the iframe.

    Here are demos about how to add document preview into the Edit Form:

    https://social.technet.microsoft.com/Forums/sharepoint/en-US/9c30da26-549a-4efa-afa9-323778470f3d/editform-and-document-preview?forum=SP2016

    https://sharepoint.stackexchange.com/questions/152774/add-document-preview-to-document-library-form

    Best regards,

    Linda Zhang


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Friday, November 17, 2017 6:59 AM
  • hi,

    we are using SharePoint 2013 on premise


    sal

    Monday, November 20, 2017 5:25 AM
  • Hi,

    For SharePoint 2013 on-premises, you need to configure Office Web Apps to display Office files in the browser. And then use iframe to display it on the page.

    Best Regards,

    Linda Zhang


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Wednesday, November 22, 2017 9:29 AM
  • hi,

    Thanks for you reply.

    It is done, i used content editor webpart to achieve this. below is the script

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
    $(document).ready(function(){
           $("#myframe").attr("src","#");
     });    
            SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
                Templates: {
                    Fields: {
                        'LinkFilename': {
                            'View': function (ctx) {
                                var currentVal = '';
                                //from the context get the current item and it's value 
                                if (ctx != null && ctx.CurrentItem != null)
                                    currentVal = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    
                                var el = "<div><a class='ms-listlink ms-draggable' onclick='DocumentPreview(this);return false;' href='" + ctx.CurrentItem.FileRef + "'>" + ctx.CurrentItem.FileLeafRef + "</a></div>";
    
                                // Render the HTML5 file input in place of the OOTB
                                return el;
                            }
                        }
                    }
                }
            });
            function DocumentPreview(sender) {
                
                var source = $(sender).attr('href');
               
                  console.log(source);
                   
                   var myurl= "";
                   
                   if( source.indexOf('.pdf') >= 0){
                       console.log("This is PDF");
                        myurl="";     }
                  
                                
                             if ( source.indexOf('.xls') >= 0) { console.log("This is Excel");
                              myurl = "/_layouts/15/xlviewer.aspx?id=";}
               
                    
                  if ( source.indexOf('.docx') >= 0) { console.log("This is Word");
                              myurl = "";
                              source = "";}
                
                
               
                           
                
           $("#myframe").attr("src",myurl + source);
    
            }
        </script> 
    <iframe width="600" height="800" id="myframe" src="#"></iframe>

    I am not able to open the word document in browser because i didnt configure OWA

    Once it is configured it will be working fine and i just need to update some lines in scripts.

    Thanks


    sal

    • Proposed as answer by Dean_Wang Thursday, November 23, 2017 1:35 AM
    • Marked as answer by SB Ali Thursday, December 7, 2017 10:37 AM
    Wednesday, November 22, 2017 11:28 AM
  • Hi,

    Thank you for sharing your solution here, we can learn from each other.

    If you think the reply is helpful, you can mark it as answer and it will help others who meet the same issue in this forum.

    Best Regards,

    Linda Zhang


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, November 23, 2017 1:33 AM
  • Good afternoon.

    I added your script in content editor web part is SharePoint 2019 on premise.

    It is working exactly it should be. 

    I implement custom designed master page. But the content web part displaying the master page layout.

    How can I remove the page layout from the web part ?

    Thank you very much in advance.

    Farook Golam

    Monday, August 3, 2020 4:45 PM