Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member182294
Active Contributor

As promised in my previous blog Sample UME Application using SAPUI5 and SAP Gateway, I enhanced the application with Create and Delete operations. To keep this blog as much as short I am not including the Update functionality as it is similar to Create. This is a sample application only and the idea is to show the usage of SAPUI5 controls and integrate with Gateway services. 

I did some search to see if the class sap.ui.model.odata.ODataModel provides any functionality to call the POST, DELETE and UPDATE operations, but looks like the current version does not provide any API support for this. So relied on datajs to achieve this functionality.

Few important things before we get into the actual functionality. All modifiable Gateway requests are protected from CSRF (Cross-Site Request Forgery) attack. CSRF is a session based token which has to be get initially from a non-modifiable request (READ or QUERY) and then same has to be passed to all modifiable requests. For more details about CSRF Protection check this.

Create User

The create user screen looks like below.

The Save button is associated with createUser java script function and Clear button is associated with clearForm java script function.

new sap.ui.commons.Button({text:"Save", press:createUser})
new sap.ui.commons.Button({text:"Clear", press:clearForm})

The clear function is pretty straight forward. We just need to get the UI control and set the value to "".

 sap.ui.getCore().getControl("userid_tf").setValue("");

Now, we will see how to call the create operation using Gateway service.

As mentioned above, we need to pass the CSRF token with all the modifiable operations. So to get the CSRF token we need to call a non modifiable operation with header "X-CSRF-Token" and value as "Fetch". In our example I am calling the READ operation with this header token to get the actual token value.

