Fiori, Meet Google

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 ...

Contact us

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

We set it up so that Gateway would communicate directly with the Google APIs, so as not to interrupt the user experience. This involved work with SAP configuration, Google API configuration, and ABAP.
SAP and Google configuration is documented here. This document can be followed closely for most points, with a few caveats below for our specific work. You will need a Google for Work account set up and the ability to create projects in the Google Developers Console to set up the Google configuration.
A couple helpful points here:

 

  • 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”
I’ll spare you, dear readers, a line-by-line review of every single line of code we put together for this demo. Just note that the code provided in the configuration example document is a very good start. If you want more information, reach out to me using our contact page.

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.

Think about them in terms of making something new.
Paul J. Modderman

Paul J. Modderman

Paul Modderman loves creating things and sharing them. He has spoken at SAP TechEd, multiple ASUG regional events, ASUG Fall Focus, Google DevFest MN, Google ISV Days, and several webinars and SAP community gatherings. Paul's writing has been featured in SAP Professional Journal, on the SAPinsider blog, and the popular Mindset blog. He believes clear communication is just as important as code, but also has serious developer chops. His tech career has spanned web applications with technologies like .NET, Java, Python, and React to SAP soutions in ABAP, OData and SAPUI5. His work integrating Google, Fiori, and Android was featured at SAP SAPPHIRE. Paul was principal technical architect on Mindset's certified solutions CloudSimple and Analytics for BW. He's an SAP Developer Hero, honored in 2017. Paul is the author of two books: Mindset Perspectives: SAP Development Tips, Tricks, and Projects, and SAPUI5 and SAP Fiori: The Psychology of UX Design. His passion for innovative application architecture and tech evangelism shines through in everything he does.

Let’s make your SAP better, together.

  • This field is for validation purposes and should be left unchanged.