opensap course Build Your Own SAP Fiori App in the Cloud 2016 Edition

Transcription

1 opensap course Build Your Own SAP Fiori App in the Cloud 2016 Edition Notes for the Development Challenge App details The app is based on a modified Master-Detail Template and all components works as shown below in the SAP Web IDE screenshots. It uses mock data from a EDMX-file with two data sets: Transports (for master data) and Tasks (for details). Mock-up and SAP Web IDE As part of the Development Challenge the original mockup from the Design Challenge is resubmitted this includes the intended navigation between screens at that point in time as well as the Study. Some minor changes have been made to this design and process during the Development Challenge either to conform to the Fiori Design Principle, to add features or to make adjustments based on the review comments. To show the result of the review process, I ve included the original mockup with comments and the final result as well as some design considerations. Story: Delivering changes (transports) at a SAP customer Segmentation Development or maintenance at SAP customers often involves the use of internal or external consultants, who perform a large part of the system setup. All of these changes needs at some point to be moved from a development system to the customer productive system. Targeting Since most companies has their own policy for releasing these changes, they normally appoint one or more consultants so-called Transport Managers - as responsible for creating, verifying and releasing these changes. The Transport Managers especially externals - are however not always present at the customer site or able to log into their systems from a laptop, when the need to release a transport with a change arise. Positioning The main issue is simply to move the transport with as little delay as possible - not to handle every aspect of a transport. There is thus a need for a simple app, where a Transport Manager internal or external, technical savvy or not at a moment s notice can track the status of a transport and release it in due time for a customer test. 1

2 Persona: The Transport Manager Meet Bob. Bob manages the delivery of standard and expedited HR-changes for BestRun Companies. Bob is an external consultation acting as team lead for a team of - mostly functional but also application consultants. Besides customizing the solution; he also has the role of coordinating and releasing the transports. He also has the transport responsibility at two other customers and can get a bit frustrated carrying three client laptops with him at all times just to check on the status. Bob is however extremely service-minded and don t mind handling work outside of regular hours to meet the customers or his colleagues needs. 2

3 User Experience Journey: Late call from consultant with urgent transport One of the scenarios Bob frequently runs through is a late call, where an urgent transport is needed for a customer. This time a payroll run has an error that needs to be fixed in a very short time Point of View: The elevator pitch Bob, our functional lead at BestRun, needs a way to handle transport requests, no matter the time or place, so he can deliver on time without sacrificing too much of his spare time. 3

4 Mock Up: The consultant app The mock-up is created in Build. The following considerations from Bobs pains are used to design the layout: A Master-Detail layout has been chosen to give Bob and other users a simple and nice overview on their mobile device, while ensuring that it will also show up nicely on a larger screen Colors are chosen from the he traffic light so non-technical users will understand the status immediately o green: ok/approve; yellow/orange needs attention and red is no go. Standard icons are used o two different icons are used to represent the transport types (a book for a customizing transport, and the wrench a workbench transport) Numbers used o Small numbers in the icon bar are used to count the tasks in each transport (to give Bob a quick idea of the number of consultants potentially involved) o Lager numbers is used to show how many tasks that still needs to be released Mockup - The desktop view of Jill s transport The picture shows the intended view after the app is opened and Jill s transport is selected. It show a green color indicating that all tasks are released and the transport itself can be released. Note that in the final app Bob must confirm the release to avoid releasing transports by mistake. 4

5 Mockup - A desktop view of unfinished transport: Here a workbench transport is selected the orange number shows that not all the tasks are released. The transport cannot be released as shown on the message in the dialog box. Note that the last step has been modified in the final app: the status is shown on-screen and the button is disabled; this reduces the number or clicks/touches that Bob needs to perform. Mockup - Mobile view with unreleased tasks: Here a customizing transport is examined; the orange number and red color indicates that the transport cannot be released. By clicking on the release button an explanation is given. Note that the last step has been modified in the final app: the status is shown on-screen and the button is disabled; this reduces the number or clicks/touches that Bob needs to perform. 5