OData.request
({
requestUri: "http://gwserver:8000/sap/opu/odata/sap/Z_UI5_USER_MAINT_CM/z_ui5_user_maintCollection('AGAMPA')",
method: "GET",
headers:
{     
                        "X-Requested-With": "XMLHttpRequest",
                        "Content-Type": "application/atom+xml",
                        "DataServiceVersion": "2.0",        
                        "X-CSRF-Token":"Fetch"    
} },

OData.request is a datajs library function to call RESTful services. As the SAPUI5 includes datajs library, we can use this functions directly in our code without installing external libraries. Read more about datajs.

Once the request is executed we will check the call back functions to validate the response. If the request is successfully executed then corresponding success function block will be executed, otherwise error function block will be executed.

function (data, response)
{
          //your logic when the request is executed successfully
}
function (err)
{
       //your logic when the request throws error
}

The next step is to read the X-CSRF-Token value from READ response and prepare the POST method.

Here is the syntax to read the token.

function (data, response){
var header_xcsrf_token = response.headers['x-csrf-token'];

Now we have the valid CSRF protection token to call modifiable operations. We can use this token with Create, Update and Delete Operations.

OData.request({
requestUri:
"http://gwserver:8000/sap/opu/odata/sap/Z_UI5_USER_MAINT_CM/z_ui5_user_maintCollection",
             method: "POST",
             headers: {
                              "X-Requested-With": "XMLHttpRequest",
                              "Content-Type": "application/atom+xml",
                              "DataServiceVersion": "2.0",
                              "Accept": "application/atom+xml,application/atomsvc+xml,application/xml",
                              "X-CSRF-Token": header_xcsrf_token
                           },
               data:{
                              username: username_var,
                              title:title_var,
                              title_p:title_var,
                              firstname: firstname_var,
                              lastname: lastname_var,
                              password: password_var,
                              department: department_var,
                              language: language_var,
                              telephone: telephone_var,
                              e_mail: email_var,
                              city: city_var,
                              country: country_var,
                              comm_type:"",
                              fullname:"",
                              userid:"",
                              name:"",
                              islocked:"",
                              region: ""
}},

All of the above headers must be supplied with the request. And also every field in the Gateway data model may not be relevant for the CREATE operation, but they must be supplied in the request with either a valid value or with its null attribute set to “true”.

After execution, we will write our own logic in success and error call-back methods to display corresponding messages. The response data is returned in xml format and if you want to see the output in simple string you can use the built in function window.JSON.stringify(data).

function (data, response){
$("<div>Response data " + window.JSON.stringify(data) + "</div>").appendTo($("#MessageDiv"));

Delete User

Similarly we do the same for DELETE operation. The only difference is, we need not to pass any data as the RESTful operation URI itself takes the input.

requestUri: "http://gwserver:8000/sap/opu/odata/sap/"+
                  +" Z_UI5_USER_MAINT_CM/z_ui5_user_maintCollection('"+selectedUserID+"')",

User selects a row and clicks on DELETE button. I am creating and deleting test users in Gateway system, so be careful if you create and use the same services.

I will share the complete code here. For better usability I have segregated the UI part and Java Script. All the UI related code is in HTML file and all the logic is maintained in myumescript.js which is placed under resources folder.

UserManagement.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <title>SAP Flight Management</title>
    <script id='sap-ui-bootstrap' type='text/javascript'
        src='./resources/sap-ui-core.js'
        data-sap-ui-theme="sap_goldreflection"
        data-sap-ui-libs='sap.ui.commons,sap.ui.ux3,sap.ui.table'></script>
          <script type='text/javascript' src='./resources/myumescript.js'></script>
    <script type="text/javascript">
    <!--
                    var selectedUserID           = null;
                    /*Create Application Header */
                    var appHeader                     = new sap.ui.commons.ApplicationHeader("userManagementHeader");
                    //Set the default values, test purpose hardcoding the values.
                    appHeader.attachLogoff(logoffPage);//logoffPage is the JS function available in myumescript.js
                    appHeader.setDisplayLogoff(true);
                    appHeader.setDisplayWelcome(true);
                    appHeader.setLogoSrc("resources/logo_capgemini.gif");
                    appHeader.setLogoText("Capgemini SAP IDP");
                    appHeader.setUserName("Abhilash Gampa");  
                    appHeader.placeAt("appBody");
                    //Create ODataModel and attach the model at application level.
              var oModel = new sap.ui.model.odata.ODataModel
                                                  ("http://gwserver.com:8000/sap/opu/odata/sap/Z_UI5_USER_MAINT_CM/");   
              sap.ui.getCore().setModel(oModel);
                    //Creating the Radio button group for CRUD operations.
                    var rbGroup = new sap.ui.commons.RadioButtonGroup("crudRBGroup",{columns : 4});
                    rbGroup.addItem(new sap.ui.commons.RadioButton("read_user",{text : "Read/Query"}));
                    rbGroup.addItem(new sap.ui.commons.RadioButton("create_user",{text : "Create"}));
                    rbGroup.addItem(new sap.ui.commons.RadioButton("delete_user",{text : "Delete"}));
                    rbGroup.attachSelect(selectionChanged);
                    rbGroup.placeAt("transactionType");
                    // User details form for Create user 
                    var userFormLayout = new sap.ui.commons.layout.MatrixLayout();
                    userFormLayout.setLayoutFixed(false);
                    userFormLayout.createRow(
                                                            new sap.ui.commons.Label({text:"User Id", width:"100px"}),
                                                            new sap.ui.commons.TextField("userid_tf",{editable:true, width:"150px", value : "{username}"}));
                    var titleCombox = new sap.ui.commons.ComboBox("title_cb",{maxLength : 3, width:"75px", value:"{title}",items:[
                                                     new sap.ui.core.ListItem({text:"Mr."}),
                                                     new sap.ui.core.ListItem({text:"Mrs."}),
                                                     new sap.ui.core.ListItem({text:"Ms."})]}) ;
                    userFormLayout.createRow(
                                                            new sap.ui.commons.Label({text:"Title", width:"100px"}),titleCombox);
                    userFormLayout.createRow(
                                                            new sap.ui.commons.Label({text:"First Name", width:"100px"}),
                                                            new sap.ui.commons.TextField("firstname_tf",{editable:true, width:"150px", value : "{firstname}", required : true}),
                                                            new sap.ui.commons.Label({text:"Last Name", width:"100px"}),
                                                            new sap.ui.commons.TextField("lastname_tf",{editable:true, width:"150px", value : "{lastname}", required : true}));
                    userFormLayout.createRow(
                                                            new sap.ui.commons.Label({text:"Password", width:"100px"}),
                                                            new sap.ui.commons.PasswordField("password_tf",{editable:true, width:"150px", value : "{password}"}));
                    userFormLayout.createRow(
                                                            new sap.ui.commons.Label({text:"Language", width:"100px"}),
                                                            new sap.ui.commons.TextField("language_tf",{editable:true, width:"150px", value : "{language}"}),
                                                            new sap.ui.commons.Label({text:"Department", width:"100px"}),
                                                            new sap.ui.commons.TextField("department_tf",{editable:true, width:"150px", value : "{department}"}));
                    userFormLayout.createRow(
                                                            new sap.ui.commons.Label({text:"Telephone", width:"100px"}),
                                                            new sap.ui.commons.TextField("telephone_tf",{editable:true, width:"150px", value : "{telephone}"}),
                                                            new sap.ui.commons.Label({text:"Email", width:"100px"}),
                                                            new sap.ui.commons.TextField("e_mail_tf",{editable:true, width:"250px", value : "{e_mail}"}));
                    var countryCombox = new sap.ui.commons.ComboBox("country_cb",{maxLength : 3, width:"75px", value:"{country}",items:[
                                                            new sap.ui.core.ListItem({text:"US"}),
                                                            new sap.ui.core.ListItem({text:"IN"}),
                                                            new sap.ui.core.ListItem({text:"CA"}),
                                                            new sap.ui.core.ListItem({text:"JP"}),
                                                            new sap.ui.core.ListItem({text:"UK"})
                                                  ]}) ;
                    userFormLayout.createRow(
                                                            new sap.ui.commons.Label({text:"City", width:"100px"}),
                                                            new sap.ui.commons.TextField("city_tf",{editable:true, width:"150px", value : "{city}"}),
                                                            new sap.ui.commons.Label({text:"Country", width:"100px"}),countryCombox);
                    userFormLayout.placeAt("UserDetailsForm");
                    var buttonLayout = new sap.ui.commons.layout.MatrixLayout({layoutFixed:false});
                    buttonLayout.createRow( 
                                                            new sap.ui.commons.Button({text:"Save", press:createUser}),new sap.ui.commons.Button({text:"Clear", press:clearForm}));
                    buttonLayout.placeAt("ButtonsForm"); 
                    //User Details table which shows the users from the Query operation.
                    var userDetailsTable = new sap.ui.table.DataTable({
                              title : "Available Users",
                              width : "75%",
                              visibleRowCount : 5,
                              ExpandedVisibleRowCount : 20,
                              selectionMode : sap.ui.table.SelectionMode.Single,
                              editable : false});
                    userDetailsTable.addColumn(new sap.ui.table.Column({
                      label: new sap.ui.commons.Label({text: "User ID"}),
                      template: new sap.ui.commons.TextField().bindProperty("value", "username"),
                      sortProperty: "username" }));
                    userDetailsTable.addColumn(new sap.ui.table.Column({
                                label: new sap.ui.commons.Label({text: "First Name"}),
                                template: new sap.ui.commons.TextField().bindProperty("value", "firstname"),
                                sortProperty: "firstname" }));
                    userDetailsTable.addColumn(new sap.ui.table.Column({
                                label: new sap.ui.commons.Label({text: "Last Name"}),
                                template: new sap.ui.commons.TextField().bindProperty("value", "lastname"),
                                sortProperty: "lastname" }));   
                    userDetailsTable.attachRowSelect(rowSelected); //rowSelected is the JS function available in myumescript.js
                    userDetailsTable.bindRows("z_ui5_user_maintCollection");//attach it to query operation
                    var userDetailsTableLayout = new sap.ui.commons.layout.MatrixLayout();
                    userDetailsTableLayout.createRow( userDetailsTable);             
                    userDetailsTableLayout.placeAt("UserDetailsTable");  
              //More User Details Tab
                    var moreUserDetailsLayout = new sap.ui.commons.layout.MatrixLayout();
                    moreUserDetailsLayout.setLayoutFixed(false);
                    var titleCombox1 = new sap.ui.commons.ComboBox("title_cb_m",{editable : false, maxLength : 3, width:"75px", value:"{title}",items:[
                                                     new sap.ui.core.ListItem({text:"Mr."}),
                                                     new sap.ui.core.ListItem({text:"Mrs."}),
                                                     new sap.ui.core.ListItem({text:"Ms."})]}) ;                                                                      
                    moreUserDetailsLayout.createRow(new sap.ui.commons.Label({text:"Title", width:"100px"}),titleCombox1);
                    moreUserDetailsLayout.createRow(
                                                            new sap.ui.commons.Label({text:"First Name", width:"100px"}),
                                                            new sap.ui.commons.TextField("firstname_tf_m",{editable:false, width:"150px", value : "{firstname}", required : true}),
                                                            new sap.ui.commons.Label({text:"Last Name", width:"100px"}),
                                                            new sap.ui.commons.TextField("lastname_tf_m",{editable:false, width:"150px", value : "{lastname}", required : true}));
                    moreUserDetailsLayout.createRow(
                                                            new sap.ui.commons.Label({text:"Language", width:"100px"}),
                                                            new sap.ui.commons.TextField("language_tf_m",{editable:false, width:"150px", value : "{language}"}),
                                                            new sap.ui.commons.Label({text:"Department", width:"100px"}),
                                                            new sap.ui.commons.TextField("department_tf_m",{editable:false, width:"150px", value : "{department}"}));
                    moreUserDetailsLayout.createRow(
                                                            new sap.ui.commons.Label({text:"Telephone", width:"100px"}),
                                                            new sap.ui.commons.TextField("telephone_tf_m",{editable:false, width:"150px", value : "{telephone}"}),
                                                            new sap.ui.commons.Label({text:"Email", width:"100px"}),
                                                            new sap.ui.commons.TextField("e_mail_tf_m",{editable:false, width:"250px", value : "{e_mail}"}));
                    var countryCombox1 = new sap.ui.commons.ComboBox("country_cb_m", {editable:false, maxLength : 3, width:"75px", value:"{country}",items:[
                                                            new sap.ui.core.ListItem({text:"US"}),
                                                            new sap.ui.core.ListItem({text:"IN"}),
                                                            new sap.ui.core.ListItem({text:"CA"}),
                                                            new sap.ui.core.ListItem({text:"JP"}),
                                                            new sap.ui.core.ListItem({text:"UK"})]}) ;
                    moreUserDetailsLayout.createRow(
                                                            new sap.ui.commons.Label({text:"City", width:"100px"}),
                                                            new sap.ui.commons.TextField("city_tf_m",{editable:false, width:"150px", value : "{city}"}),
                                                            new sap.ui.commons.Label({text:"Country", width:"100px"}),countryCombox1);
                    //Selected User Profiles Tab
                    var userProfileDetailsTable = new sap.ui.table.DataTable({
                              title : "Profiles",
                              width : "100%",
                              visibleRowCount : 5,
                              ExpandedVisibleRowCount : 10,
                              selectionMode : sap.ui.table.SelectionMode.Single,
                              editable : false});
                    userProfileDetailsTable.addColumn(new sap.ui.table.Column({
                                label: new sap.ui.commons.Label({text: "Profile"}),
                                template: new sap.ui.commons.TextField().bindProperty("value", "profile"),
                                sortProperty: "profile" }));
                    userProfileDetailsTable.addColumn(new sap.ui.table.Column({
                      label: new sap.ui.commons.Label({text: "Type"}),
                      template: new sap.ui.commons.TextField().bindProperty("value", "type"),
                      sortProperty: "type" }));
                    userProfileDetailsTable.addColumn(new sap.ui.table.Column({
                      label: new sap.ui.commons.Label({text: "Version"}),
                      template: new sap.ui.commons.TextField().bindProperty("value", "version"),
                      sortProperty: "version" }));
                    userProfileDetailsTable.addColumn(new sap.ui.table.Column({
                                label: new sap.ui.commons.Label({text: "Description"}),
                                template: new sap.ui.commons.TextField().bindProperty("value", "text"),
                                sortProperty: "language" }));
                    //Selected User Roles Tab
                    var userRolesDetailsTable = new sap.ui.table.DataTable({
                              title : "Roles",
                              width : "100%",
                              visibleRowCount : 5,
                              ExpandedVisibleRowCount : 10,
                              selectionMode : sap.ui.table.SelectionMode.Single,
                              editable : false});
                    userRolesDetailsTable.addColumn(new sap.ui.table.Column({
                                label: new sap.ui.commons.Label({text: "Role Name"}),
                                template: new sap.ui.commons.TextField().bindProperty("value", "role_name"),
                                sortProperty: "role_name" }));
                    userRolesDetailsTable.addColumn(new sap.ui.table.Column({
                      label: new sap.ui.commons.Label({text: "Role Id"}),
                      template: new sap.ui.commons.TextField().bindProperty("value", "role"),
                      sortProperty: "role" }));
                    userRolesDetailsTable.addColumn(new sap.ui.table.Column({
                      label: new sap.ui.commons.Label({text: "Valid From"}),
                      template: new sap.ui.commons.TextField().bindProperty("value", "from_dat"),
                      sortProperty: "from_dat" }));
                    userRolesDetailsTable.addColumn(new sap.ui.table.Column({
                                label: new sap.ui.commons.Label({text: "Valid To"}),
                                template: new sap.ui.commons.TextField().bindProperty("value", "to_dat"),
                                sortProperty: "to_dat" }));
                    //Create User Tabs for User Details, Profiles and Roles
                    var userTab          = new sap.ui.commons.Tab().setText("Person").addContent(moreUserDetailsLayout);
                    var profilesTab     = new sap.ui.commons.Tab().setText("Profiles").addContent(userProfileDetailsTable);
                    var rolesTab         = new sap.ui.commons.Tab().setText("Roles").addContent(userRolesDetailsTable);
                    //Add the individual Tabs to TabStrip
                    var tabStrip =  new sap.ui.commons.TabStrip({width:"75%",select:tabSelect})
                       .addTab(userTab)
                       .addTab(rolesTab)
                       .addTab(profilesTab); 
                    userDetailsTableLayout.createRow(tabStrip);
                var deleteButton = new sap.ui.commons.Button({text:"Delete", press:deleteUser});
                     deleteButton.placeAt("DeleteButtonForm");
                    //Initially all the sections will be invisible except
                    userFormLayout.setVisible(false);
                    buttonLayout.setVisible(false);
                    userDetailsTableLayout.setVisible(true);
                    deleteButton.setVisible(false);
          -->
          </script>
</head>
<body class="sapUiBody" role="application">
          <div id="appBody"></div>
          <div id="transactionType"></div>
          <div id="UserDetailsForm"></div>
          <div id="DeleteButtonForm"></div>
          <div id="ButtonsForm"></div>
          <div id="UserDetailsTable"></div>
          <div id="UserTabs"></div>
          <div id="MessageDiv"></div>
          <p></p>
</body>
</html>

myumescript.js

//Calls Gateway service to delete the selected user.
function deleteUser(e)
{
    OData.request
    ({
         requestUri:
"http://gwserver:8000/sap/opu/odata/sap/Z_UI5_USER_MAINT_CM/z_ui5_user_maintCollection('AGAMPA')",
       method: "GET",
       headers:
         {     
               "X-Requested-With": "XMLHttpRequest",
               "Content-Type": "application/atom+xml",
               "DataServiceVersion": "2.0",        
                "X-CSRF-Token":"Fetch"    
         }
    },
             function (data, response)
             {
                    header_xcsrf_token = response.headers['x-csrf-token'];
        OData.request
        ({
             requestUri:
"http://gwserver:8000/sap/opu/odata/sap/Z_UI5_USER_MAINT_CM/z_ui5_user_maintCollection('"+selectedUserID+"')",
             method: "DELETE",
             headers: {
                 "X-Requested-With": "XMLHttpRequest",                      
                 "Content-Type": "application/atom+xml",
                 "DataServiceVersion": "2.0",
                 "X-CSRF-Token": header_xcsrf_token
                                }
                },
                  function (data, request)
                  {
                              $("<div>Returned data in Delete " + window.JSON.stringify(data) + "</div>").appendTo($("#MessageDiv"));
                   },
                 function (err)
                 {
                              $("<div>Returned error in Delete " + window.JSON.stringify(err.response) + "</div>").appendTo($("#MessageDiv"));                            
                  }
        );
    },
          function (err)
          {
                   var request     = err.request;
                   var response = err.response;
                   alert("Error in Get -- Request "+request+" Response "+response);
          }
    );     
}   
//Calls Gateway service to Create a new user.
function createUser(e)   
    {
        var username_var         = sap.ui.getCore().getControl("userid_tf").getValue();
        var title_var                      = sap.ui.getCore().getControl("title_cb").getValue();
        var firstname_var           = sap.ui.getCore().getControl("firstname_tf").getValue();
        var lastname_var           = sap.ui.getCore().getControl("lastname_tf").getValue();
        var password_var          = sap.ui.getCore().getControl("password_tf").getValue();
        var department_var       = sap.ui.getCore().getControl("department_tf").getValue();
        var language_var           = sap.ui.getCore().getControl("language_tf").getValue();       
        var telephone_var          = sap.ui.getCore().getControl("telephone_tf").getValue();
        var email_var                  = sap.ui.getCore().getControl("e_mail_tf").getValue();
        var city_var                       = sap.ui.getCore().getControl("city_tf").getValue();
        var country_var                = sap.ui.getCore().getControl("country_cb").getValue();
        OData.request
        ({
             requestUri:
"http://gwserver:8000/sap/opu/odata/sap/Z_UI5_USER_MAINT_CM/z_ui5_user_maintCollection('AGAMPA')",
                   method: "GET",
                   headers:
                       {     
                                      "X-Requested-With": "XMLHttpRequest",
                                      "Content-Type": "application/atom+xml",
                                      "DataServiceVersion": "2.0",        
                                      "X-CSRF-Token":"Fetch"    
                         }                  
                },
                 function (data, response)
                 {
                              header_xcsrf_token = response.headers['x-csrf-token'];
                  OData.request
                  ({
                       requestUri:
"http://gwserver:8000/sap/opu/odata/sap/Z_UI5_USER_MAINT_CM/z_ui5_user_maintCollection",
                             method: "POST",
                             headers: {
                                                    "X-Requested-With": "XMLHttpRequest",                      
                                                    "Content-Type": "application/atom+xml",
                                                    "DataServiceVersion": "2.0",
                                                    "Accept": "application/atom+xml,application/atomsvc+xml,application/xml",
                                                    "X-CSRF-Token": header_xcsrf_token
                                                },
                             data:
                                 {
                                                       username: username_var,
                                                       title:title_var,
                                                       title_p:title_var,
                                                       firstname: firstname_var,
                                                       lastname: lastname_var,
                                                       password: password_var,
                                                       department: department_var,
                                                       language: language_var,
                                                       telephone: telephone_var,
                                                       e_mail: email_var,
                                                       city: city_var,
                                                       country: country_var,
                                                       comm_type:"",
                                                       fullname:"",
                                                       userid:"",
                                                       name:"",
                                                       islocked:"",
                                                       region: ""
                                                 }
                          },
                            function (data, response)
                            {
                                             $("<div>Returned data " + window.JSON.stringify(data) + "</div>").appendTo($("#MessageDiv"));
                            },
                                   function (err)
                                   {
                                        $("<div>Returned error " + window.JSON.stringify(err.response) + "</div>").appendTo($("#MessageDiv"));
                                   }
                  );
        },
                       function (err)
                       {
                            var request = err.request; // the request that was sent.
                            var response = err.response; // the response that was received.
                            alert("Error in Get -- Request "+request+" Response "+response);
                       }
        );     
    }
          //Clear user form
    function clearForm(e)
    {
        sap.ui.getCore().getControl("userid_tf").setValue("");
        sap.ui.getCore().getControl("title_cb").setValue("Mr.");
        sap.ui.getCore().getControl("firstname_tf").setValue("");
        sap.ui.getCore().getControl("lastname_tf").setValue("");
        sap.ui.getCore().getControl("password_tf").setValue("");
        sap.ui.getCore().getControl("department_tf").setValue("");
        sap.ui.getCore().getControl("language_tf").setValue("");       
        sap.ui.getCore().getControl("telephone_tf").setValue("");
        sap.ui.getCore().getControl("e_mail_tf").setValue("");
        sap.ui.getCore().getControl("city_tf").setValue("");
        sap.ui.getCore().getControl("country_cb").setValue("");       
    }
    //Dummy logoff functionality
    function logoffPage(oEvent)
    {
                     jQuery.sap.require("sap.ui.commons.MessageBox");
                                 sap.ui.commons.MessageBox.show(
                 "Are you sure want to logoff from this page?",
                 sap.ui.commons.MessageBox.Icon.INFORMATION,
                 "Logoff Confirmation",
                 [sap.ui.commons.MessageBox.Action.OK,sap.ui.commons.MessageBox.Action.CANCEL]                                       
                      );
    }
    function tabSelect(e)
    {
        e.getSource().setSelectedIndex(e.getParameter("index"));
    }
          //Radio Button selection event
          function selectionChanged(oEvent)
          {
                    var selectedOption =  rbGroup.getSelectedItem().getId();
                    if(selectedOption == "create_user")
                    {
                              userFormLayout.setVisible(true);
                              buttonLayout.setVisible(true);
                              userDetailsTableLayout.setVisible(false);
                              deleteButton.setVisible(false);
                    }
                    else
                    if(selectedOption == "read_user")
                    {
                              userFormLayout.setVisible(false);
                              buttonLayout.setVisible(false);
                              userDetailsTableLayout.setVisible(true);
                              deleteButton.setVisible(false);
                    }
                    else
                    if(selectedOption == "delete_user")
                    {
                              userFormLayout.setVisible(false);
                              buttonLayout.setVisible(false);
                              userDetailsTableLayout.setVisible(true);
                              deleteButton.setVisible(true);
                    }
          }
    //Table row selection event. This funtion calls READ operation and gets more details about user.
    function rowSelected(oEvent)
    {
              var currentRowContext = oEvent.getParameter("rowContext");
              selectedUserID = oModel.getProperty("username", currentRowContext);
      OData.read("http://gwserver:8000/sap/opu/odata/sap/Z_UI5_USER_MAINT_CM/z_ui5_user_maintCollection('"+selectedUserID+"')",
                    function (response)
                    {
                                        sap.ui.getCore().getControl("title_cb_m").setValue(response.title_p);
                                        sap.ui.getCore().getControl("firstname_tf_m").setValue(response.firstname);
                                        sap.ui.getCore().getControl("lastname_tf_m").setValue(response.lastname);
                                        sap.ui.getCore().getControl("language_tf_m").setValue(response.language);
                                        sap.ui.getCore().getControl("department_tf_m").setValue(response.department);
                                        sap.ui.getCore().getControl("telephone_tf_m").setValue(response.telephone);
                                        sap.ui.getCore().getControl("e_mail_tf_m").setValue(response.e_mail);
                                        sap.ui.getCore().getControl("country_cb_m").setValue(response.country);
                                        sap.ui.getCore().getControl("city_tf_m").setValue(response.city);
              });
              userProfileDetailsTable.bindRows(currentRowContext+"/profiles_r");
              userRolesDetailsTable.bindRows(currentRowContext+"/activitygroups_r");              
    }
15 Comments
Labels in this area