SAPUI5 Form- Display,Edit & Save

SAPUI5 Form- Display,Edit & Save

Check the below link to create a form and display.
http://sapui5starter.blogspot.com/2018/03/display-simple-form-sapui5.html

To edit the form buttons for edit and save to be added in view and their actions should be added in controller.

PInfo.view.xml

             <footer>
<Bar>
<contentLeft>
<Text text="@Copyright-ASML"></Text>
</contentLeft>
<contentRight>
<Button id="edit" text="Edit" press="handleEditPress" />
<Button id="save" text="Save" type="Emphasized" visible="false" press="handleSavePress" />
<Button id="cancel" text="Cancel" visible="false" press="handleCancelPress" />
</contentRight>
</Bar>

</footer>

Add the above code in PInfo view in the <Page> block.

PInfo.controller.view

                       handleEditPress : function () {

      //Clone the data
      this._oSupplier = jQuery.extend({},                            this.getView().getModel().getData().SupplierCollection[0]);
      this._toggleButtonsAndView(true);

      },

      handleCancelPress : function () {

      //Restore the data
      var oModel = this.getView().getModel();
      var oData = oModel.getData();

      oData.SupplierCollection[0] = this._oSupplier;

      oModel.setData(oData);
      this._toggleButtonsAndView(false);

      },

      handleSavePress : function () {

      this._toggleButtonsAndView(false);

      },

      _toggleButtonsAndView : function (bEdit) {
      var oView = this.getView();

      // Show the appropriate action buttons
      oView.byId("edit").setVisible(!bEdit);
      oView.byId("save").setVisible(bEdit);
      oView.byId("cancel").setVisible(bEdit);

      // Set the right form type
      this._showFormFragment(bEdit ? "Change" : "Display");

      }


Add the above code in PInfo controller to toggle the buttons and save,edit,cancel actions.

A fragment Change.fragment.xml to be added to modify the displayed data.

 Change.fragment.xml

<core:FragmentDefinition
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<VBox class="sapUiSmallMargin">
<f:SimpleForm id="SimpleFormChange"
editable="true"
layout="ResponsiveGridLayout"
title="Address"
labelSpanXL="3"
labelSpanL="3"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="4"
emptySpanL="4"
emptySpanM="4"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Name" />
<Input id="name" value="{SupplierName}" />
<Label text="City" />
<Input id="Citys" value="{City}"></Input>


<Label text="Country" />
<Select id="country" selectedKey="{Country}">
<items>
<core:Item text="England" key="England"/>
<core:Item text="Germany" key="Germany"/>
<core:Item text="USA" key="USA"/>
</items>
</Select>

<Label text="Tel" />
<Input id="Tel" value="{Tel}"></Input>

<Label text="Email" />
<Input id="Emails" value="{Email}"></Input>

<Label text="Twitter" />
<Input id="TEmail" value="{Twitter}"></Input>

</f:content>
</f:SimpleForm>
</VBox>

</core:FragmentDefinition>

Output:

Source: https://sapui5.hana.ondemand.com/