Skip to Content
Author's profile photo Archana Shukla

Part 1A: Build your Custom HTML5 application in SAP WebIDE for Workflow

Most of the developers who want to use workflow in their cloud applications always have this larger question as: “how can I integrate my scenario specific user interface as task UI in workflow?

In this blog, I will show you how to make your custom HTML5 application integrated with User Task in workflow. For that, I am assuming that you already have an SAPUI5 application which is running standalone.



Part 1A is for the readers who do not have any HTML5 application to be used as user task in workflow. You can skip Part1A if you already have a custom application.

We start with creating an easy “hello world” SAPUI application first.

  1. Open SAP Cloud Platform cockpit and go to Services
  2. Search for SAP Web IDE Full-Stack service
  3. Click on the tile to navigate into the service
  4. If the service is not enabled, then click on Enabled button and wait for service to be enabled
  5. Click on the link Go to Service link to open the Web IDE in browserNote: Due to recent updates with the Wed IDE you need to open the URL with parameter “sap-ide-external=true”. If you do not do that then it assumes that you are Fiori developer and the application your building must go through regular release build process.For example: 
  6. Right click on the File –> New –> Project from Template
  7. Select SAPUI5 Application template
  8. Click Next and all the required details as project name, namespace and view name
  9. Finally, click Finish to see the project created in the workspace.Note: Due to recent updates from Web IDE, you might see new build files created Gruntfile.js and package.json

  10. For ease of the explanation, I have built a simple application on “Hello World” which will show a user information like first name, last name and address. For that, I changed view.xml as shown
  11. Once you have finished building the view, right-click on the project and select option:
    Deploy –> Deploy to SAP Cloud Platform
  12. Now you can open the cockpit and find the application URL
  13. Click on the Application URL to open the application and you will the personal information of a user

You have now finished creating a simple application which we will integrate as Task UI inPart1B: Using your Custom HTML5 application as User Task in Workflow of the blog series

Previous Blogs
Understanding Custom UI Integration with SAP Cloud Platform Workflow
Part1A: Build your Custom HTML5 application in SAP WebIDE for Workflow

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Johannes Bacher
      Johannes Bacher

      Hi Archana,

      excellent - thank you for this blog ! I will now go on to part 1B and hope i get my first SCP workflow running! impossible without contributions like this !


      Author's profile photo Christian Breitsprecher
      Christian Breitsprecher

      Hi Archana,

      When having a project containing of Workflows and UIs, is it suggested to move them into seperate git repositories or to have one common git repository (workflows and UIs) for the whole project?

      We have tried to have everything in one repository but it seems, that you have no direct deployment option anymore in that case for the individual UIs, the only deploy option would be on project level.

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Hello Christian,

      It is recommended to have different projects for SAPUI5 application and Workflows. Reason is: Both Workflow project and SAPUI5 project have their respective project natures and because of which you cannot create a workflow inside SAPUI5 application project or vice versa.

      The deployment also differs for the project and workflow. If you want to deploy the SAPUI5 application then you need to select the project - which would then first build the project (which creates a hidden dist folder) and then deploys it to SAP Cloud Platform but to deploy the workflow you need to select the workflow and deploy.

      Hope that helps.

      Author's profile photo Alexandra-Roxana Ciobotea
      Alexandra-Roxana Ciobotea

      Hello Archana,
      Great posts regarding Workflow, very useful!
      I have a question that maybe you know the answer to - do you know if it is possible to display a certain view/a certain route from the UI5 application as workflow task UI? (
      Context - I already have a UI5 application and i want to display a certain view (which is not the root view) as task UI in the workflow. Or is it recommended to build a separate application with the sole purpose to use it as task UI?

      Author's profile photo Madeleine Zeng
      Madeleine Zeng

      Hi Archana Shukla ,


      Thank you for the sharing, it's extremely useful~

      And could you please kindly let me know if it's possible to integrate React/Vue application with SCP workflow other than UI5 application?

      Thanks&Best Regards,


      Author's profile photo Christian Loos
      Christian Loos

      Hi Madeleine,

      Yes, you use the workflow service in a "headless" mode and integrate with your UIs via the REST APIs.
      However, usage of My Inbox is only possible with SAPUI5 task UIs.



      Author's profile photo Karla Cecilia Cantu Facio
      Karla Cecilia Cantu Facio

      Hi Archana!

      Very useful infromation! Thanks.