Integrating the Share Dialog Component

This section provides sample code and explanations that help you to directly integrate the Share Dialog component into your custom SAP Fiori app.

The Share Dialog component is a dialog that contains the following, as shown in the figure below:

Dropdown list box in which users select attachments to share
Dropdown list box in which users select the group they wish to share to
Dropdown list box in which users select the SAP Jam folder they wish to upload the attachments to
Text box that allows users to enter any additional comments
Note We recommend that you set up the app to provide certain information by default, such as the action to perform (Share), and the business object ID from the back-end system.
Checkbox that allows users to specify that they wish to only share attachments
OK button to share the information selected
Cancel button to close the dialog

Integration Code

The sample code below demonstrates how you can integrate the following for the Share Dialog component:

Sharing attachments
Sharing business objects

The integration is done using the sap.ui.getCore().createComponent() function, which is available in the SAPUI5 library.

Var oShareDialog = sap.ui.getCore().createComponent({
	name: "sap.collaboration.components.fiori.sharing.dialog",
	id: "shareDialog",
	settings: {
		object: oDisplayObject,
		externalObject: oExternalObject,
		attachments: oAttachments
}
});

Create Component Function Properties

The function sap.ui.getCore().createComponent() enables you to create a UI component. You use this function to create the Share Dialog component, which expects a JSON object that has the following properties:

Property	Description
name	Namespace for the Share Dialog component (sap.collaboration.components.fiori.sharing.dialog )
id (optional)	Unique ID that you give to the Share Dialog component. If not provided, the framework creates an ID.
settings (optional)	JSON object that contains the following properties: object: JSON object that represents the business object you want to share externalObject (optional): JSON object that represents the business object you want to share to SAP Jam attachments (optional): JSON object that contains the attachments you want to upload to SAP Jam

Render Share Dialog

The sample code below shows the object (oDisplayObject in the sample above) and contains information needed for rendering the Share dialog and for sharing to SAP Jam:

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."
};

Display Properties

The oDisplayObject is a JSON Object that can have the following properties:

Property	Type	Description
id (optional)	sap.ui.core.URI	URL to navigate back to the same business object in your SAP Fiori application This is used to navigate back to the application from the feed entry created in SAP Jam for the business object.
display (optional)	SAPUI5 Control	SAPUI5 control to be displayed as a header in the Share dialog Recommendation Use an ObjectListItem (sap.m.ObjectListItem), as there is limited space available for the header.
share (optional)	String	Note that appears as a default value for the Comments section in the Share dialog This note is used as the body of the feed entry that is created in SAP Jam.

Attachments Code

The sample code below shows the object (oAttachments in the example above) that contains the attachments you want to upload to SAP Jam.

var aFiles = [];
aFiles.push(
new sap.collaboration.components.fiori.sharing.attachment.Attachment( 
"c&h-snowy.gif", 
"image/gif", 
"http://localhost:8080/uploads/c&h-snowy.gif"));
aFiles.push(
new sap.collaboration.components.fiori.sharing.attachment.Attachment(
		"marvel.jpg", 
"image/jpg",
"http://uspalw183.dhcp.pal.sap.corp:8080/uploads/marvel.jpg"));
		
var oAttachments = {
      	attachmentsArray: aFiles
};

Attachments Properties

The oAttachments object is a JSON object that can have only one property:

Attribute	Type	Description
attachmentsArray (optional)	Array	Array of attachments that will be uploaded to SAP Jam. Each attachment is an object (sap.collaboration.components.fiori.sharing.attachment.Attachment) where its constructor expects the following parameters: name: String that contains the file's name mimeType: String that contains the file's mime type url: String that contains the URL that points to the file

Business Object Code

The sample code below shows the code for the business object that you want to share to SAP Jam (oExternalObject in the example above):

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"
};

Business Object Properties

The oExternalObject object is a JSON object that must have the following properties:

Attribute	Type	Description
appContext	String	Application context Example CRM, SD, and so on
odataServicePath	String	Relative path to the OData Service Example /sap/opu/odata/sap/ODATA_SRV
collection	String	Name of the OData Collection Example Account, Opportunity, and so on
key	String	Identifier for a particular instance of the business object. It can be a simple ID or a compound key. Example 123, ObjectID='123', ObjectID='123',ObjectType='BUS000123', and so on
name	String	Short name of the business object Example Sales Order 123, Opportunity 123, Account 123, and so on

Further Recommendations

Only create the Share Dialog component once. Subsequently, use the setSettings function within your code if you need to display different business objects, as shown below:

var aFiles = [];
var fileHostUrl = 'http://localhost:8080';
aFiles.push(new sap.collaboration.components.fiori.sharing.attachment.Attachment( "c&h-snowy.gif", "image/gif", fileHostUrl + "/uploads/c&h-snowy.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
});