Linking a SAP Build app to Microsoft Teams

[chris_scott]

I have been investigating easy ways to demonstrate the capabilities of Looply, the SAP: Microsoft Teams integration platform.

One great feature of Looply is the lo-code / no-code approach to building Teams integrations, which makes it a fantastic tool for citizen developers.  So, since SAP Build is the cornerstone of SAP’s citizen developer offering, I decided to try to build a simple app using SAP Build, and see what steps are required for the app to trigger the creation of adaptive cards within Teams.

Like everything, as I was starting with zero knowledge of SAP Build and little knowledge of Looply, the first time involved a lot of learning.  But with a little experience of both, the integration turns out to be ridiculously simple.

Building demo cards

I didn’t set off with a specific business process to model, but instead decided to build a series of cards with hard-coded data to simply illustrate what could be possible.

So without any back-end process to worry about, I could immediately start building some sample cards within Looply.

The option to use AI to build a card proved very useful.  Basically there’s an in-built integration with ChatGPT that enables you to define your requirements and a card is generated for you.

I could then edit the generated card using the Template Designer, and then create a copy, change all the fields and re-save.

In this way I was able to create a few different example cards very quickly, as of course there was no data binding or dynamic logic to consider.

Building the Looply logic

The Looply logic takes the form of a Workflow, which is built using the Workflow Studio.

The Workflow needs to be built alongside the SAP Build app.  While not necessarily an iterative process, the key steps need to be:

• Begin the Looply Workflow build, and save to create the API ‘endpoint’
• Build the Looply app, and trigger the Looply Workflow from the app in test mode, to pass in the data model
• Complete the build of the Looply Workflow, now with visibility of the data model.

Starting the Workflow build means literally giving the workflow a name, selecting the ‘event trigger’ starting point, and hitting Save.

This generates a ‘Request URL’ that you can copy, as you will need this in your SAP Build app.

Building the SAP Build app

For the SAP Build app design I added a heading, subheading, a drop-down list and a button.

I hard-coded values in the drop-down list, giving each entry a integer value and a readable label that related to the sample cards I built in Looply.

I then created a ‘Page variable’ called ‘CardTypeText’ and bound the Selected Value of the drop-down list to the variable.

Next I needed to define my data connection to Looply.

I used the SAP Build Apps classic data entities option, and pasted in the ‘Request URL’ string from the Looply Workflow into the ‘Resource URL’ field. I also added an HTTP Header to pass in a generated Looply API key.

Under ‘Get Collection’ I added a field ‘CardType’ to the schema, and then I could save the data entity.

Now, back in the UI Canvas, I could add some logic to the button.

Here I passed in the page variable to the data connection schema.

Back in the data connection, I was ready to use the ‘RUN TEST’ option under ‘CREATE RECORD’ to try to trigger the Looply Workflow.

Completing the Looply Workflow

Back in the Looply Workflow, I can now add a ‘branch’ step based on a condition, which checks the value of the ‘CardType’ field.

Each branch has a configured value:

At the end of each branch, I trigger a different adaptive card:

I select an app already created in Looply, and for the purpose of this demo, just hard-code a recipient email address.

Then I’m good to go to test.  I can preview the app on desktop or phone:

Summary

With no development I was able to build my demo, triggering different Adaptive Cards in Teams based on a simple SAP Build app.