How to design my SAPUI5 application?

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 Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises 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.

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?

Similar Messages

From a Technical Architect point of view, how to design a web application?

Hi to all,
I am writing this issue here because I this question is not related on how to program, but on how to design a web application. That is, this question is not related to how to program with the technologies in J2EE, but how to use them correctly to achieve a desired outcome.
Basically I know how to develop a simple web application. I like to use SpringFramework with AcegiSecurity and Hibernate Framework to persist my data. I usually use JBoss to deploy my web applications, however I could easily use Tomcat or Jetty (Since I am not using EJB�s).
However I have no idea on how to develop (or a better word would be �design�) a website which is divided into different modules.
Usually when you develop a website, you have certain areas that are public, and other areas that are not. For example, a company would want anyone on the Internet to download information about the products they are selling, however they would only want their employees to download certain restricted information.
Personally I try to categorise this scenario in to common words; Extranet and Intranet.
But � (and here starts the confusion in my mind) should I treat these two as two projects, or as one project? The content to be displayed on the Extranet is much different then the content to be displayed on the Intranet and definitely clients should not be allowed to the Intranet.
First approach would be to treat them as the same project. This would be perfect, since if the company (one day) decides to change the layout of the website, then the design would change for both the Intranet and the Extranet version. Also the system has a common login screen, that is I would only need to have employees to have a certain Role so that they have access to the intranet, while clients would not have a certain Role and thus they would not be allowed in. But what about performance and scalability? What if the Intranet and Extranet have to be deployed on the different Hardware!?
The second approach is to threat them as two separate projects. To keep the same layout you just copy & paste the layout from one project to another. However we would not want to have two different databases to store our users, one for the employees and the other one for the clients. Therefore we would build a CAS server for authentication purposes. Both the Intranet and the Extranet would use the same CAS server to login however they could be deployed on different hardware. However what if we want to change the design. Do we really want to have to just copy and paste elements from one project to another? We all know how these things finish! �We do not have time for that � just change the Extranet and leave the Intranet as it is!�
The third approach (and this is the one I like most) is to have a single project built into different WAR files. The common elements would be placed in all WAR files. However in development you would only need to change once and the effects would show in the different war files. The problem with this approach is that the project will be very big. Also, you will still need to define configuration files for each one of them (2 Web.config, 2 Spring-Servlet.config, 2 acegi-security.config, etc).
Basically I would like something in the middle of approach 2 and approach 3! However I can identify what this approach is. Also I can not understand if there is even a better approach then these three! I always keep in mind that there can always be more then two modules (that is not only Intranet and Extranet).
Anyways, it is already too long this post. Any comments are more then welcome and appreciated.
Thanks & Regards,
Sim085

Hi to all,
First of all thanks for the interest shown and for the replies. I do know what MVC or Multi-layered design is and I develop all my websites in that way.
Basically I have read a lot of books about Domain-Driven Design. I divide my web applications into 4 layers. The first layer is the presentation layer. Then I have the Facade layer and after that I have a Service layer (Sometimes I join these two together if the web application is small enough). Finally I have the Data Access layer where lately I use Hibernate to persist my object in the database.
I do not have problems to understand how layering a web application works and why it is required. My problem is how to design and develop web applications with different concerns that use same resources. Let me give an example:
Imagine a Supermarket. The owner of the Supermarket want to sell products from the website, however he wants to also be able to insert new products from the website itself. This means that we have two different websites that make use of the same resources.
The first website is for the Supermarket clients. The clients can create an account. Then they can view products and order them. From the above description we can see that in our domain model we will have definitely an object Account and an object Product (I am not mentioning all of them). In the Data Access layer we will have repository objects that will be used to persist the Account and Products.
The second website is for the Supermarket employees. The employees still need to have an account. Also there is still a product object. This means that Account and Product objects are common to the two websites.
Also important to mention is the style (CSS). The Supermarket owner would like to have the same style for both websites.
Now I would not like to just copy & paste the objects and elements that are common to both websites into the two different projects since this would mean that I have to always repeat the changes I make in one website, inside the other one.
Having a single WAR file with both websites is not an option either because I would not like to have to deploy both websites on the same server because of performance and scalability issues.
Basically so far I have tought of putting the common elements in a Jar File which would be found on the two different servers. However I am not sure if this is the best approach.
As you can see my problem is not about layering. I know what layering is and agree with both of you on its importance.
My question is: What is the best approach to have the same resources available for different websites? This includes Class Files, CSS Files, JavaScript Files, etc.
Thanks & Regards,
Sim085

How to design multi screen application?

Hello Everybody,
I am building a BI application(AIR) that will run on desktop(resolution is not fixed) as well as on device like ipad and variety of mobile phones.
But I am having trouble in making its design cross resolution. Please suggest me a proper way to build the app flexible to fit to any screen.
Thanks in advance

When a user clicks in a row in the JTable, I want that the JTable
disappears and shows all the info of the row selected. Once my user
finish the edition of this row the will return to the jtable and will show
the information updated.A more common design would be to display a modal dialog with the row information and then update the table when the dialog is closed.

Help! How to design this mutithreading application??

Hi, Guys
I need some advise to meet following requirements. I have also posted how I have done it after the requirement. However, I am looking for better approaches, coz I think mine is not good enough. Can you please help to review it and let me what do you think from the architecture perspective?
Briefly, the requirement as follows,
The server should, upon starting up, load into memory a dictionary of synonyms words from a text file. The dictionary will be loaded in to a collection.
The client, which should run in a separate JVM, should, upon starting, enter an iterative cycle in which it repeatedly asks the end user the meaning of a word chosen at random from the dictionary. The users answer should be checked against the dictionary. A correct answer is one which matches.
The client must be as thin as possible, and must not cache dictionary contents.
If, upon attempting to retrieve a question or validate an answer, the client experiences a problem communicating with the server it should automatically recover if the server becomes available again, however the current question may be discarded in this case.
The dictionary may be huge containing hundreds of thousands of entries. It is most important that when the server is still loading the words, it be able to select random word from dictionary loaded so far and provide it as a question to client. Also, be able to check the answer returned from server is correct or not. So if the client has just restored contact with the server, there must be no noticeable delay before the first question is asked.
The server should not employ any kind of polling when determining the current size of its in-memory dictionary. You should make best use of multi-threading in order to optimise the implementation.
The server should allow large numbers of clients to connect to it simultaneously.
You may use either RMI or Sockets (of the blocking variety) to implement inter-process communication.
My answer:
For the inter-process communication, I have used RMI to implements.
The dictionary content has been stored in a concurrentHashMap.
The key of the map is a single word and the value is the list of synonyms words (List of strings).
The reason I have chose this type of collection is that it is efficient when it looks for the synonyms words for a given word.
Using concurrentHashMap allows different threads access it concurrently.
The DictionaryServer starts three separate threads
Thread 1: working on loading the dictionary
Thread 2: looping through the dictionary to set the random keyword
In this case, the dictionaryServer is available to the client to query from the beginning. There wont be a noticeable delay
when the dictionary size is getting bigger and bigger because the Thread2 LoopThread will always iterate the dictionary key
size and provides a random keyword whenever you needs. No polling of dictionary size is needed to determin the random keyword.
However, while the Thread 1 loading process is running at the same time, it might causes some delays as it consumed lots of resources.
On the client side, if the server is down, I use a separated thread to ping the server to see if it is up running. However,
personally, I dont think this is the best solution to implements this as pinging can be expensive over the network.
It would be good to have a push back from the server to tell all the clients when it starts up. But I found it is difficult to do
with RMI, maybe using JMS is easier to do.
I have send you the code if any body interested. Seems doesn't allow me to attached my zip file.
Many thanks.
ksh29

kajbj wrote:
ksh29 wrote:
kajbj wrote:
>
Sounds ok, but what do you mean by "The server should not employ any kind of polling when determining the current size of its in-memory dictionary."
Why would calling size() be bad?I think size() is bad, especially the response time with size() will increase when the size of the list increases.That is only true for a few collections. Most collections can return the size directly.
Okay, I don't know. Maybe you are right. Then how to explain "The server should not employ any kind of polling when determining the current size of its in-memory dictionary."???
I didn't write the requirements and I just got it from a interview and the answer I provided was what I submitted, however, the feedback was no good. So, I don't know what is the best answer and I don't know my understanding of the requirement is correct or not. But seems to me, following two requirement are very important,
1. The dictionary may be huge containing hundreds of thousands of entries. It is most important that when the server is still loading the words, it be able to select random word from dictionary loaded so far and provide it as a question to client. Also, be able to check the answer returned from server is correct or not. So if the client has just restored contact with the server, there must be no noticeable delay before the first question is asked.
2. "The server should not employ any kind of polling when determining the current size of its in-memory dictionary."
And that's why I didn't choose use size().
>>>
Btw. You could use something else than a List as value in the concurrent map.
On the client side, if the server is down, I use a separated thread to ping the server to see if it is up running. However,
personally, I dont think this is the best solution to implements this as pinging can be expensive over the network. Huh? Just try to reconnect in a loop, with a delay in between each attempt.That's how I did it, but this is still pulling. Is there any way to solve this from the server side?? Open to suggestions and discussions.
No there isn't. The server can't tell a client that it is available. The only thing that the client can do is to try to connect periodically.That's good then. Because that's how I thought and I just want to know if there are any other ways to do this.
Cheers,
kai

How can i design a EJB application using session Beans?

Hello,
I am designing a Find application using EJB. Here a user is prompted a search page, where he can enter the search criteria's. Then on click of submit, the query is formed at the server side depending on what criteria's were selected. Then a jdbc query is performed and the results are returned back to the user. Here no session is maintained for the users. Can anyone suggest me how to design this application using EJB. Should i use entity beans for this or session beans will suffice? Should the jdbc query be performed in the bean itself or should it be outside in a helper class? Please kindlu suggest me the design for this application...
Regards,
Subbu

Hi,
First of all, I'm unable to figure out why you need to use EJB for this scenario. You can write a helper class to frame and execute the query.
If you really want to use EJB, then I suggest you use a stateless Session Bean with transaction attribute as TX_NOT_SUPPORTED. From the session bean, you can call the helper class. But, by avoiding the session bean, you can eliminate remote calls, thus improving your performance. Also, check if the database & the db driver you are using supports sql caching.
Regards,
Raj.

How to design Flat file for loading attribute dimension in a planning application

Dear Gurus,
I have a requirement to extract attribute dimensions from an essbase application and load it to another planning application. I have a dimension called Program and two attribute dimensions Sales Manager, Accounts manager associated with Program dimension in Essbase application. I will Extract these dimensions using Essbase outline extractor. After Extracting the attribute dimensions I have to load these dimensions to planning applications using outline load utility. Kindly guide me how to design the flat file for loading attribute dimensions in planning application.
Thanks and Regards
SC

You could dig through the docs and try to figure out the file format manually, or you could do this the easy way. Simply use the Outline Load Utility to export your attribute dimension from Planning. The export file format is the same as the import file format. You might have to manually add a couple of test members to your attribute dimension so that your export file has some content. Then simply update the file you exported, and import it.
(I am assuming you have already manually created the Attribute dimension in Planning, and that you simply need to add members to it.)
Hope this helps,
- Jake

How to design and implement an application that reads a string from the ...

How to design and implement an application that reads a string from the user and prints it one character per line???

This is so trivial that it barely deserves the words "design" or "application".
You can use java.util.Scanner to get user input from the command line.
You can use String.getChars to convert a String into an array of characters.
You can use a loop to get all the characters individually.
You can use System.out.println to print data on its own line.
Good luck on your homework.

How To debug ABAP code using sapui5 application on NWBC

Hi All
I am working on NWBC with SAP_PAO_HRPROFESSIONAL_3 Role. This role contains SAPUI5 application. I am trying debug the ABAP code called while executing this application.
Please help me how to get into ABAP debugger while executing this application.
Thank you
Ujj

HI Ujj,
First thing to do is look at the role and see which UI5 application is being executed. The UI5 application will be running in the web container of NWBC, you can make it open in a standalone browser (hold down the CTRL key in NWBC and go to the Help Menu) and then turn on the debugging tools (F12) in the browser. There you will see which Gateway services are being called. You will need to set your ABAP breakpoint in the implementation of the Gateway services. Find the class in SE80.
Hth,
Simon

How to call Java method from SAPUI5 applications?

Hi Experts,
Please give me information that how can I call Java method or jars from SAPUI5 applications?
Thanks,
Nag

Hello Nag,
why do open this thread in BRM Space? I would suggest reopen this in "UI Development Toolkit for HTML5 Developer Center" Space.
Regards,
Tobias

How to make the UI5 application responsive ?

I am actually followed below blog and developed a sample application
How to create SAPUI5 application consuming Gateway service with the help of SAP NW Gateway Plug-in for Eclipse
Can any one please explain below :
1) I was getting an UI like this , but in example provided was achieved with a table like UI. May i know the reason behind this?
How can i achieve the UI as in blog?
my result
example in blog result
2) The result i achieved is not responsive. When i change the size of my browser the UI design does nt adjust itself.
How to make this responsive?

Hi,
1) The difference is because my example was based on Gateway Productivity Accelerator, Version 1.0 and yours is based on Gateway Productivity Accelerator, Version 1.1.1
below is how my index.html looks like. So the difference is because of GWPA version.
<!DOCTYPE HTML>

<html>
       <head>
   <meta content="IE=edge" http-equiv="X-UA-Compatible">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
      <script id="sap-ui-bootstrap"
       type="text/javascript"
   src="resources/sap-ui-core.js"
   data-sap-ui-theme="sap_goldreflection"
   data-sap-ui-libs="sap.ui.commons,sap.ui.ux3,sap.ui.table" >
   </script>
     <script>
                     sap.ui.localResources("test");
                     var view = sap.ui.view({id:"ID_firstview", viewName:"test.resources.firstview", type:sap.ui.core.mvc.ViewType.JS});
            view.placeAt("content");
     </script>
       </head>
       <body class="sapUiBody" role="application">
              <div id="content"></div>
       </body>
</html>
I also upgraded to new version and yes by default now it creates mobile based application in GWPA 1.1.1 whereas it was desktop based in earlier version GWPA 1.0
also blue crystal theme is loaded by loadTheme("sap_bluecrystal"); in Application.js
2) Now regarding responsiveness, you need to change mode StretchCompressMode to ShowHideMode in App.view.js
// create splitApp
              this.splitApp = new sap.m.SplitApp({
                     mode: "StretchCompressMode"
Change mode value to ShowHideMode
Regards,
Chandra

How to design a GUI Python app properly?

Hi guys. As motivation to actually learn Python, I want to carry out a fairly simple application that's been brewing in my head for months; a "game manager" that a gamer can use to keep track of the games he owns, the games he's beaten, and any specific challenges he's completed in said games.
The problem is that I can't seem to wrap my head around Python. I look through its docs to solve problems but I almost always end up lost. I come from PHP, which is supposedly sloppy, but it's also very easy to get almost anything done quickly. In my frustration, I proved that I could get more progress in 15 minutes in PHP than I had gotten in 2 hours in Python. I was right, but I know that PHP isn't the right tool for the job. I want to make an actual desktop application that relies on an sqlite db.
With my frivolous backstory out of the way, could anyone offer any enlightenment on Python? I've tried the tutorials, I've tried the docs... where can I go to learn not only how to code my app, but how to design it? Design is more important than syntax, imo, because it relies on concepts which form the foundation of whatever app you're building.
I can post an overview of how I want the app to behave, if that would help others advise me on how to build it in Python. I'd really like to pick the language up, but it's being anything but "easy to learn".

Are you sure you've read the helpful tutorial? If you can't grasp it, perhaps PHP has finally penetrated the shell of coding sense surrounding your brain and started eating. (I used to be close to that point. Now I believe Python is god.)
Oh, and never start with something as big as a full-blown graphical application. Trust me, it is never as simple as it first seems when you conceive the idea. Start with small, one-file utilities and work your way up from there. Consider downloading the full documentation so you always have a local copy.
And remember: If your code seems ugly, it probably is. There is almost always a better way in Python.
Last edited by Peasantoid (2010-02-06 05:14:43)

HOW TO DESIGN A RPD .. PLS HELP

I am new to OBI - I want to understand the methodology to design a RDP - I have gone through the ORACLE BY EXPAMPLE set avaible, it was really helpful , but still want some experts suggestion on HOW TO DESIGN THE BUSINESS AND PRESENTAION LAYER - How to create dimension etc ... would also helpful if u share some docs which has got everything explained :-) ...
Thanks in Advance for your help !!
Regards...

Hi,
Below the links are helpful for you,
Oracle BI Applications Installation and Configuration Guide
http://download.oracle.com/docs/cd/E12104_01/books/AnyInstAdm/AnyInstAdmTOC.html
Creating a Repository Using the Oracle Business Intelligence Administration Tool
http://www.oracle.com/technology/obe/obe_bi/bi_ee_1013/bi_admin/biadmin.html
Creating Interactive Dashboards and Using Oracle Business Intelligence Answers
http://www.oracle.com/technology/obe/obe_bi/bi_ee_1013/saw/saw.html
Hope its helpful for you and award points,
Thanks,
Balaa...

How to design LabVIEW programming for temperature monitoring using 4 thermocouples

Hi all.
Sorry if this seems a simple question but I really sorry for the troubles. I'm a new user with LabVIEW and currently using LabVIEW 8.6 for a final year project of mine. I’m trying to monitor the temperature reading in 4 different depth of pavement for every 1 hour interval continuously for 1 month duration. Basically I’ll be using 4 separate thermocouples type J and NI 9219 device. My problems are:
I’m not sure how to design the LabVIEW programming for my application.
How to get the temperature reading data in Excel spread sheet.
How to set the min, max and average daily temperature for each thermocouple.
Thank You.
Regards,
Amanus
Thermocouples Layout:
Solved!
Go to Solution.

Introduction to LabVIEW
Follow that link to some getting started tutorials. There should be all you need in there to get you going with both the software and hardware
- Cheers, Ed

How to design a complicated and attractive jsf pages in jdeveloper

Hi All,
I have tried to deisgn jsf pages to looking attractive. But i cannot able to achieve that and it took me more time to design little complicated.
Can anyone refer me any link or tell me how to design more complicated page.
what is the layout procedure for that.
My jdev version - 11.1.2.0.0
Thanks in advance,
SAN

san-717 wrote:
Hi All,
I have tried to deisgn jsf pages to looking attractive. But i cannot able to achieve that and it took me more time to design little complicated.
Can anyone refer me any link or tell me how to design more complicated page.
what is the layout procedure for that.Well… there's a lot to this. First, you'll have to have an idea of what should be on your page; how it is presented is ultimately a design decision, not one of layout. Once you have a design (paper sketches?), then you can proceed to start 'cutting up' your designs into larger components. Perhaps your applicaiton will have a larger page template that holds 'content' of other pages/page fragments.
(If you're coming from OAF, for example, this is a pretty big difference - in ADF page design is very flexible, and how information is presented is largely up to developers/designers. There's no single method for laying out a page.)
To add to the link above, there is also a list of 'design patterns' than can help with some common problems and ways of presenting information:
http://www.oracle.com/technetwork/topics/ux/applications/gps-1601227.html

How to design an IDOC-XI-JDBC interface

Hello Experts!
I'm looking for some guidance on how to design an interface where R/3 is sending an IDOC to XI (via IDOC Adapter Receiver), then XI transforms this data into a JDBC database INSERT action.
I want to make to make the JDBC request a SYNC interface so that I can capture the number of rows inserted into the database and do some appropriate action when the insert count returns a zero value.
Since the IDOC to XI interface is ASYNC, how do I design my link so I can redirect the JDBC response out to a different adapter?
Thanks for your help!
XI Rookie

Hi,
This will help you
/people/siva.maranani/blog/2005/05/21/jdbc-stored-procedures
/people/laxman.molugu/blog/2006/08/13/integration-with-databases-made-easy-150-part-1
Re: Idoc triggering from a transaction
Message Mapping - JDBC to IDoc
Re: JDBC - System/Application Acknowledgement
/people/michal.krawczyk2/blog/2005/09/01/xi-idoc-adapter--edidc40--demystified
Regards
Agasthuri Doss

How to design my SAPUI5 application?

Similar Messages

Maybe you are looking for