SAP App Designer 09 Beta

SAP App Designer (Beta version)Document Version: 0.9 - 2013-07-04

Designing Apps with SAP App Designer

Table of Contents1 Designing Apps with SAP App Designer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.1 Beta Version Walkthrough: Create your First Mobile App with SAP App Designer. . . . . . . . . . . . . . . . . . 41.2 Create an App. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81.3 Select a Theme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91.4 Design your App. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91.5 Preview your App. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101.6 Share your App. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101.7 Extend your App in Eclipse. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2 © 2013 SAP AG or an SAP affiliate company. All rights reserved.Designing Apps with SAP App Designer

Table of Contents

1 Designing Apps with SAP App DesignerWith SAP App Designer you can easily create mobile apps based on SAPUI5.

SAP App Designer is a browser-based tool, with which you can design your app in a WYSIWYG manner. You adapt predefined templates - for example by defining additional fields.

The beta version of SAP App Designer comes with restricted functionality. To see what it provides, follow the walkthrough: Beta Version Walkthrough: Create your First Mobile App with SAP App Designer [page 4]

Restrictions with Beta Version

RestrictionUntil further notice, SAP App Designer is only available for selected customers with restricted functionality

NoteGoogle Chrome is the only supported browser to run SAP App Designer.

SAP App Designer is delivered as beta version and you must not use it for productive applications. Be aware that there may be incompatible changes in future. Under this Agreement SAP does not provide any support services.

With this account you can create up to 10 apps, but not more.

It can be tested with the free developer account, which you can request on https://hanatrial.ondemand.com/ .

Related LinksCreate an App [page 8]You can choose between different templates that are optimized for clearly defined business tasks, such as managing leave requests for your employees.

Select a Theme [page 9]You connect to a theme repository and you can use all themes that this repository provides.

Design your App [page 9]To build your app, you add new elements, move or delete elements. You specify the layout and the display of these elements by editing their properties.

Preview your App [page 10]While working on your app, it is shown in the Design View. You use the Preview to simulate the display in different devices, such as iPhone 4S or Apple iPad2.

Share your App [page 10]You can share your app in two different ways: Either you send a link for the running app to a reviewer or you share your app in SAP App Designer to allow others to work on the app as well.

Extend your App in Eclipse [page 10]You import your app into an SAPUI5 application project in Eclipse and extend it there.

Designing Apps with SAP App DesignerDesigning Apps with SAP App Designer © 2013 SAP AG or an SAP affiliate company. All rights reserved. 3

https://hanatrial.ondemand.com/

1.1 Beta Version Walkthrough: Create your First Mobile App with SAP App DesignerThis walkthrough guides you through the functions currently available with the beta version of the SAP App Designer. More functionality will be available soon.

You want to introduce a customized, easy to use mobile application to manage leave requests in your organization. You use the My Leave Requests template, but you want to extend it with a field displaying the information whether a vacation was already taken.

Prerequisites

You've created a trial account on https://hanatrial.ondemand.com/

Open the SAP App Designer

● Open the SAP App Designer in Google's Chrome browser with the following URL: https://appdesigner-<your account name>.hanatrial.ondemand.com/ .You are logged on to your trial account and directed to the SAP App Designer's start screen.

Use Template My Leave Requests



https://hanatrial.ondemand.com/

1. Choose Template My Leave Requests2. Press Open3. To enter a name for your app, select the pencil or click on New App to enable editing.

Change the Theme

In the beta version you can choose between SAP Mobile Visual Identity and SAP Blue Crystal. For the Leave Request template you should use SAP Blue Crystal.

● To change the theme to SAP Blue Crystal, choose it from the dropdown list.

Select Elements on Different Layers

NoteElements may be nested. In this case the selection sequence is as follows:

1. If you click for the first time, a single element is selected, for example a button.2. With the next click, the element where this single element is embedded in, is selected, for example a form,

which contains this button3. With a third click, the next embedding element is selected, for example the page, which contains this form

.


Add New Elements

You can add new elements and arrange them on your page. Int the following example you'll add a small container, called VBox and other elements inside this VBox to present your users additional information on their vacations.

1. Select Request Leave page2. To add a VBox element to a page, drag it from the Palette to the page3. While dragging it, press Control to select the HBox with the Days section.4. Then drop it. It is now visible with a light blue frame.5. Add an Object Number from the palette into the VBox6. Select the VBox beneath the Object Number and set Align Items to Center.

NoteAlso for dropping elements onto a page, you have to select the layer that you want to drop your element into. When dragging an element on the page, the selection sequence starts from the highest layer and you can step to deeper layers by pressing Control. In every layer a green frame indicates the elements, you can drop your element into.

For the Request Leave page the layers are as follows:



Bind to Data

For the Leave Request app the data is already bound and when adding a new element, you can choose which data field should be displayed.

1. Select the new Object Number and open the data binding popup for the Number property.2. Choose TimeAccount as Data Entity, select the radio button for Balance Used Quantity and press OK3. Open the data binding popup again, this time for Number Unit.4. Choose TimeAccount as Data Entity, select the radio button for Time Unit Name and press OK5. Add an Object Status from the palette beneath the Object Number6. In the property panel, set the property Text to realized (in the sense of vacation that was not only booked but

really taken)


Preview Your App

When pressing Preview, the SAP App Designer presents your app in different preview modes. You can choose the preview for different iOS devices, such as Apple iPhone or iPad. You can also switch the orientation from portrait to landscape.

Save Your App