6 Study: Experience in Build The studies are using the desktop layout. Two studies are included corresponding to the desktops screenshots above: Releasing Jill s transport e0dc25cd460bab3133 Try releasing unfinished transport c72b bab514a Design considerations: User-centric and Simple The main design consideration for the app has been to keep the following in mind: - that Bob only needs to see relevant information - that only day-to-day required supporting functionality (such as searching, filter, mail) is needed Based on the mockup, experimenting and peer-review the following modifications has been made to the template: Master Section: o Improved search functionality so Bob can search for transports and owners in the same field o Using sort, filter and group functionality to help Bob easily find the correct transports Detail Section: o Added functionality in mail-button making it easier for Bob to contact the Transport Owner o The Release Transport button is disabled when the transport cannot be released o Showing Transport Status on-screen this removes the need to click a button to view the status o Added some essential system information from the transport to the Info-tab Bob needs this to verify that he s releasing a transport to the correct system o Both tabs now show the Task list making it unnecessary to swap tabs to see the information o Modified navigation buttons so they only show up on phones Approval screen: o Added confirmation boxes, so Bob does not accidentally release a transport Coding: o Code is added to support search/filters, mail, formatting and design based on data content 6

7 SAP Web IDE App Navigation The final app SAP Web IDE - The desktop view of Jill s transport The picture shows the final app after Jill s transport is selected by Bob. Green colors are used on the task icon and release button to indicate that the transport can be released; which also can be verified on in the message strip. SAP Web IDE - A desktop view of unfinished transport In this scenario Bob wishes to follow up on all unfinished transports and perhaps mail the transport owner. Such a list could be very long, so he chooses to minimize the list by filtering on un-releasable transports. He then selects an unfinished transport to work with. The yellow message shows the reason why the transport cannot be released. 7

8 SAP Web IDE - Mobile view with unreleased tasks: This time Bob is using his phone, so he chooses to limit the list of transports by searching for the user ID of the owner. The colors and disabled release button indicates that this transport cannot be released. SAP Web IDE App Implementation The app is based on a Master-Detail Template. Three different types of implementations are shown below: 1) layout change 2) adding and formatting a button and 3) showing and controlling messages in code. Adjusting the icon tab layout: Adding a message strip Open the Detail View in Layout Editor - Drag a message strip to the Icon tab In the Properties for the Message Strip: - Make the modifications shown - The field {NumberState} originates from the data set and contains Success or Warning This sets the color of the bar to yellow or green Select the Icon Tab Bar by clicking on it - Set the selection as shown this will make the bar permanently visible to the user Example of the message strip 8

9 Release Transport Button: Adding a color coded button Create translatable text for the button: - Open i18n.properties and insert theses lines Open the Detail View in Layout Editor - Drag a button from the Action tab to the footer In the Properties for the Button (to the right): - Make sure Data Set is set to Transports, as data will be read from that table - Change the text for the Button - It now read the text from the releasebuttontext in i18n.properties - Add the shipping-status icon - Set the enabled state - This value is true/false in the data set - Set the color of the button (based on code) by typing the following text - This uses the CanBeReleased field (the same field as the enabled state) to determine a button type in code Open formatter.js and insert the following code - The function returns Accept or Reject to the field, colouring the button red or green The button with different colors and states Confirmation boxes: Showing messages in new screen and managing user decisions Open the Detail View in Layout Editor - Click on the Release Transport Button In the Event pane for the Button: - Enter function name to be called when the button is pressed Open Detail.controller.js and insert the code - This asks Bob to confirm the release - If he clicks on the OK button - an alert show the transport release - If not, an information is shown, which fades away - The box title is fetched from properties stored as shown below In reality texts should be stored in properties but is written here for clarity Store the transport information for later use: - Add this code at the end of function One of the messages as shown for confirmation 9