Part 1B: Using your Custom HTML5 application as Us...

Archana · ‎2017 Oct 12

In this part of the blog, you will see how you can integrate your SAPUI5 application as Task UI in workflow.

Before we start the learning, there are few things you must know about the user task of SAP Cloud Platform Workflow.

The task associated with user-task activity in the workflow are available under the Tasks list in My Inbox application. The user interface configured for the user task is rendered as task UI when an end user opens the task in My Inbox. Application developer is, thus, given the flexibility to integrate any custom UI with the user task of workflow

This means that your existing custom application needs to be modified so that it can (a) access the task-data, (b) bind the task data with the UI elements of the application and (c) implement code for the task actions like complete, cancel etc.

Let us now learn how can you do that.

1. Open the SAP Web IDE Full-Stack.Refer section Part 1A to ensure the you open with correct URL parameter
  Note: Ensure that you have Workflow Editor feature enabled in the Web IDE.Follow the guide to do so:
  https://help.sap.com/viewer/f63bbdc234ce4211ab2cdb44564a0acd/Cloud/en-US/5e058cf1333b4e18bfa6431a52e...
2. Create a new Workflow Project if you do not have one.Follow the guide to do so:
  https://help.sap.com/viewer/f63bbdc234ce4211ab2cdb44564a0acd/Cloud/en-US/2b6375d9a80945ff852142b9543....If you already have a workflow project, then you can create a new workflow in <your project>/workflows folder
3. Click on the start event and from the speed buttons, select User Task
4. Select the User Task and configure the task from the User Properties sectionIn General section, provide the name of the task

In Details section, fill in the following details of the user interface that would be seen when the task is opened in My Inbox.

Subject
This is the name of the task that would be seen in list of tasks when this task is available in the My Inbox.

Receivers
You can give comma-separated users or a group of users who will be able to see these tasks in their My Inbox. This is a way to control the access of confidential information and enables the access of information to the right set of people.

User Interface
Enter the details of the SAPUI5 application that you want to show when this task is opened in My Inbox.

HTML5 App: Name of the HTML5 application [Mandatory Field]
Component URL: Location of <Component.js> in the HTML5 project.
SAPUI5 Component: SAPUI5 component name without <.component> suffix

If you have doubts, then refer Step9 in the official documentation:
https://help.sap.com/viewer/f63bbdc234ce4211ab2cdb44564a0acd/Cloud/en-US/5e058cf1333b4e18bfa6431a52e...

Note: Carefully enter the required details as this is most crucial part of the configuration, especially the Component URL which is non-mandatory field.

With this, you are done with the User Task configuration.

Click on the empty space in the editor and change the Workflow Properties as shown.This means that the subject of the workflow, when seen from Workflow Monitoring application, would pick up the FirstName and LastName fields from the workflow context

Finally, deploy the workflowNow let us see how the user task looks in the My Inbox application.

Open the Workflow Monitor App from Fiori Launchpad.If you do not know the URL, then open the Fiori Launchpad URL from the Workflow service – Overview page in the cockpit

Click on Workflow Definitions tile, and you will see your workflow

Click on Start New Instance and enter the following initial payload to start the workflow

{

"user":{

"FirstName":"Kate",

"LastName":"Beckett",

"city":"London",

"country":"United Kingdom"

}

}

Click on Show Instances button to see all the running instances of the workflow.Observe the name of the workflow. The first-name (i.e. Kate) and last-name (i.e. Beckett) is picked from the initial payload that is being sent while starting the workflow.Also notice the EXECUTION LOG, you see that a new task is created in MyInbox of list of recipients

Logon to the My Inbox with the recipient username and password.You can find the tile of MyInbox app in the Fiori Launchpad URL seen in the workflow overview page (-in SAP Cloud Platform cockpit-)

Open MyInbox and click on the task

But why did the context data did not get loaded?

Let us now see how to update the user interface to show the task data and workflow context in Part 1C: Working with Task APIs in your Custom HTML5 application

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

Related Blogs on Cloud Foundry Environment

how to start workflow from custom application

how to add start workflow custom UI as a tile in Portal Fiori Launchpad,

how to use custom task UI as user task in your workflow

how to call external service in the custom task UI

dhruv_shah3 · ‎2017 Oct 15

Hi Archana,

Nice Bog. I am trying to do this however getting error while deploying the Workflow.

Error says:"User does not have sufficient Privileges"

Category: Deployment Error.

I have assigned WorkflowDeveloper and WorkflowAdmin role to my user id in HCP account.

Still i am getting error while deployment, is there any other specific role required?

Regards,

Dhruv

Archana · ‎2017 Oct 15

Hello Dhruv,

You have required permissions for Workflow service. Can you check if you have the Developer role at platform level. For that, open the Members tab in SAP Cloud Platform cockpit and ensure that you have Developer role assigned to you.

Regards,
Archana

dhruv_shah3 · ‎2017 Oct 18

Hello Archana,

Thanks, I found the Members Tab

Regards,

Dhruv

Archana · ‎2017 Oct 20

Hello Dhruv,

If you are using trial account then you already have the suggested roles and it should work.I actually have only WorkflowDeveloper role and still the deployment works. The permission take sometime to get activated. Wait for sometime after you change the roles and then try deploying again - it should work. Can you confirm if you still have the problem.

Former Member · ‎2017 Nov 10

Hi Archana,when I deploy my workflow, I got the error:

Error:Mandatory attribute(s) 'sourceRef' on element 'SequenceFlow1' not available. Make sure that it has been provided.

Category: Deployment Error.

I have assigned WorkflowDeveloper and WorkflowAdmin role to my user id ,and I have done all the steps that are same with your guide,I don't know what to cause this error,can you help me?

Archana · ‎2017 Nov 10

Hello,

You seem to have a Sequence Flow that is not connected to the StartEvent or you may also have 2 start events in your workflow model. There will a circular icon on top right of your workflow editor, click that icon - to see if you have any unconnected nodes.

This error comes when you have any unconnected tasks or events in your workflow.
If this does not solve then delete the first sequence between StartEvent and User Task and connect again. This would solve the issue.

Regards,
Archana

Former Member · ‎2017 Nov 10

Thanks for helping.

I have solved this problem.

But I got a new problem.....

After I deploy my workflow ,I can find it in Monitor Workflow and Start New Instance, then Show Instance,but I can't find it in My Inbox.

Appriaciate for your help!

Archana · ‎2017 Nov 10

This is because of the User that you have given as part of configuration of User Task in workflow. The user task is visible in MyInbox of only those users who are configured in User Task. Check the user again!

Former Member · ‎2017 Nov 10

Hi Archana,

this is the detail:

In fact, I'm trying to send this task to myself, as your reply,I have Configure these things(like the image),but I still can't see the workflow in My Inbox

Best Regards,

Junyi Li

Archana · ‎2017 Nov 10

Check if you have WorkflowParticipant role assigned.

Former Member · ‎2017 Nov 10

yes,I assigned all roles for my user

Former Member · ‎2017 Nov 10

Thank you again,

I've soluted the problem,now I can send task to myself, but can't send mask to other user. I'm sure I have assigned all the roles for him.

Best Regrads

Archana · ‎2017 Nov 10

What was the issue?

If you working on trial then you cant send task to another user and trial doesnot allow members to be added.

Former Member · ‎2017 Nov 13

Hi Archana,

tks for your patience.

Former Member · ‎2018 Feb 06

Hi Archana,

I followed your steps but in MyInbox I am not getting the Personal Information page. Can you please help me on this.

Thanks,

Bhavya

Archana · ‎2018 Feb 06

Hello Bhavya,

Cause for the same could be that you have not binded the XML elements correctly with the workflow context. Some suggestions: (a) Check the workflow context path for the personal information (b) Check the bindings in the XML view

You can share your project screenshots for me to better understand the problem

Former Member · ‎2018 Jun 13

Hello,

You could tell me if you solved the error, I'm having the same problem and I have not been able to solve it.

Thanks,

Luis

Archana · ‎2018 Jun 14

Hello Luis,
What error you getting? Also let me know at what step you getting the error ...

