Integration of Office 365 Functionalities
Integrate the OFFICE365 and DASHLET services to offer preview and edit possibilities for Microsoft Office content files in your client application.
Introduction
The functionality provided by the OFFICE365 and DASHLET services is integrated via plug-in configuration in combination with the VIEWER Service in a library-based client. A general explanation of plug-in configurations is provided in a separate article and should be read carefully before addressing a specific use case like the integration of Office 365.
>> Extending Clients with Plug-ins
As soon as the plug-in configuration is applied, the VIEWER service provides an Office 365 preview for binary content files of Microsoft Office file types. If users have a write permission for the corresponding object, the object actions menu offers the Edit action that opens the binary content file in the edit mode in a new browser tab. Saving changes triggers the creation of a new object version.
In order to collaborate, multiple users can edit the same binary content file at the same time. The changes are saved after the last user has closed the session. Thus, only one update is applied to the binary content file.
The following information is intended to support administrators to configure the system for the Office 365 functionalities to be integrated in client applications based on our developer libraries.
Plug-in Configuration
The following plug-in configuration enables all functionalities of the Office 365 integration. It consists of an event listener (line 3), viewers (lines 4-30) and actions (lines 31-87) plug-ins. Before applying the plug-in configuration, replace <host> by your domain (line 28) and adjust the permissions according to your roles (e.g., replace the YUUVIS_DEFAULT role by a suitable custom role).
The event listener (line 3) triggers a refresh of the running client application after an update of the plug-in configuration.
In the viewers plug-in configuration section, the binary content file types are listed (lines 16-26) for which the VIEWER service should provide the preview via a specified dashlet.
In the actions plug-in configuration section, two actions are defined:
- Editing of an existing Microsoft Office content file and storing the modified file as a new version (lines 32-42).
- Opening a new Microsoft Office file, editing it and replacing the previous content file by the new one (lines 43-86). The following sub actions are specified for the Microsoft Office file types for which file creation is offered:
- Microsoft Word file (lines 55-63)
- Microsoft Excel file (lines 66-74)
- Microsoft PowerPoint file (lines 77-85)
{
"disabled": false,
"load": "() => window.addEventListener('message', (e) => { console.log(e); if(!e || !e.data || !e.data.match || !e.data.match('MessageId')) return; var data = JSON.parse(e.data); data && (data.MessageId === 'Host_PostmessageObjectUpdating' || data.MessageId === 'Host_PostmessageObjectConverted') && setTimeout(() => {var btn = api.util.$('.yuv-object-details .refresh-button'); btn && btn.click()}, 3500)})",
"viewers": [
{
"mimeType": [
"application/octet-stream"
],
"fileExtension": [
"nes"
],
"viewer": "externals/x-nes?path=${path}#locale=${lang}&direction=${direction}&theme=${theme}&accentColor=${accentColor}"
},
{
"mimeType": [
"application/msword",
"application/vnd.ms-excel",
"application/vnd.ms-powerpoint",
"application/vnd.openxmlformats-officedocument",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
"application/vnd.openxmlformats-officedocument.wordprocessingml.template",
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
"application/vnd.openxmlformats-officedocument.spreadsheetml.template",
"application/vnd.openxmlformats-officedocument.presentationml.presentation",
"application/vnd.openxmlformats-officedocument.presentationml.template",
"application/vnd.openxmlformats-officedocument.presentationml.slideshow"
],
"viewer": "() => {parameters.path = parameters.path.replace('http://localhost:4400','https://<host>'); var edit = api.session.user.hasRole('YUUVIS_DEFAULT') && !location.pathname.match('/versions/'); return '/dashlet365/?id=${id}' + (edit ? '' : '_' + dmsObject.version) + '&version=${version}&mimeType=${mimeType}&path=${path}&fileExtension=${fileExtension}&locale=${lang}&allowedExtensions=doc,docx,xls,xlsx,ppt,pptx&editMode=' + edit + '&displayName=' + api.session.user.get().firstname;}"
}
],
"actions": [
{
"id": "yuv.custom.action.office.edit.label",
"label": "yuv.custom.action.office.edit.label",
"description": "yuv.custom.action.office.edit.description",
"priority": 0,
"icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"/></svg>",
"group": "further",
"range": "SINGLE_SELECT",
"isExecutable": "(item) => item.id && api.session.user.hasRole('YUUVIS_DEFAULT') && !location.pathname.match('/versions/') && api.content.viewer() && api.content.viewer().location.pathname === '/dashlet365/'",
"run": "(selection) => api.content.viewer().postMessage(JSON.stringify({MessageId:'UI_Edit'}))"
},
{
"id": "yuv.custom.action.office.new.label",
"label": "yuv.custom.action.office.new.label",
"description": "yuv.custom.action.office.new.description",
"priority": 0,
"icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/></svg>",
"group": "further",
"range": "SINGLE_SELECT",
"isExecutable": "(item) => item.id && api.session.user.hasRole('YUUVIS_DEFAULT') && !location.pathname.match('/versions/')",
"header": "yuv.custom.action.office.new.label",
"subActionComponents": [
{
"id": "yuv.custom.action.office.word.label",
"label": "yuv.custom.action.office.word.label",
"description": "yuv.custom.action.office.word.description",
"priority": 0,
"icon": "<svg width=\"512px\" height=\"512px\" viewBox=\"-64 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm220.1-208c-5.7 0-10.6 4-11.7 9.5-20.6 97.7-20.4 95.4-21 103.5-.2-1.2-.4-2.6-.7-4.3-.8-5.1.3.2-23.6-99.5-1.3-5.4-6.1-9.2-11.7-9.2h-13.3c-5.5 0-10.3 3.8-11.7 9.1-24.4 99-24 96.2-24.8 103.7-.1-1.1-.2-2.5-.5-4.2-.7-5.2-14.1-73.3-19.1-99-1.1-5.6-6-9.7-11.8-9.7h-16.8c-7.8 0-13.5 7.3-11.7 14.8 8 32.6 26.7 109.5 33.2 136 1.3 5.4 6.1 9.1 11.7 9.1h25.2c5.5 0 10.3-3.7 11.6-9.1l17.9-71.4c1.5-6.2 2.5-12 3-17.3l2.9 17.3c.1.4 12.6 50.5 17.9 71.4 1.3 5.3 6.1 9.1 11.6 9.1h24.7c5.5 0 10.3-3.7 11.6-9.1 20.8-81.9 30.2-119 34.5-136 1.9-7.6-3.8-14.9-11.6-14.9h-15.8z\"/></svg>",
"group": "common",
"range": "SINGLE_SELECT",
"isExecutable": "(item) => item.id",
"run": "(selection) => { var item = selection[0]; var user = api.session.user.get(); var uri = '/dashlet365/?id=' + item.id + '&version=' + item.version + '&fileExtension=docx&locale=' + user.userSettings.locale + '&editMode=true&displayName=' + encodeURIComponent(user.firstname) + '&action=editnew&mimeTypeGroup=WORD&conversion=none'; var w = window.open(uri); w.addEventListener('beforeunload', () => window.postMessage(JSON.stringify({MessageId:'Host_PostmessageObjectUpdating', Values: {osid: item.id}}))); }"
},
{
"id": "yuv.custom.action.office.excel.label",
"label": "yuv.custom.action.office.excel.label",
"description": "yuv.custom.action.office.excel.description",
"priority": 0,
"icon": "<svg width=\"512px\" height=\"512px\" viewBox=\"-64 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm212-240h-28.8c-4.4 0-8.4 2.4-10.5 6.3-18 33.1-22.2 42.4-28.6 57.7-13.9-29.1-6.9-17.3-28.6-57.7-2.1-3.9-6.2-6.3-10.6-6.3H124c-9.3 0-15 10-10.4 18l46.3 78-46.3 78c-4.7 8 1.1 18 10.4 18h28.9c4.4 0 8.4-2.4 10.5-6.3 21.7-40 23-45 28.6-57.7 14.9 30.2 5.9 15.9 28.6 57.7 2.1 3.9 6.2 6.3 10.6 6.3H260c9.3 0 15-10 10.4-18L224 320c.7-1.1 30.3-50.5 46.3-78 4.7-8-1.1-18-10.3-18z\"/></svg>",
"group": "common",
"range": "SINGLE_SELECT",
"isExecutable": "(item) => item.id",
"run": "(selection) => { var item = selection[0]; var user = api.session.user.get(); var uri = '/dashlet365/?id=' + item.id + '&version=' + item.version + '&fileExtension=xlsx&locale=' + user.userSettings.locale + '&editMode=true&displayName=' + encodeURIComponent(user.firstname) + '&action=editnew&mimeTypeGroup=EXCEL&conversion=none'; var w = window.open(uri); w.addEventListener('beforeunload', () => window.postMessage(JSON.stringify({MessageId:'Host_PostmessageObjectUpdating', Values: {osid: item.id}}))); }"
},
{
"id": "yuv.custom.action.office.powerpoint.label",
"label": "yuv.custom.action.office.powerpoint.label",
"description": "yuv.custom.action.office.powerpoint.description",
"priority": 0,
"icon": "<svg width=\"512px\" height=\"512px\" viewBox=\"-64 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm72-60V236c0-6.6 5.4-12 12-12h69.2c36.7 0 62.8 27 62.8 66.3 0 74.3-68.7 66.5-95.5 66.5V404c0 6.6-5.4 12-12 12H132c-6.6 0-12-5.4-12-12zm48.5-87.4h23c7.9 0 13.9-2.4 18.1-7.2 8.5-9.8 8.4-28.5.1-37.8-4.1-4.6-9.9-7-17.4-7h-23.9v52z\"/></svg>",
"group": "common",
"range": "SINGLE_SELECT",
"isExecutable": "(item) => item.id",
"run": "(selection) => { var item = selection[0]; var user = api.session.user.get(); var uri = '/dashlet365/?id=' + item.id + '&version=' + item.version + '&fileExtension=pptx&locale=' + user.userSettings.locale + '&editMode=true&displayName=' + encodeURIComponent(user.firstname) + '&action=editnew&mimeTypeGroup=POWERPOINT&conversion=none'; var w = window.open(uri); w.addEventListener('beforeunload', () => window.postMessage(JSON.stringify({MessageId:'Host_PostmessageObjectUpdating', Values: {osid: item.id}}))); }"
}
]
}
}