How to design my SAPUI5 application?

[Former Member]

Hi there,

I'm new to SAPUI5 and I'm currently building my first application.

It should be used to approve requests (access to shared folders/mailboxes/applications etc.) created in SAP BPM.

Currently the UI is based on WDJ and I'm replacing it with SAPUI5.

The application should display the following data:

• Requester details (first/last name, personnel number, company)
• Request data: This depends on the request type, because for each request type different fields are filled
• Initiator: This information is only available if the request has been started 'on behalf' of somebody else

The application should provide two buttons: "Approve" and "Decline".

If the user declines a request, a reason has to be entered.

Only single requests can be processed, so a approver will open each request separately.

This is how the WDJ application looks like (here it shows an application access request):

The new application should use sap.m library, because a main requirement is the ability to run on mobile devices.

I've had a look at the blog, but I'm not sure if that's applicable for my requirements.

To all SAPUI5 experts out there: How would you design this application?

Which layout elements would you use?

Does it make sense to build a Fiori-like app for this scenario?

Thanks in advance!

Best regards,

Thorsten.

[Qualiture · Accepted solution]

Hi,

Have a look at the SimpleForm, it should give your roughly the same look and feel as your current application

[Former Member · Accepted solution]

Thanks, Robin.

But is the simple form also a good choice for applications running on mobile devices?

The application should be usable on desktop PCs and tables/mobile phones.

[jmoors · Accepted solution]

Yes, the simple form is responsive and can adjust to the screen size.

Regards,

Jason

[Qualiture · Accepted solution]

Hi Thorsten,

Sure, just open one of the SimpleForm examples and resize your browser; you'll see it nicely adapts to really small screen sizes too

[Former Member · Accepted solution]

Thanks!

But instead of SimpleForm I could also use sap.m.Page for the main layout and sap.ui.commons.Panel for the various details (requester, initiator, request).

This would also have the advantage that I could minimize some data in the beginning.

What do you think?

[jmoors · Accepted solution]

The panel control only provides a full width container, which will expand to the width of the screen, but doesn't really provide any control regarding how the form elements are laid out.

Where as the simple form provides more granular control over the number of columns, breakpoints to display the fields differently for different resolutons.If you provide a title if will also group the elements.

Regards,

Jason

[Qualiture · Accepted solution]

Whatever suits your requirements best... With SAPUI5, nearly everything is possible

[Former Member]

Thanks guys for your answers!

I've started now to create a Form (not SimpleForm) with a Responsive Grid Layout.

For me that's better, because I can add content to the form via form containers.

It allows me to create methods like e.g. getRequester which returns me a form container that can be added to the form.

oFormContRequester = this.getRequester();
oFormContInitiator = this.getInitiator();

var oForm = new sap.ui.layout.form.Form("F1", {
     layout : oLayout1,
     formContainers : 
          [  oFormContRequester,
             oFormContInitiator ]
  });

With a SimpleForm you have to add the whole content when creating the form:

var oSimpleForm = new sap.ui.layout.form.SimpleForm(
     "sf1",
     {
     maxContainerCols: 2,
     content:[
          new sap.ui.core.Title({text:"Person"}),
          new sap.ui.commons.Label({text:"Name"}),...

Do you see that also as an advantage?

[Qualiture]

Absolutely, anything that allows for more freedom, reusability and ease of maintenance has my vote

[jmoors]

Have you had a look at the demo applications, there is an example of a Purchase order approval application?

If you plan to use the sap.m controls then it probably makes sense to use the SplitApp control with list/details view, where the list view can display the list of people to approve and then the detail view can display the information in your screenshot, with the approve/reject buttons.

https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/poa/index.html#/detail/300000001

https://sapui5.hana.ondemand.com/sdk/#demoapps.html

Regards,

Jason

[Former Member]

Thanks, Jason!

I've had a look at the "Purchase order" demo app.

But the difference to my application is the fact, that in the PO application multiple POs can be approved.

In my application users will only see a single request that they can approve or decline.

So there's not really listed data to be shown (like the PO list).

Maybe it's better to design it as done in this blog: .

What do you think?