0

SAP CPQ Integration with SAP Appgyver (Mobile App)

 1 month ago
source link: https://blogs.sap.com/2022/05/16/sap-cpq-integration-with-sap-appgyver-mobile-app/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

SAP CPQ Integration with SAP Appgyver (Mobile App)

Dear all,

This article describes how you can build your own mobile Application(app) for all devices using SAP Appgyver..   AppGyver is a no-code platform that allows users to easily build good-looking and professional applications without having to write a single line of code.

In below example, I have a chosen SAP CPQ integrated with SAP S4HANA as backend and SAP Variant Configuration and Pricing as pricing tool. when Sales Users created a quote and added  materials to offer to the customer.  Customer will provide the offer acceptance, so Sales users can find the quote details quickly through the App on the move..

bcebc1fbdab8fcbfdcbda0f18b00c5c7.png

Get Started

Go to BTP Cockpit –  Global Account (Available in EU10 region) or platform.appgyver.com

2022-05-16_17-06-22.png

Click to Create a new Appgyver Project

2022-05-16_17-09-58.png

Create your own project name

2022-05-16_17-19-27.png

Pre-requisite

  • SAP BTP Cockpit in Global Account or platform.appgyver.com
  • SAP Appgyver ( No code – low code tool for mobile app development)
  • SAP CPQ  ( Leader in market for Configure Price and Quoting tool)
    • CPQ Rest API Endpoint Authorization
    • SAP Variant Configuration & Pricing
    • SAP CPI
    • SAP S4 HANA
  • Visual Studio Code [Local prototyping Mockups] or InvisionApp

Architecture Flow

  • Users can find the information at finger tips for the SAP CPQ Quote details
  • Users needs to install the app from Google Play Store or Apple App Store after developer builds and deploy it
  • Appgyver is tightly coupled to SAP CPQ RestAPI Endpoint to get the data as a source for the App to design.
  • Developer builds the screen with various components for users to get the information and navigate to another screen without loosing the previous screen information or not to enter again in different screen
2022-05-16_16-58-18.gif

Note : Click on above image to get full resolution


Design thinking

Usually developers think a lot about a flow for designing the app which takes several discussion and lot of changes during the time. I spent a lot of time iterating and tweaking the experience and interface design.

Before you design, discuss with your internal team about your ideas, take feedback, do a rough paper sketch about your design app .. Think about personas for Users Interaction to be well thought

I did some prototyping first with Invision App and then came out final design which made my app to finish quickly through Appgyver within 5-7hrs

E1_2EaoXIAEDAe3.jpg

TL;DR

  • Create user personas
  • Set their stories straight
  • Craft the architecture of the app
  • Design
  • Get feedback from 5-6 users
  • Develop
  • Release

Result

By the end, there is No code to develop, mainly visual thinking is must for developing the app in the way what Users should feel in one click navigating to each screen and what user needs to see the necessary information.


Data Configuration Setup

Click on DataAdd Data Resource and configure CPQ Rest API Endpoint with Authorization

2022-05-16_17-23-15.png

Follow the Steps shown in order and id is the input parameter for User’s to input in Mobile App

2022-05-16_17-24-53.png

Click next tab Test it with providing a sample id to see if your results are coming out

2022-05-16_17-27-54.png

Results are converted to JSON Schema to retrieve each node information

2022-05-16_18-58-58.png

Design Mode [ Drag-and-drop to the user interface ]

In AppGyver, creating an application is as simple as dragging one of the 50+ building blocks into the desired position and page on your screen.

1st Page – It contains Text, Icon, Button, Input field from the list of components shown in left side.

2022-05-16_17-44-50.png

2nd Page – Added List Item for Quote details to show which is similar in SAP CPQ – Line items seen in Cart

2022-05-16_17-45-28.png

Add logic to your application

By adding logic flows to the button and buildings blocks, you determine what happens within the application when this button is clicked on (e.g. redirect the user to another page, fetch data through an API call…, populate the results into different variables).

2022-05-16_18-26-40.png

Final Look is here

apple-iphone-13-mini-2021-medium.png

After testing is completed, you can deploy app to App Store for iOS Users to download and Google Play Store for Android Users.. Also you can push this other streams as well

2022-05-16_17-41-30.png

Final look in Mobile App tested in Android after uploading to Google Play store

2022-05-16_17-53-29-1.png

2021-10-24_13-59-02.jpg

References

SAP Appgyver Cloud Status

SAP CPQ API Documentation

SAP Appgyver Documentation

Post your questions anything related to SAP Appgyver





About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK