Build a Sapui5 PDF Viewer With Custom Validation Error Messages and Download PDF Button in Browser Using Vanilla Javascript Full Project For Beginners

Build a Sapui5 PDF Viewer With Custom Validation Error Messages and Download PDF Button in Browser Using Vanilla Javascript Full Project For Beginners

 

 

Welcome folks today in this blog post we will be building a Sapui5 PDF Viewer with custom validation error messages and download pdf button in vanilla javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<script id="sap-ui-bootstrap"
   type="text/javascript"
 src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
   data-sap-ui-theme="sap_goldreflection"
   data-sap-ui-libs="sap.ui.commons"></script>

<script id="myXmlView" type="ui5/xmlview">
  <mvc:View
    controllerName="gccontroller"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    height="100%">
    <ScrollContainer
        height="100%"
        width="100%"
        horizontal="true"
        vertical="true">
        <FlexBox direction="Column" renderType="Div" class="sapUiSmallMargin">
            <FlexBox>
                <Button text="Correctly Displayed" press="onCorrectPathClick"/>
                <Button text="Loading Error" press="onIncorrectPathClick"/>
            </FlexBox>
            <PDFViewer source="{/Source}" title="{/Title}" height="{/Height}">
                <layoutData>
                    <FlexItemData growFactor="1" />
                </layoutData>
            </PDFViewer>
        </FlexBox>
    </ScrollContainer>
</mvc:View>
  
</script>  

<body class="sapUiBody">
  <div id="content"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    sap.ui.getCore().attachInit(function () {

sap.ui.define([
"jquery.sap.global",
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function(jQuery, Controller, JSONModel) {
"use strict";
        return Controller.extend("gccontroller", {
            onInit: function () {
            this._sValidPath = "https://drive.google.com/file/d/0B65YI4tDP4xdQnZ4TzN2UFV0bVU/preview?usp=embed_googleplus";
        this._sInvalidPath = "https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/sample/PDFViewerEmbedded/sample_nonexisting.pdf";
        this._oModel = new JSONModel({
            Source: this._sValidPath,
            Title: "My Custom Title",
            Height: "600px"
        });
        this.getView().setModel(this._oModel);
    },

    onCorrectPathClick: function() {
        this._oModel.setProperty("/Source", this._sValidPath);
    },

    onIncorrectPathClick: function() {
        this._oModel.setProperty("/Source", this._sInvalidPath);
    }  
            
        });
    }
);




//### THE APP: place the XMLView somewhere into DOM ###
sap.ui
    .xmlview({
        viewContent: jQuery("#myXmlView").html()
    })
    .placeAt("content");
});
</script>

 

See also  Node.js Express Scrape Instagram User Profile Information Using Axios Library Full Project For Beginners

 

Now if you open the index.html file inside the browser you will see the below screenshot

 

Leave a Reply