SAPUI5 Development

Customer Satisfaction Query Form using Factory Function in SAPUI5

                An effective customer satisfaction form will consist of a set of questions related to the service delivery, customer satisfaction etc. The purpose of such forms is to find how happy a customer is. Customer satisfaction is the key to the success of every business or company.

Business Scenario
           A company or a business for example techippo need to know how happy their readers are. To know this we have a set of questions for you. Each question is different. Some have to be selected from multiple choices. Some have to be entered manually. Some are yes / no questions.



Challenge
          If it was same set of questions an sap.m.List with aggregations binding will do the trick. Here comes the factory function to the rescue. The factory function is more powerful that a developer can decide whether to use same controls or control with different properties or an entire different control.
Solution
         Usage of factory function with a sap.m.List is the most elegant solution for this scenario. In most of the interviews people been asking about this. Only the experts know how to use a factory function. We are experts right? In this tutorial I will be showing the usage of factory function concept.
         The factory function has two parameters. 'sId' and 'oContext'. sId is nothing but an id for the control and oContext contain data for the list entry.
Pre-requisites

  1. SAPUI5 application created already.
Steps

  1. Open controller in my case View1.controller.js and inside onInit method add below code. This is the custom data for our form. In real cases the data should be coming from backend OData service or rest apis.
  2.   onInit: function() {
       var oModel = new sap.ui.model.json.JSONModel({
        QuestionSet: [{
         "Question": "How will you rate the satisfaction with the quality of service provided by techippo?",
         "Type": "Select",
         "Options": [{
          "option": "Neutral"
         }, {
          "option": "Somewhat satisfied"
         }, {
          "option": "Very satisfied"
         }],
         "Answer": ""
        }, {
         "Question": "Please explain the above rating?",
         "Type": "Input",
         "Options": [],
         "Answer": ""
        }, {
         "Question": "How techippo is compared to other service providers of same category?",
         "Type": "Select",
         "Options": [{
          "option": "Not as good"
         }, {
          "option": "About the same"
         }, {
          "option": "Very satisfied"
         }],
         "Answer": ""
        }, {
         "Question": "How likely you would recommend techippo to your friends?",
         "Type": "Radio",
         "Options": [{
          "option": "Definitely not"
         }, {
          "option": "Probably would"
         }, {
          "option": "Definitely would"
         }],
         "Answer": ""
    
        }, {
         "Question": "How long you been known about techippo?",
         "Type": "Radio",
         "Options": [{
          "option": "Less than a year"
         }, {
          "option": "Dont know"
         }],
         "Answer": ""
        }, {
         "Question": "Thank you for your support",
         "Type": "",
         "Options": [],
         "Answer": "techippo"
        }]
       });
       this.getView().setModel(oModel);
      }
    
  3. Open View1.view.xml and paste below code. Here I am using sap.m.List control with factory function.
  4. <mvc:View controllerName="factoryFunction.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
     displayBlock="true" xmlns="sap.m">
     <App>
      <pages>
       <Page title="{i18n>title}">
        <content>
         <List id="factoryList" items="{path:'/QuestionSet' ,factory:'.myFactory'}">
         </List>
         <Button text="Submit" press="onSubmit"></Button>
        </content>
       </Page>
      </pages>
     </App>
    </mvc:View>
    
  5. Again go back to View1.controller.js and define the factory function. As we said already this will have two parameters. Paste below code after onInit() method. Don't forget to put comma after the onInit method. Based on question type we are changing the control.
  6.   myFactory: function(sId, oContext) {
       var oUIControl = null;
       var questionType = oContext.getProperty("Type");
       switch (questionType) {
        case "Select":
         oUIControl = new sap.m.CustomListItem({
          content: [
           new sap.m.VBox({
            items: [
             new sap.m.Text({
              text: "{Question}"
             }),
             new sap.m.Select({
              selectedItemId:"{Answer}",
              items: {
               path: "Options",
               template: new sap.ui.core.ListItem({
                text: "{option}"
               })
              }
             })
            ]
           }).addStyleClass("sapUiTinyMargin")
          ]
         }).addStyleClass("sapUiTinyMargin");
         break;
        case "Radio":
         oUIControl = new sap.m.CustomListItem({
          content: [
           new sap.m.VBox({
            items: [
             new sap.m.Text({
              text: "{Question}"
             }),
             new sap.m.RadioButtonGroup({
              buttons: {
               path: "Options",
               template: new sap.m.RadioButton({
                text: "{option}"
               })
              }
             })
            ]
           }).addStyleClass("sapUiTinyMargin")
          ]
         }).addStyleClass("sapUiTinyMargin");
         break;
        case "Input":
         oUIControl = new sap.m.CustomListItem({
          content: [
           new sap.m.VBox({
            items: [
             new sap.m.Text({
              text: "{Question}"
             }),
             new sap.m.Input({
              value:"{Answer}"
             })
            ]
           }).addStyleClass("sapUiTinyMargin")
          ]
         }).addStyleClass("sapUiTinyMargin");
         break;
        default:
         oUIControl = new sap.m.StandardListItem({
          title:"{Question}",description:"{Answer}"
         }).addStyleClass("sapUiTinyMargin");
       }
       return oUIControl;
    
      }
    
  7. Now our app is ready. Right click on application and -> Run As ->Web application. I have pasted my screenshot below.
If you enjoyed this post, Please Share!!

4 comments :

  1. can you share code for checkbox group

    ReplyDelete
    Replies
    1. for check box code see 'Radio' case in switch function above.

      Delete
  2. Very helpful post as usual.

    ReplyDelete

Powered by Blogger.