Skip to content

Master #22756

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 24, 2023
Merged

Master #22756

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tutorials/appstudio-lcap-create-db-service/BAS-LCAP-Service-8-.png

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
---
parser: v2
auto_validation: true
time: 10
tags: [ tutorial>beginner, software-product>sap-fiori, software-product>sap-hana-cloud, software-product>sap-btp--cloud-foundry-environment, topic>mobile]
primary_tag: software-product>sap-business-application-studio
author_name: Raz Korn
author_profile: https://github.com/raz-korn
---

# Set Up SAP Business Application Studio for Low-Code Development in the Trial Environment
<!-- description --> SAP Business Application Studio is a development environment available on SAP Business Technology Platform (SAP BTP). This tutorial describes how to perform the onboarding steps for SAP Business Application Studio in the SAP BTP Trial environment. In addition, you learn how to create an SAP Business Application Studio dev space for low-code-based full-stack cloud application development so you can build low-code applications.

## Prerequisites
- You have an SAP BTP Trial account ([Get a Free Account on SAP BTP Trial](hcp-create-trial-account))

## You will learn
- How to set up SAP Business Application Studio in the SAP BTP Trial environment
- How to access the SAP Business Application Studio dev space manager page
- How to create an SAP Business Application Studio dev space for low-code-based full-stack cloud application development

## Intro
After completing the steps in this tutorial, you will have set up SAP Business Application Studio on the **SAP BTP Trial environment**. In addition, you will have created a dev space for low-code-based full-stack cloud application development so you can build low-code applications.

>**Please note:** For the SAP BTP Trial environment, the Low-Code Tools and the Low-Code dev space type are only available on the US East (VA) data center (us10).


