Show TOC

Full Code Sample: Share DialogLocate this document in the navigation structure

This sample code demonstrates the integration of the Share Dialog component in the Detail view of a custom SAP Fiori app. You can use this code as a template and modify it to suit your business needs.

The figure below shows the Master and Detail views of an SAP Fiori app.

In this example, the second tab of the Detail view includes two buttons related to the Share Dialog component:
  • open share

    This button opens the Share dialog.

  • set settings

    This button changes the settings sent to the Share Dialog component.

Detail View:

View Controller:

In the View Controller of the Detail view, we added the event handlers for the buttons as well as the code to create and initialize the Share Dialog component.

Selectable Code

The full code sample described above is available in a selectable format below.

Detail View

< core:View
       controllerName ="collaboration-demo.view.detail"
       xmlns ="sap.m"
       xmlns:me ="sap.me"
       xmlns:core ="sap.ui.core"
       xmlns:form ="sap.ui.layout.form"
       xmlns:mvc ="sap.ui.core.mvc">

         < Pageid ="detailPage"class ="sapUiFioriObjectPage"showNavButton ="false">
              < content >
                        < ObjectHeaderid ="Header"
                                   introActive ="false"
                                   title ="SO 3212"
                                   titleActive ="true"
                                   number ="1000"
                                   numberUnit ="USD">
                        < firstStatus >
                             < ObjectStatustext ="opened"state ="Warning"></ ObjectStatus >
                        </ firstStatus >
                      </ ObjectHeader >

                      < IconTabBarid ="SO03_ICONTABBAR"select ="onTabFilterSelect"expanded ="true"expandable ="false">
                           < items >
                                < IconTabFilterkey ="hint"icon ="sap-icon://hint">
                                     < content >
                                     < form:SimpleFormmaxContainerCols ="1">
                                              < form:content >                                   
                                                                     
                                                   <!-- Customer section -->
                                                   < core:Titleid ="SO03_TI_CUSTOMER"text ="{i18n>Customer}"/>
                                                                                                       
                                                   < Labelid ="SO03_LBL_SOLDTOPARTY"text ="{i18n>SoldtoParty}"/>
                                                   < Linkid ="SO03_LNK_SOLDTOPARTY"text ="sap.com"href ="http://sap.com"/>
                                                                     
                                                   < Labelid ="SO03_LBL_RISKCATEGOTY"text ="{i18n>RiskCategory}"/>
                                                   < Textid ="SO03_TXT_RISKCATEGOTY"text ="low"/> 
                                              </ form:content >                                       
                                          </ form:SimpleForm >                
                                     </ content >
                                   </ IconTabFilter >
                                   < IconTabFilterkey ="att"icon ="sap-icon://share">
                                        < content >                                     
                                             < Buttonid ="shareButton"text ="open share"press ="onShareButtonPress"/>
                                             < Buttonid ="setSettingsButton"text ="set settings"press ="onSetSettingsPress"/>
                                        </ content >
                                   </ IconTabFilter >
                           </ items >
                      </ IconTabBar >
          </ content >           
       </ Page >
</ core:View >

View Controller

jQuery.sap.declare( "collaboration-demo.view.detail.controller" );
jQuery.sap.require( "sap.ca.scfld.md.controller.BaseDetailController" );
jQuery.sap.require( "sap.collaboration.components.fiori.sharing.attachment.Attachment" );

 sap.ca.scfld.md.controller.BaseDetailController.extend( "collaboration-demo.view.detail" , {

     onInit:  function() {             
         sap.ca.scfld.md.controller.BaseDetailController.prototype.onInit.call(this);             
                     
         this.initializeShareComponent();
     },

     onAfterRendering: function() {
     },
     initializeShareComponent : function() {
       var aFiles = [];
       aFiles.push(new sap.collaboration.components.fiori.sharing.attachment.Attachment(
               "photo1.gif", "image/gif", "http://localhost:8080/uploads/photo1.gif"));
       aFiles.push(new sap.collaboration.components.fiori.sharing.attachment.Attachment(
               "photo1.jpg", "image/jpg", "http://localhost:8080/uploads/marvel.jpg"));
             
       var oAttachments = {
               attachmentsArray: aFiles             
           };             
                     
       var oDisplayObject = {
               id: window.location.href,
                  display: new sap.m.ObjectListItem( "object_item" ,{
                       title : "SO 3212",
                       number : "1K",
                       numberUnit : "USD",
                       firstStatus: new sap.m.ObjectStatus({text :  "Open" , state: "Warning" })
           }),
                  share: "Please take a look at this Sales Order"
           };              
                     
       var oExternalObject = {
               appContext:  "UDBO",
               odataServicePath:  "/sap/opu/odata/sap/ZMCN_TEST_SERVICE_1_SRV/",
               collection:  "TestCollection",
               key:  "'myExtObj'",
               name:  "User Defined BO myExtObj",
               summary:  "not being used"             
       };             
                     
       this.oShareDialog = sap.ui.getCore().createComponent({
               name:  "sap.collaboration.components.fiori.sharing.dialog",
               id:  "shareDialog",
               settings: {
                   object: oDisplayObject,             
                   externalObject: oExternalObject,                
                   attachments: oAttachments                      
               }             
       });             
 },
 onShareButtonPress : function() {             
                     
       this.oShareDialog.open();             
 },
 onSetSettingsPress : function() {          
        var aFiles = [];
        var fileHostUrl =  'http://localhost:8080';       
        aFiles.push(new sap.collaboration.components.fiori.sharing.attachment.Attachment(
                      "photo3.gif",  "image/gif", fileHostUrl +  "/uploads/photo3.gif" ));
                     
        var attachments = {     
               attachmentsArray: aFiles             
        };             
                     
        var object = {     id: window.location.href,          
               display: new sap.m.ObjectListItem("object_item2",{         
                      title : "SO 3213",             
                      number : "10K",             
                      numberUnit : "USD",             
                      firstStatus: new sap.m.ObjectStatus({text : "New"})      
                }),          
                share:  "This is a new Sales Order"             
        };             
                     
        var externalObject = {
                     appContext:  "UDBO",
                     odataServicePath:  "/sap/opu/odata/sap/ZMCN_TEST_SERVICE_1_SRV/",
                     collection:   "TestCollection",
                     key:  "'myExtObj2'",
                             name:  "User Defined BO myExtObj2",
                             summary:  "not being used"             
        };             
                     
        this.oShareDialog.setSettings({
               object: object,
               externalObject: externalObject,
               attachments: attachments             
        }); 
}