Transform your paper forms into Digital forms usin...

srinujava · ‎2018 Aug 27

In olden days Business Data storage and reporting is completely paper-based. But Now the Business model is changing as we are using mobile devices in the workplace, from smartphones to tablets to scanners, digital forms have become vital tools for conducting modern businesses. many organizations do not consider the consequences of having paper-based forms which require manual data entry. Using paper forms is an error-prone, time consuming and outdated process. To maintain a competitive edge, global and local organizations need to transform their businesses with the best cutting-edge digital technologies to deliver agility, efficiency, cost savings and great customer service

So I came up with a solution that implementing Digital form using SAPUI5.

The following is an invoice form which is developed by using SAPUI5.

Now I will explain how I develope the above form.

Created SAPUI5 application with the name of digitalForms, the below screenshot is the project structure.

To design above form I have planned and split the entire form into small blocks(Div's) as the below screenshot.

In the above image, the Red color border represents HBOX and Orange color represents VBOX.

GRID Layout:

The responsive grid positions UI elements in a 12-column flow layout. It can be configured to display a variable number of columns depending on the available screen size. With this control, it is possible to achieve flexible layouts and line breaks for large, medium, and small-sized screens, such as desktop, tablet, and mobile.

<l:Grid defaultSpan="L4 M12 S12">



</l:Grid>

The above code tells that By default elements in the Grid are as follows. For Large screen(Laptop and Desktop) it's taking 4 column width where it 12 column width for Medium(Tab) and Small(Mobile) Devices.

HBox Layout:

HBox is a horizontal layout control where we can place controls next to each other.

VBox Layout:

VBox is a vertical layout control where we can place control one below the other in a vertical manner.

Now let's jump into Coding part.

My View design is done in digitalForm.view.xml

<mvc:View controllerName="com.controller.digitalForm" id="BolForm" xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form"

	xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns:sap.suite.ui.commons="sap.suite.ui.commons" xmlns:sap.ui.commons="sap.ui.commons"

	xmlns:semantic="sap.m.semantic" xmlns="sap.m">

	<App>

		<pages>

			<Page title="{i18n>title}">

				<content>

					<l:Grid class="printAreaBox " defaultSpan="L12 M12 S12" id="gridUKBol" vSpacing="0">

						<l:content>

							<Image class="iMage" id="chepLogo" src="">

								<layoutData>

									<l:GridData span="L4 M4 S4"/>

								</layoutData>

							</Image>

							<Label class="cOpy" id="printCopyTo" text="Driver Copy">

								<layoutData>

									<l:GridData span="L4 M4 S4"/>

								</layoutData>

							</Label>

							<Label class="proofDelivery" text="{i18n>proofofdelivery}">

								<layoutData>

									<l:GridData span="L4 M4 S4"/>

								</layoutData>

							</Label>

							<HBox class="hBoxL12">

								<VBox class="address">

									<HBox class="addressHbox" id="senderdata">

										<Label class="senderReciever bold senderWidth" text="{i18n>SENDER}">

											<layoutData>

												<l:GridData span="L1 M2 S2"/>

											</layoutData>

										</Label>

										<VBox class="labelFont">

											<Text id="senderData" text="{gridModel>/SENDER}"></Text>

											<Text class="addressValue" id="senderName" text="{gridModel>/PINCode}"></Text>

											<Text class="addressValue" id="senderIssueAddr" text="{gridModel>/Adress}"></Text>

											<Text class="addressValue" id="senderIssueState" text="{gridModel>/State}"></Text>

										</VBox>

									</HBox>

									<HBox class="send_Rec addressHbox">

										<layoutData>

											<l:GridData span="L4 M4 S4"/>

										</layoutData>

										<Text class="senderReciever bold senderWidth" text="{i18n>RECIEVER}">

											<layoutData>

												<l:GridData span="L1 M2 S2"/>

											</layoutData>

										</Text>

										<VBox class="">

											<Text class="addressValue" id="recieverName" text="{gridModel>/RecName}">

												<layoutData>

													<l:GridData span="L3 M4 S4"/>

												</layoutData>

											</Text>

											<Text class="addressValue" id="recieverAddress" text="{gridModel>/Recadd}">

												<layoutData>

													<l:GridData span="L3 M4 S4"/>

												</layoutData>

											</Text>

											<Text class="addressValue" id="recievercsz" text="{gridModel>/Reccsz}">

												<layoutData>

													<l:GridData span="L3 M4 S4"/>

												</layoutData>

											</Text>

										</VBox>

									</HBox>

								</VBox>

								<VBox class="billiInfoBox">

									<HBox class="proofOfDelivery ">

										<Label class="billInfoLabel bold" text="{i18n>proofofdeliveryNum}"></Label>

										<Text class="billInfoLabel " id="proofOfDeliveryNo" text="{gridModel>/Delnum}"></Text>

									</HBox>

									<HBox class="proofOfDelivery ">

										<Label class="billInfoLabel bold" text="{i18n>SHIPMENTNO}"></Label>

										<Text class="billInfoLabel" id="shipmentNoUK" text="{gridModel>/Shipno}"></Text>

									</HBox>

									<HBox class="proofOfDelivery ">

										<Label class="billInfoLabel bold" text="{i18n>orderDate}"></Label>

										<Text class="billInfoLabel" id="custDateUK" text="{gridModel>/Orddate}"></Text>

									</HBox>

									<HBox class="proofOfDelivery ">

										<Label class="billInfoLabel bold" text="{i18n>type}"></Label>

										<Text class="billInfoLabel" id="typeUK" text="{gridModel>/Type}"></Text>

									</HBox>

								</VBox>

								<VBox class="datesBox">

									<layoutData>

										<l:GridData span="L4 M4 S4"/>

									</layoutData>

									<VBox class="dateofship">

										<Label class="fontSpecifications" text="{i18n>dateOfShip}">

											<layoutData>

												<l:GridData span="L2 M2 S2"/>

											</layoutData>

										</Label>

										<Text class="fontValue" id="DateofShipUK" text="{gridModel>/dateOfSp}">

											<layoutData>

												<l:GridData span="L2 M2 S2"/>

											</layoutData>

										</Text>

									</VBox>

									<VBox class="cUstomer">

										<Text class="fontSpecifications" text="{i18n>CUSTOMERREQUEST}">

											<layoutData>

												<l:GridData span="L2 M2 S2"/>

											</layoutData>

										</Text>

										<Text class="fontValue" id="custRequestUK" text="{gridModel>/Custreq}">

											<layoutData>

												<l:GridData span="L2 M2 S2"/>

											</layoutData>

										</Text>

									</VBox>

								</VBox>

							</HBox>

							<VBox class="instructions">

								<Text class="instructionLine" id="Description1" text="{i18n>Description1}"/>

								<Text class="instructionLine" id="Description2" text="{i18n>Description2}"/>

								<Text class="instructionLine" id="Description3" text="{i18n>Description3}"/>

							</VBox>

							<HBox class="hBoxL12">

								<VBox class="squareBorder">

									<layoutData>

										<l:GridData span="L3 M12 S12"/>

									</layoutData>

									<Text class="f1 fontText" text="{i18n>SHIPPER}"/>

									<Text class="f2 fontValue" id="shipperNumberUK" text="{gridModel>/SHIPPER}"/>

								</VBox>

								<VBox class="squareBorder">

									<layoutData>

										<l:GridData span="L3 M12 S12"/>

									</layoutData>

									<Text class="f1 fontText" text="{i18n>CONSIGNEE}"/>

									<Text class="f2 fontValue" id="consigneeNoUK" text="{gridModel>/CONSIGNEE}"/>

								</VBox>

								<VBox class="squareBorder">

									<layoutData>

										<l:GridData span="L3 M12 S12"/>

									</layoutData>

									<Text class="f1 fontText" text="{i18n>HAULIER}"/>

									<Text class="f2 fontValue" id="carrierNameUK" text="{gridModel>/HAULIER}"/>

								</VBox>

								<VBox class="squareBorder">

									<layoutData>

										<l:GridData span="L3 M12 S12"/>

									</layoutData>

									<Text class="f1 fontText" text="{i18n>CHARGES}"/>

									<Text class="f2 fontValue" id="Charges" text="{gridModel>/CHARGES}"/>

								</VBox>

							</HBox>

							<HBox class="hBoxL12 detailInfoHBoxOuter">

								<VBox class="detailInfoBox">

									<Table class="customTable " id="abc" inset="false" items="{model1>/Objects}">

										<columns>

											<Column width="15%">

												<Text text="{i18n>ITEM}"/>

											</Column>

											<Column width="15%">

												<Text text="{i18n>PRODUCT}"/>

											</Column>

											<Column width="15%">

												<Text text="{i18n>PLANNEDQty}"/>

											</Column>

											<Column width="15%">

												<Text text="{i18n>ACTUALQTY}"/>

											</Column>

											<Column width="40%">

												<Text text="{i18n>DESCRIPTION}"/>

											</Column>

										</columns>

										<items>

											<ColumnListItem>

												<cells>

													<ObjectIdentifier text="{model1>Item}"/>

													<Text text="{model1>PRODUCT}"/>

													<Text text="{model1>PLANNEDQty}"/>

													<Text text="{model1>ACTUALQTY}"/>

													<Text text="{model1>DESCRIPTION}"/>

												</cells>

											</ColumnListItem>

										</items>

									</Table>

									<HBox class="qrHbox">

										<VBox class="qrImage">

											<Image class="iMage2" id="newQrcode" src=""/>

										</VBox>

										<VBox class="shippingInfo">

											<HBOx class="proofOfDelivery">

												<Text class="billInfoLabel bold" text="{i18n>Shipperlocation}"/>

												<Text class="billInfoLabel" id="shipLocUK" text="{gridModel>/Shipperlocation}"/>

											</HBOx>

											<HBox class="proofOfDelivery">

												<Text class="billInfoLabel bold" text="{i18n>ShiptoLocation}"/>

												<Text class=" billInfoLabel" id="shipToLocUK" text="{gridModel>/Shiploc}"/>

											</HBox>

											<HBox class="proofOfDelivery">

												<Text class="billInfoLabel bold" text="{i18n>ShipmentNo.}"/>

												<Text class=" billInfoLabel" id="shipmentUK" text="{gridModel>/ShipmentNo}"/>

											</HBox>

											<HBox class="proofOfDelivery">

												<Text class="billInfoLabel bold" text="{i18n>RegistrationNo.}"/>

												<Text class=" billInfoLabel" id="RegistrationUK" text="{gridModel>/RegistrationNo}"/>

											</HBox>

										</VBox>

									</HBox>

									<VBox>

										<Text class="haulierInstructions" text="{i18n>haulierInstructions}"/>

										<Text class="haulierInstructionsSet" id="instructUK" text="{gridModel>/haulierInstructions}"/>

									</VBox>

									<VBox class="nOtes">

										<Text class="haulierInstructions" text="{i18n>Notesref}"/>

										<Text id="refNumUK" text="{gridModel>/Notesref}"/>

									</VBox>

									<!--	<Text id="Call_Logistics_ID" text="{i18n>Calllogistics}"/>-->

								</VBox>

								<VBox class="rightSignLabelBoxOuter">

									<Text class="issueSignature" text="{i18n>Hauliersignature}"/>

									<Text class="" text="{gridModel>/Hauliersignature}"/>

									<VBox class="vErtical">

										<Text class="fontSpecifications" text="{i18n>PRINTNAME}"/>

										<Text id="driverName" text="{gridModel>/PRINTNAME}"/>

									</VBox>

									<VBox class="vErtical">

										<Text class="fontSpecifications" text="{i18n>Signature}"/>

										<Image class="imageLayout" height="15px" id="DriverSign" src="{gridModel>/Imgsrc1}" width="8rem"></Image>

									</VBox>

									<VBox class="vErtical">

										<Text class="fontSpecifications" text="{i18n>Date}"/>

										<Text id="driverDate" text="{gridModel>/Date}"/>

									</VBox>

									<Text class="issueSignature" text="{i18n>RecieverSignature}"/>

									<VBox class="vErtical">

										<Text class="fontSpecifications" text="{i18n>PRINTNAME}"/>

										<Text id="issueName" text="{gridModel>/PRINTNAME1}"/>

									</VBox>

									<VBox class="vErtical">

										<Text class="fontSpecifications" text="{i18n>Signature}"/>

										<Image class="imageLayout" height="15px" id="issueSign" src="{gridModel>/Imgsrc}" width="8rem"></Image>

									</VBox>

									<VBox class="vErtical">

										<Text class="fontSpecifications" text="{i18n>Date}"/>

										<Text id="issueDate" text="{gridModel>/Date1}"/>

									</VBox>

									<!--		<Text class="vErtical bold" text="{i18n>Company}"/>-->

								</VBox>

							</HBox>

							<HBox class="sIgnaturebox hBoxL12">

								<VBox class="sIgnaturebox1">

									<Text class="signAlign bold" text="{i18n>YourSignature}" textAlign="Center"/>

									<core:HTML content='&lt;div class = "signFont" &gt; {i18n>Subject} &lt;/a&gt;&lt;/div&gt;'></core:HTML>

									<HBox class="alignLeft">

										<Text class="nameW" text="{i18n>Recieversignature}" textAlign=""></Text>

										<!--<Text class="recSignimgL" id="recieverSignatureIssue" text="" textAlign="Center"></Text>-->

										<Text class="recSignimgL signatureLine" id="recieverSignatureIssue" text="{gridModel>/Recieversignature}" textAlign="Center"></Text>

									</HBox>

									<HBox class="alignLeft">

										<Text class="nameW" text="{i18n>name}" textAlign=""></Text>

										<Text class="recSignimgL signatureLine" id="checkedByRecieverName" text="{gridModel>/name1}" textAlign="Center"></Text>

									</HBox>

									<HBox class="alignLeft">

										<Text class="nameW" text="{i18n>Date}" textAlign=""></Text>

										<Text class="recSignimgL" id="issueDateBlock" text="{gridModel>/Date2}" textAlign="Center"></Text>

									</HBox>

								</VBox>

								<VBox class="sIgnaturebox2">

									<VBox class="tOtalpieces">

										<Text class="totalLabel" text="{i18n>Pieces}"></Text>

										<Text class="pIeces" id="totalPieces" text="{gridModel>/Pieces}"></Text>

									</VBox>

									<VBox class="tOtalpieces">

										<Text class="totalLabel" text="{i18n>Weigth}"></Text>

										<Text class="pIeces" id="totalWeight" text="{gridModel>/Weigth}"></Text>

									</VBox>

								</VBox>

								<VBox class="sIgnaturebox3">

									<Text class="dRoplocation" text="{i18n>DropLocation}"/>

									<HBox class="cHeckbox">

										<CheckBox editable="false" id="Yes" text="{i18n>yes}"/>

										<CheckBox editable="false" id="No" text="{i18n>no}"/>

									</HBox>

								</VBox>

							</HBox>

							<core:HTML content='&lt;div class = "footer" &gt; {i18n>footer} &lt;/a&gt;&lt;/div&gt;'></core:HTML>

						</l:content>

					</l:Grid>

				</content>

			</Page>

		</pages>

	</App>

</mvc:View>

In the above SAPUI5 XML view, I have used Grid Layout and HBox, VBox to split my HTML into Building blocks of Div's.

Are we done? , No, our form needs data, right?, Let's create take sample JSON Data to bind it and Load this JSON data in Controller and create the model and then set data to this model.

digitalForm.controller.js:

the following is the piece of the code to load JSON data and set data to the model.

	var newJSON = new JSONModel("./model/FormData.json");

			newJSON.loadData("model/FormData.json");

			this.getView().setModel(newJSON, "gridModel");

well, we have done with our view design and bind data to form, let's see our result.

Oh, bad its ugly, we need to do something to make it beautiful. Don't' worry we have CSS.

Style.css

.sapMTB {

    height: 4rem;

}

.sapMListTblCell {

    vertical-align: middle;

}

.sapMTB {

    height: 4rem;

    margin-top: .5rem;

}

.instructions .sapMFlexItem {

    text-align: center;

    font-size: 10px;

}

.iMage {

    height: 4rem;

    width: 9rem;

}

.cOpy {

    font-size: 16px;

    padding: 19px;

    /* margin-left: 5rem; */

}

.pRoofofDelivery {

    font-weight: bold;

}

.senderReciever {

    min-width: 100px;

    font-size: 10px;

    /*    width: 8rem;*/

}

.dateofship {

    display: flex;

    border: 1px solid;

    height: 3rem;

    text-align: center;

}

.bold {

    font-weight: bold !important;

}

.haulierInstructions {

    margin-top: 10px;

    font-weight: bold;

}

.nOtes {

    margin-top: 1rem;

    font-size: 11px;

    margin-bottom: 2rem;

}

.fontSpecifications.sapMText {

    font-size: 12px;

    font-weight: bold;

    text-align: center !important;

    max-width: 100%;

}

.sIgnaturebox3 {

    flex: 1;

    border: 1px solid;

    text-align: center !important;

    width: 21.5rem;

}

.issueSignature {

    display: flex;

    border: 1px solid;

    text-align: center !important;

    font-size: 8px;

    padding: 19px;

    font-weight: bold;

}

.cUstomer {

    display: flex;

    border: 1px solid;

    height: 3rem;

    text-align: center;

}

.squareBorder {

    flex: 1;

    border: 1px solid;

    text-align: center;

}

.iMage2 {

    width: 9rem;

    margin-left: 1rem;

}

.bOld {

    font-weight: bold;

}

.vErtical {

    display: flex;

    flex: 1;

    border: 1px solid;

    text-align: center;

    font-size: 10px;

    padding: 16px;

}

.nOtes {

    margin-top: 2rem;

    font-size: 11px;

}

.hBoxL12 {

    width: 98.5%;

}

.signAlign {

    margin: 2px;

}

.signFont {

    font-size: 12px;

    padding: 1px;

}

.sIgnaturebox {

    display: flex;

    /* border: 2px solid; */

    text-align: center;

}

.sIgnaturebox1 {

    display: flex;

    border: 1px solid;

    text-align: left;

    width: 57%;

}

.sIgnaturebox2 {

    flex: 1;

    border: 1px solid;

    text-align: center;

    /* width: 24%; */

}

.tOtalpieces {

    margin-top: 1rem;

}

.pIeces {

    margin-top: 5px;

    font-size: 1.5rem;

}

.dRoplocation {

    margin-top: 1rem;

    font-weight: bold;

    font-size: 13px;

}

.cHeckbox {

    padding: 20px;

    margin-left: 2rem;

}

.send_Rec {

    margin-top: 9px;

}

.instructions .sapMFlexItem {

    text-align: center;

}

.instructions {

    width: 100%;

    margin-bottom: 4px;

}

.footer {

    border-top: 1px solid;

    border-bottom: 1px solid;

    padding: 3px;

    font-size: 8px;

    margin-top: 6px;

}

.clearFix {

    clear: both;

}

.fontText {

    font-size: 11px;

}

.fontValue {

    font-size: 9px;

}

.printAreaBox {

    max-width: 210mm;

    margin: auto;

    background-color: white;

}

.printAreaBox1 {

    max-width: 210mm;

    margin: auto;

    background-color: black;

}

.printAreaBox2 {

    max-width: 210mm;

    margin: auto;

}

.notProof {

    margin-top: 10px;

    text-align: center;

    width: 29%;

    font-weight: bold;

    float: right;

    margin-left: 8rem;

}

.billiInfoBox {

    width: 40%;

    /*   float: left;*/

    padding-left: 16px;

}

.billInfoLabel.sapMText {

    display: flex;

    font-size: 10px;

    line-height: 20px;

    width: 10rem;

}

.address {

    width: 37%;

}

.billiInfoBox {

    width: 40%;

    padding-left: 16px;

}

.datesBox {

    width: 23%;

    padding: 19px;

    padding-right: 0px;

}

.addressValue {

    font-size: 10px;

}

.addressHbox {

    min-height: 64px;

}

.instructionLine {

    font-size: 9px;

}

.detailInfoBox {

    width: 80%;

}

.rightSignLabelBoxOuter {

    width: 20%;

}

.customTable .sapMListTbl .sapMText {

    font-size: 11px;

    font-weight: bold;

}

.labelFont .sapMFlexItem .sapMText {

    font-size: 11px;

}

.qrImage {

    width: 30%;

}

.shippingInfo {

    width: 70%;

    padding: 13px;

}

.detailInfoHBoxOuter {

    margin-top: 2px;

}

.sIgnaturebox1 .sapMFlexItem:first-child {

    text-align: center;

}

.totalLabel {

    font-size: 13px;

    margin-left: 17px;

}

.customTable {

    margin-bottom: 2px;

}

.proofOfDelivery.sapMHBox {

    display: flex;

}

.alignLeft {

    padding-bottom: 3px;

    margin-left: .5rem;

}

.nameW {

    width: 10rem;

}

.recSignimgL {

    width: 9rem;

    border-bottom: 1px solid;

    /* margin-left: 0.9rem;

    margin-top: 1rem;*/

}

The above code snapshot is CSS that need to develop the above form.

After adding CSS we will get our Exact form as shown in the first image

I hope this blog will help you to design digital forms and reports by Using SAPUI5.

You can print this form, for this please refer to this blog

https://blogs.sap.com/2018/10/02/printing-digital-form-in-sapui5sap-fiori/

Thanks & Regards,

Srinivas Gadilli

SAP Technical Team Lead

MOURI Tech

www.mouritech.com

Transform your paper forms into Digital forms using SAPUI5

HBox Layout:

VBox Layout:

SAP PI for Beginners

ABAP 7.40 Quick Reference

Fiori: technical installation and configuration of one app from A - Z