NoteBe aware that you can only save 10 apps with your trial account. But you can always delete some of your apps and then save new ones. To delete an app, choose App My apps... , select the relevant app and press Delete.

Share Your App

You can share your app with colleagues so that they can open it in the SAP App Designer and work on it. For reviewers you can also send a link only for preview. In this case the reviewer cannot edit your app.

Extend Your App in Eclipse

The apps you create with SAP App Designer are "real" SAPUI5 applications. You export your app as zip file containing the entire project structure of your app.

For more information, read this: Extend your App in Eclipse [page 10]

1.2 Create an App

You can choose between different templates that are optimized for clearly defined business tasks, such as managing leave requests for your employees.

1. To create an app, you choose one of the following options:

○ Select a template to start withYou can edit all pages and elements in a template later on.

○ Select one of your already existing apps to edit it2. Select Open to start designing your app. The Design View is opened.3. Click into the field New App and enter a name for it.



1.3 Select a Theme

You connect to a theme repository and you can use all themes that this repository provides.

For some templates the theme repository is already defined, for example for the Leave Request template you simply choose it from the dropdown list.

1. To get the list of available themes from the repository, choose Settings Add themes.... .2. Enter the link to your theme repository and confirm with OK.3. Specify the themes from the repository, you want to use.4. In the Design View choose a theme from the drop-down menu.

1.4 Design your App

To build your app, you add new elements, move or delete elements. You specify the layout and the display of these elements by editing their properties.

1. To add a new element to a page, drag and drop it from the Palette to the page.To drop an element on a deeper layer, click Ctrl while you drag the element. A green frame is shown which indicates the layer on to which the element will be dropped.

2. To move an element, also use drag and drop.3. To set the properties of an element, select it in the Design View. On the right hand side the view switches to

the Properties panel and the the properties of the respective element are displayed.Elements may be nested so that you cannot directly select the element that you want to select. In this case the selection sequence is as follows:

1. If you click for the first time, a single element is selected, for example a button2. With the next click, the element where this single element is embedded in, is selected, for example a form,

which contains this button3. With a third click, the next embedding element is selected, for example the page, which contains this form

4. To remove an element from your page, select it and press Del or drag it ouside the page.

ExampleYou want to change the title of your page.

1. To do so, select the Title in the Design View. In the Properties panel the different properties that you can specify for the Title are now displayed.

2. Enter the new title in the Text field and press Enter to confirm.

Note

If the property is bound to a data source, you have to unbind it first. To do so, press and select None.

The new title is instantly shown in the Design View.


1.5 Preview your App

While working on your app, it is shown in the Design View. You use the Preview to simulate the display in different devices, such as iPhone 4S or Apple iPad2.

To preview your app, choose one of the following options:

○ Select Preview to test your app in the built-in preview mode in SAP App Designer.○ To run the app directly on your mobile device, scan the QR code that is shown in preview mode.

1.6 Share your App

You can share your app in two different ways: Either you send a link for the running app to a reviewer or you share your app in SAP App Designer to allow others to work on the app as well.

NoteThere is no authorization check implemented yet.

1. To share your app, choose Share while your app is displayed.2. Now decide:

○ To provide reading access to your app for a reviewer, choose Share app with reviewers. The link you send to the reviewer opens the app in Preview mode.

○ To provide editing access to your app running inside the SAP App Designer, choose Share app with fellow editors.

The URL to your app is displayed.3. Choose Send using email to compose an email .

Your default e-mail application opens with a predefined new email. You can edit it before sending.

1.7 Extend your App in Eclipse

You import your app into an SAPUI5 application project in Eclipse and extend it there.

● You have installed and configured the SAPUI5 application development tools in Eclipse.

NoteIf you are not familiar with SAPUI5, read some documentation first: SAPUI5 documentation on SAP HANA Cloud

● The default browser in Eclipse is set to Google Chrome.

1. Save your app and choose App Export...



https://help.hana.ondemand.com/help/frameset.htm?e8fdaa44bb5710148368de02b150bce3.html

https://help.hana.ondemand.com/help/frameset.htm?e8fdaa44bb5710148368de02b150bce3.html

A zip file with all needed folders and files is created and saved to your local download folder.

2. In Eclipse, create an SAPUI5 application project. To do so, choose File New Other... SAPUI5 Application Development Application Project

3. In the New Application Project wizard:a) Enter a name for your app project, for example MyFirstApp.b) Choose Mobile as Target Device.c) Deselect Create Intial View and finish the wizard.

4. Empty the folder WebContent in your project structure

5. Select the folder WebContent, open the context menu and choose Import General Archive File6. Browse to your app's zip file in your local download folder and choose Open.

7. To test your app, select the project, open the context menu and choose Run Run on ServerThe app is started in Google Chrome with a URL like this: http://localhost:8080/MyFirstApp

8. Depending on the mobile device your app is supposed to run on, add one of the following URL parameters:URL Parameter Browser to be used for testing

?sap-ui-xx-fakeOS=ios Google Chrome

?sap-ui-xx-fakeOS=android Google Chrome

?sap-ui-xx-fakeOS=blackberry Google Chrome

?sap-ui-xx-fakeOS=winphone Microsoft Internet Explorer


www.sap.com/contactsap

© 2013 SAP AG or an SAP affiliate company. All rights reserved.No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice.Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. National product specifications may vary.These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries.Please see http://www.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.

http://www.sap.com/contactsap

http://www.sap.com/corporate-en/legal/copyright/index.epx

http://www.sap.com/corporate-en/legal/copyright/index.epx

SAP App Designer 09 Beta

Documents

Transcript of SAP App Designer 09 Beta