Skip to Content

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

You must be Logged on to comment or reply to a post.
  • 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 !


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

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

  • 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,


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