>If you want to onboard and access SAP Business Application Studio in an **SAP BTP Enterprise Account** there are two options: it can be obtained through manual subscription, or by using a subscription booster. Boosters are a set of guided interactive steps that enable you to select, configure, and consume services on SAP BTP to achieve a specific technical goal. For more information about SAP BTP boosters, see [Boosters] (https://help.sap.com/viewer/65de2977205c403bbc107264b8eccf4b/Cloud/en-US/fb1b56148f834749a2bf51127421610b.html?q=btp%20booster).

>- For **manual subscription** of SAP Business Application Studio in an SAP BTP Enterprise Account refer to the [Getting Started](https://help.sap.com/viewer/9d1db9835307451daa8c930fbd9ab264/Cloud/en-US/19611ddbe82f4bf2b493283e0ed602e5.html) topic of the SAP Business Application Studio Administrator Guide.
>- If you want to set up SAP Business Application Studio with the help of a **booster**, see this [blog post](https://blogs.sap.com/2022/07/22/boosting-the-low-code-experience-in-sap-business-application-studio-into-multiple-regions/).

---
### Log into SAP BTP Trial

1. Go to <https://account.hanatrial.ondemand.com> and log in to your SAP BTP cockpit.

2. You might be asked to accept the legal terms. Check the box and click **Accept**.

<!-- border -->![BTPlegalterms](BTP-Terms-.png)

### Launch SAP Business Application Studio

1. Click **SAP Business Application Studio** to launch SAP Business Application Studio.

<!-- border -->![launch sap business application studio](BTP-Access-AppStudio-.png)

>If your account was created with an error, it is recommended that you re-create your account: delete the account and then [Get a Free Account on SAP BTP Trial](hcp-create-trial-account).

2. You might be asked to accept the legal terms. Check the box and click **OK**.

<!-- border -->![legalterms](AppStudio-Terms-.png)

3. A new tab opens. If you have not created a dev space yet, the landing page for SAP Business Application Studio loads.

<!-- border -->![sap business application studio landing page](BAS-Welcome--.png)

>If you have already created a dev space, the dev space manager for SAP Business Application Studio loads. You can skip the next step.

><!-- border -->![Create Dev Space](BAS-Dev-Space-Manager-Empty-.png)

4. Click **My Dev Spaces** to open the SAP Business Application Studio dev space manager page.

<!-- border -->![sap business application studio landing page](BAS-Welcome-.png)

The **Dev space manager** for SAP Business Application Studio opens
<!-- border -->![sap business application studio dev space manager](BAS-Dev-Space-Manager-Empty-.png)

>**Bookmark this page!**

>If you create a bookmark to this page, it is easy to get back to SAP Business Application Studio later.

### Create a preconfigured dev space

>Dev spaces are like isolated environments in the cloud containing tailored tools and preinstalled runtimes per business scenario, such as SAP Fiori, SAP S/4HANA extensions, Workflow, Mobile and more. This simplifies and saves time in setting up the development environment as there is no need to install anything or upgrade, letting developers focus on their business domain, anytime, anywhere. For further information on dev spaces refer to [Dev Spaces in SAP Business Application Studio](https://help.sap.com/docs/SAP%20Business%20Application%20Studio/9d1db9835307451daa8c930fbd9ab264/6053df8bca3946f098bc9f89e49d7317.html)

1. If you have not created a dev space yet, choose **Create Dev Space** in the landing page of SAP Business Application Studio. If you have already created a dev space, choose **Create Dev Space** in the dev space manager.

>Landing page for SAP Business Application Studio:
<!-- border -->![sap business application studio landing page](BAS-CreateDevSpace.png)

<br>

>Dev space manager for SAP Business Application Studio:
<!-- border -->![Create Dev Space](BAS-Dev-Space-Manager-Empty-.png)

2. Choose a name for your dev space.

3. Choose **Low-Code-Based Full-Stack Cloud Application** as the application type.

>The **Low-Code-Based Full-Stack Cloud Application** dev space allows you to easily develop, test, build, and deploy apps using the Low Code Application Platform.

4. Choose **Create Dev Space**.

<!-- border -->![Create Dev Space](BAS-select-devspace.png)

The creation of the dev space takes a while. You see that the status for your dev space will change from **STARTING** to **RUNNING**.

<!-- border -->![Create Dev Space](BAS-Dev-Space-Starting-.png)

5. Once the dev space is running, click the dev space name to open it.


<br>


Well done!

With this, you have successfully completed the setup of SAP Business Application Studio and created a Low-Code-Based Full-Stack Cloud Application dev space.

---
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
parser: v2
auto_validation: true
time: 15
tags: [ tutorial>beginner, topic>mobile, software-product>sap-btp--cloud-foundry-environment, software-product>sap-fiori, software-product>sap-hana-cloud, tutorial>license, tutorial>free-tier]
tags: [ tutorial>beginner, topic>mobile, software-product>sap-btp--cloud-foundry-environment, software-product>sap-fiori, software-product>sap-hana-cloud]
primary_tag: software-product>sap-business-application-studio
author_name: Raz Korn
author_profile: https://github.com/raz-korn
Expand All @@ -12,7 +12,7 @@ author_profile: https://github.com/raz-korn
<!-- description --> Create a responsive application (user interface) that connects to your data through a service you previously created, using low-code capabilities of SAP Business Application Studio.

## Prerequisites
- You have access to your Application Development Lobby.
- You have created a data model and exposed it as a service. (See [Create a Data Model and Expose It as a Service](appstudio-lcap-create-db-service))

## You will learn
- How to create a responsive application for a service
Expand Down Expand Up @@ -42,7 +42,7 @@ author_profile: https://github.com/raz-korn

<!-- border -->![bas lcap launch create ui wizard - ui application type](BAS-LCAP-Add-UI-Responsive-3-.png)

4. For **UI Application Template**, select **List Report Object Page**, and choose **Next**.
4. For **UI Application Template**, select **List Report Page**, and choose **Next**.

<!-- border -->![bas lcap launch create ui wizard - ui application template](BAS-LCAP-Add-UI-Responsive-4-.png)

Expand All @@ -69,7 +69,9 @@ author_profile: https://github.com/raz-korn

1. If the preview is running, choose **Stop Preview**. If the **Project Preview** tab is open, close it.

2. Choose **Preview** > **With Sample Data** to preview (test run) the app.
2. Choose **Preview** and select **Run CapitalExpenditures-1**..

<!-- border -->![bas lcap preview with sample data](BAS-LCAP-Preview.png)

3. In the **Project Preview** tab, choose the **`Capex Report`** application's tile to launch the app.

Expand All @@ -93,10 +95,10 @@ author_profile: https://github.com/raz-korn



### Customize the app: Enable initial load of data in the list page
### Customize the app - Enable initial load of data in the list page


To avoid clicking on **Go** option every time you want to present the information in the list page, in this section you'll configure the page to load the initial data as soon as it is loaded.
To avoid clicking on the **Go** option every time you want to present the information in the list page, in this section you'll configure the page to load the initial data as soon as it is loaded.

1. Close the browser tab where the **`Capex Report`** application is running.

Expand All @@ -110,7 +112,7 @@ To avoid clicking on **Go** option every time you want to present the informatio

<!-- border -->![bas lcap enable initial load - launch app](BAS-LCAP-Load-Initial-Data-3-.png)

4. Go back to the homepage of SAP Business Application Studio for low-code development, and choose the **edit** button of the **List Report** page.
4. Go back to the homepage of SAP Business Application Studio for low-code development, and choose the **Configure Page** button of the **List Report** page.

<!-- border -->![bas lcap enable initial load - launch list report edit](BAS-LCAP-Load-Initial-Data-4-.png)

Expand All @@ -122,14 +124,14 @@ To avoid clicking on **Go** option every time you want to present the informatio

<!-- border -->![bas lcap enable initial load - set table property to enabled](BAS-LCAP-Load-Initial-Data-6-.png)

7. Access application tab. Now, the data appears in the table without choosing the **Go** option.
7. Access the application tab. Now, the data appears in the table without choosing the **Go** option.

<!-- border -->![bas lcap enable initial load - table auto-reloaded](BAS-LCAP-Load-Initial-Data-7-.png)




### Customize the app: Update table column titles
### Customize the app - Update table column titles


1. In the **Page Map** editor of SAP Business Application Studio for low-code development, expand **Columns**.
Expand All @@ -144,20 +146,20 @@ To avoid clicking on **Go** option every time you want to present the informatio

<!-- border -->![bas lcap list page update columns title - change description label](BAS-LCAP-Update-Column-Titles-3-.png)

4. Repeat the previous steps to change **`total_cost`** **Label** to **Total Cost**.
4. Repeat the previous steps to change the **`total_cost`** **Label** to **Total Cost**.

<!-- border -->![bas lcap list page update columns title - change total_cost label](BAS-LCAP-Update-Column-Titles-4-.png)

5. Repeat the previous steps to change **`contractor_contractor`** **Label** to **Contractor**.
5. Repeat the previous steps to change the **`contractor_contractor`** **Label** to **Contractor**.

<!-- border -->![bas lcap list page update columns title - change contractor_contractor label](BAS-LCAP-Update-Column-Titles-5-.png)

6. you can see that in the application's tab the column titles changed as per your updates.
6. Go back to the application's tab. You can see that the column titles changed as per your updates.

<!-- border -->![bas lcap list page update columns title - preview app](BAS-LCAP-Update-Column-Titles-6-.png)


### Customize the app: Present contractor name
### Customize the app - Present contractor name


1. In the **Page Map** editor of SAP Business Application Studio for low-code development, choose **contractor/name** for the **Text** property.
Expand All @@ -168,44 +170,47 @@ To avoid clicking on **Go** option every time you want to present the informatio

<!-- border -->![bas lcap list page present contractor name - set text arrangement property](BAS-LCAP-Present-Contractor-Name-2-.png)

3. You can see that in the application's tab the ID is replaced by the name of the contractor.
3. Go back to the application's tab. You can see that the ID is replaced by the name of the contractor.

<!-- border -->![bas lcap list page present contractor name - preview app](BAS-LCAP-Present-Contractor-Name-3-.png)


### Customize the app: Change titles in the object page
### Customize the app - Change titles in the object page


1. In the application's tab select one object, for example, **Bicycles**. The column titles are not updated yet. In this step we will change the column titles for the single objects.
<!-- border -->![bas lcap object page ](BAS-LCAP-Update-Object-Page-Titles-1-1.png)

1. In the SAP Business Application Studio for low-code development, choose the **Page Map** option.
2. In the SAP Business Application Studio for low-code development, choose the **Page Map** option.

<!-- border -->![bas lcap object page change titles - show page map](BAS-LCAP-Update-Object-Page-Titles-1-.png)

2. Choose the **edit** option of the **Object Page**.
3. Choose the **edit** option of the **Object Page**.

<!-- border -->![bas lcap object page change titles - launch object page edit](BAS-LCAP-Update-Object-Page-Titles-2-.png)

3. Expand **General Information** -> **Form** -> **Fields**.
4. Expand **General Information** -> **Form** -> **Fields**.

<!-- border -->![bas lcap object page change titles - expand](BAS-LCAP-Update-Object-Page-Titles-3-.png)

4. Repeat previous steps to make the following changes to the **Fields** **Label** property.
5. Make the following changes to the **Fields** **Label** property. (Repeat the steps listed in the two previous sections.)

>Hint: Trigger the **Label** update, by pressing [ENTER] or clicking somewhere on the screen.

| Step | Parameter | Value |
|:-----|:----------|:------|
| A | description | **Description** |
| B | `total_cost` | **Total Cost** |
| C | `contractor_contracotr` | **Contractor** |
| C | `contractor_contractor` | **Contractor** |

<!-- border -->![bas lcap object page change titles - change titles](BAS-LCAP-Update-Object-Page-Titles-4-.png)

5. You can see that in the app's tab the titles are changed as per your updates.
6. Go back to the application's tab. You can see that the titles are changed as per your updates.

<!-- border -->![bas lcap object page change titles - preview app](BAS-LCAP-Update-Object-Page-Titles-5-.png)


### Customize the app: Add contractor section to the object page
### Customize the app - Add contractor section to the object page


1. In the **Page Map** editor of SAP Business Application Studio for low-code development, hover over **Sections**, and choose the **Add Sections** option.
Expand All @@ -228,12 +233,12 @@ To avoid clicking on **Go** option every time you want to present the informatio

<!-- border -->![bas lcap object page add section - move contractor between form sections](BAS-LCAP-Add-Contractor-Section-5-.png)

6. You can see that in the application's tab, a new **Contractor** section appears with the **Contractor** field.
6. Go back to the application's tab. You can see that a new **Contractors** section appears with the **Contractor** field.

<!-- border -->![bas lcap object page add section - app preview](BAS-LCAP-Add-Contractor-Section-6-.png)
<!-- border -->![bas lcap object page add section - app preview](BAS-LCAP-Add-Contractor-Section-6-.png)


### Customize the app: Change object page title
### Customize the app - Change object page title


1. In the **Page Map** editor of SAP Business Application Studio for low-code development, choose **Header**.
Expand All @@ -244,7 +249,7 @@ To avoid clicking on **Go** option every time you want to present the informatio

<!-- border -->![bas lcap object page change title - change title property](BAS-LCAP-Change-Object-Page-Title-2-.png)

3. You can see that in the application's tab the object page title changed as per your updates.
3. Go back to the application's tab. You can see that the object page title changed as per your updates.

<!-- border -->![bas lcap object page change title - app preview](BAS-LCAP-Change-Object-Page-Title-3-.png)

Expand Down