Former Member · ‎2018 Jun 14

Hi thank you very much for answering, I do not know in any way I was not putting webapp in the component URL.and that was the mistake.

thank very much. regards

Archana · ‎2018 Jun 14

Good that you figured that out. Let me know if you have any further queries.

hiltonsam7 · ‎2019 Feb 28

hi archana

i did everything but my form is not reflecting in MyInbox

can u plz help me in this

Archana · ‎2019 Feb 28

Hello Sam,

It is very simple actually, but just with this screenshot I could not help you as to what you could have missed. You need to send me email with how you have modelled your project and I need other implementation and trace details to help you. With the error it seems that you have not attached you task correctly with the user interface and the mapping is not done correctly. You can open your browser developer console and check for the error

Regards,
Archana

hiltonsam7 · ‎2019 Feb 28

hi archana

in console its showing me that "LOAD_FORM_DEFENITION" 404 NOT FOUND

i think its not able to map the form

Archana · ‎2019 Mar 01

If you are using Workflow Forms then you need to deploy the form as well explicitly. It seems you have used the forms in workflow and have just deployed the workflow.

https://help.sap.com/viewer/f85276c5069a429fa37d1cd352785c25/Cloud/en-US/36834f05702c45b3ad11b2ca532...

Regards,

Archana

saurabh_parikh49 · ‎2019 Mar 12

Hi Archana,

Thanks for the blog. It is quite informative.

I followed given steps and I am able to see my detail page in My Inbox app for the first time.

But when I click on Refresh icon from Master Page, it gives error and detail page changes like below:

Initially:

After Refresh from Master Page:

Error in console:

Cannot create componentcom.< path >Detailfor smart template rendering. Showing standard task in the detail screen as a fallback: Cannot read property 'task' of undefined

Can you please help.

Regards,

Saurabh

Archana · ‎2019 Mar 18

Hello Saurabh,

I think that you have not associated your user interface correctly with the workflow task because it is not able to load the task. If you are not sure, then use Create Workflow Task UI option which is not available while modelling user interface for task. You can also explore Form option

https://help.sap.com/viewer/f85276c5069a429fa37d1cd352785c25/Cloud/en-US/686fc129aa594b75aee879bde0a...

juzega10 · ‎2019 Aug 21

hola archana, tengo un problema.

pasa que he creado todo tal cual como esta en tu blog aparte, agregue la congiguracion del destino en el archivo neo-app.json, pero no se llega a visualizar la aplicacion en el workflow.

ad

junto una imagen con el error que sale, por favor una ayuda. Gracias

isaacmenafranco · ‎2019 Nov 24

I´m having the same issue as juzega10 here, the app is a very simple app that just display a text, no external services used and I´m just testing with this basic app the user task within a workflow. Any help will be appreciated

former_member485826 · ‎2020 Mar 23

Anybody know how to solve this issue?

fjrd12_ternium · ‎2020 Jul 24

¿Pudiste arreglar este tema?. A mi me sucede lo mismo

fjrd12_ternium · ‎2020 Jul 24

No. Do you fix this issue?

former_member1412 · ‎2020 Sep 26

Hi archana.shukla

Thanks for the blog. Please have a look on the issue I am facing and assist me to walk through the issue.

Any hints, documentations etc. how to debug or solve that issue? I have no clue how to find the source of the problem.

https://answers.sap.com/questions/13151375/enhanced-workflow-application-custom-task-ui-issue.html

Thanks,

Mujeeb

former_member653755 · ‎2021 Jan 27

Hi! When I define the task name ("Say Hello") in the workflow, that name appears in my inbox. Would it be possible to use i18n to internationalize the task name ("Say Hello") in other languages in my workflow?

Archana · ‎2021 Jan 27

Hello Tiago,
We support multiple language. You can read here to know what are they and how to achieve it

former_member653755 · ‎2021 Jan 27

Thanks!
this link talks about the supported languages, how should I do to apply i18n in the task subject?

thanks in advance

subject i18n

Archana · ‎2021 Jan 27

Hello Tiago,

