There’s a very natural synthesis among SAP Fiori, Google for Work, and Mindset. Fiori streamlines business processes into a simple, beautiful UX. Google for Work gives its customers access to the mighty Google cloud with easy-to-use configuration that simplifies enterprise productivity. At Mindset, we focus on making ERP simple, mobile, and beautiful.I’m seeing a pattern here, and I’m not alone. SAP and Google are seeing the same pattern, and announced collaborative work with us (and others) at SAPPHIRE..
With simplification in mind, we met with experts from both teams to bring our unique expertise to bear in joining Google for Work with Fiori. After some brainstorming, design sessions, and late-night head-scratching, we came up with a pretty cool approach to bring them together.
We started with two of the most powerful pieces of the Google ecosystem: Drive and Calendar. Examining how they work and where they could apply to Fiori, we enhanced the Create Sales Order app with flexible, programmable controls. You can attach a file from Drive right to the sales order that you’re creating – without leaving the application. You can also create a Calendar reminder for the requested delivery date – again, without leaving the application. By leveraging the programmable model for UI5 and new tools in SAP to quickly generate OAuth 2.0 connections to web services, we went from idea to working demo in a matter of days. Check out an Android tablet video, and a Macbook video.
Three distinct technologies played a role in putting this all together. SAPUI5 provides the foundation for user interaction, SAP Gateway governs the connection between UI5 and Google APIs, and Google’s cloud APIs handle Drive and Calendar. Here’s some good stuff to know about what we did with these technologies.
SAP UI5
UI5 provides a nice clean hook into extending its controls: the extend() method. (Check out this SCN blog post about using it.) Our work adds the ability to actually create a Google Calendar appointment by making some new properties available on the DatePicker, including a placeholder for the title of the event, a placeholder for the body of the event, and a service URL that points to a Gateway service that can do the Calendar creation (more on that later).The cool thing here is that the component interacts with a separate service entirely than the rest of the application. This is actually a pretty good model for making apps that mash up lots of varied cloud services.
Along with the Calendar control extension, we created a very cool attachment extension that allows you to choose/upload files from Google Drive onto the screen – and when the SO is created actually into the SO itself. This extension is really neat, because it actually presents the Google Picker UI to the user, so you can interact with your Google Drive (or load local files into Drive) from a Google-powered tool.
We also have an extended table control that allows you to remove files you’ve previously added from Drive, as well as change the description of the file that will be stored in SAP on the SO.
Finally, we added some logic in the SO review cart controller.js file. This allows us to listen to the SO creation service to see if we actually had a SO created, and then we can inject the documents we uploaded right into that SO. These attachments are available anywhere you use Document Management System attachments.
SAP Gateway and Google APIs
- In SAP, after you’ve configured things per the document, make sure to also set up an additional piece in the OA2C_CONFIG configuration.
- In SICF, edit node /default_host/sap/bc/webdynpro/sap/oa2c_config
- Click on the “Error pages” tab and set a couple settings in the logon: Protocol to “Do Not Switch”, and check “Do Not Display Warnings”
- You may run into hard-to-troubleshoot errors and failures if this is not set up properly
- The configuration document specifies a read-only call to the Google Calendar – this is easy to change by substituting “https://www.googleapis.com/auth/calendar” for every time you see “https://www.googleapis.com/auth/calendar.readonly”
Wrap Up
Don’t get lost in the details of my specific bits and pieces here. The point I’m driving to is not a click-by-click of how to do exactly what I did…I want to set the table for further creativity and experimentation in the spaces where SAP and Google open their doors to each other.If Fiori is part of your UX strategy and Google is part of your cloud computing or productivity strategy, you don’t need to think of them as separate, un-connectable silos. Think about them in terms of where they enable you to simplify your business processes. Think about them in terms of what they enable you to do above and beyond the base products.