Aah ok, Translation for workflow is in roadmap.

former_member653755 · ‎2021 Jan 27

Thanks! Was there any palliative solution to this need?

Archana · ‎2021 Feb 12

Hello tiago.moises ,
Translation is now available for selected user task properties. (read documentation for more information)

kaiumeki · ‎2021 Apr 19

Hello Archana Shukla,

Thank you very much for posting this wonderful blog.
I am trying to display UI5 application as a user task with the help of this blog. And I was able to display the user task, but I can't scroll the screen of that user task.

I would appreciate it if you could tell me what to do.

Sincerely,

Kai Umeki

former_member740837 · ‎2021 Apr 20

Hi Archana,

i tried so long adding Custom UI for User Task. For HTML5 Module it works fine but with outstanding HTML App i got this error in console:

Cannot create component......ffor smart template rendering. Showing standard task in the detail screen as a fallback: failed to load 'd../..../...../Component.js' from /...f/Component.js: 500 - Internal Server Error -

The app on its own runs without problems from Cloud.

What could cause this problem - I´m not on trial account.

BR Sudhir

Archana · ‎2021 Apr 20

Are you in Neo or CF?

Archana · ‎2021 Apr 20

Hello Kai,
you have to use right UI5 control either an App or Page and it will automatically take care of scrolling.

former_member740837 · ‎2021 Apr 20

I am on CF

Archana · ‎2021 Apr 20

Then you should use another blog: https://blogs.sap.com/2020/08/31/enhancing-custom-application-as-workflow-task-ui-in-cloud-foundry/

kajal0299 · ‎2021 Jun 17

Hey archana.shukla

Excellent blog!

Thanks for sharing!

I tried carrying out the steps in the blog but the HTML5 application is not being rendered in the My Inbox User Task. Could you please guide as to where am I going wrong.

Here's my HTML application:

This is the My Inbox:

former_member751538 · ‎2021 Jun 29

Hey archana.shukla

Excellent blog!

Thanks for sharing!

I tried carrying out the steps in the blog but the HTML5 application is not being rendered in the My Inbox User Task. Could you please guide as to where am I going wrong.

Here's my HTML application:

shivamshukla12 · ‎2021 Dec 20

punna - Same issue in my App as well ... Unable to resolve.

thanks,

Shivam

former_member758252 · ‎2022 Feb 23

Any luck guys? im also facing same issue but i can not find solution for this.

martingerritsen · ‎2023 Sep 01

I think this will be caused by the app router configuration in the mta, please check module xxx-destination-content. The destination default set for instance.

Change parameters > content > instance to subaccount and i hope your problem is fixed. The sample code is added to the MTA using Yeoman gen "Routing Config".

If you already deployed the application to CF, first undeploy, build and deploy again. Note that the policy for existing destinations is set to ignore. When needed change to update.

- name: FrameworkActivities-destination-content

  type: com.sap.application.content

  requires:

  - name: FrameworkActivities-destination-service

    parameters:

      content-target: true

  - name: FrameworkActivities_html_repo_host

    parameters:

      service-key:

        name: FrameworkActivities_html_repo_host-key

  - name: FrameworkActivities-auth

    parameters:

      service-key:

        name: FrameworkActivities-auth-key

  parameters:

    content:

      instance:

        destinations:

        - Name: nlsampleframework_FrameworkActivities_html_repo_host

          ServiceInstanceName: FrameworkActivities-html5-app-host-service

          ServiceKeyName: FrameworkActivities_html_repo_host-key

          sap.cloud.service: nlsampleframework

        - Authentication: OAuth2UserTokenExchange

          Name: nlsampleframework_FrameworkActivities_auth

          ServiceKeyName: FrameworkActivities-auth-key

          sap.cloud.service: nlsampleframework

        existing_destinations_policy: ignore

  build-parameters:

    no-source: true

Part 1B: Using your Custom HTML5 application as User Task in Workflow

Related Blogs on Cloud Foundry Environment

Get Your SAP HANA Idea Incubator Badge Today!

SCN Mission - SAP HANA Quiz Challenge is now retired

Share your #HANAStory and Win