Skip to content

Commit

Permalink
review of tutorials 10 and 11
Browse files Browse the repository at this point in the history
  • Loading branch information
thecodester committed May 3, 2024
1 parent 298dfed commit 7060036
Show file tree
Hide file tree
Showing 6 changed files with 23 additions and 46 deletions.
14 changes: 10 additions & 4 deletions tutorials/codejam-10-spa-rework/codejam-10-spa-rework.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ author_name: Daniel Wroblewski
author_profile: https://github.com/thecodester
auto_validation: true
time: 10
tags: [ tutorial>beginner, sap-conversational-ai>sap-build, sap-conversational-ai>sap-build-apps, sap-conversational-ai>sap-build-process-automation]
primary_tag: sap-conversational-ai>sap-build
tags: [ tutorial>beginner, software-product>sap-build, software-product>sap-build-apps, software-product>sap-build-process-automation]
primary_tag: software-product>sap-build
---


Expand Down Expand Up @@ -52,7 +52,7 @@ Here's the flow:
### Add custom variable
The approver has a field in the approval form to add **Additional Information** when sending the request to the submitter for rework.

The problem is you want this field to be sent to the submitter, bu also returned back to the approval form so the approver knows what they asked for from the submitter. The problem is that the approval form cannot bind a field to one of its own fields.
The problem is you want this field to be sent to the submitter, but also returned back to the approval form so the approver knows what they asked for from the submitter. The problem is that the approval form cannot bind a field to one of its own fields.

To solve this, you will create a custom variable.

Expand Down Expand Up @@ -111,7 +111,11 @@ You need to modify the approval form to enable the approver to indicate that the
### Add condition
Now you need to check whether the approver enabled rework. For this, you add a condition step.

1. Under **Reject** under the approval form, click the plus sign, **+**, and select **Controls and Events > Condition**.
1. Go back to the tab with your process.

Under **Reject** under the approval form, click the plus sign, **+**, and select **Controls and Events > Condition**.

>You may need to expand the approval form.
![Condition](condition1.png)

Expand All @@ -121,6 +125,8 @@ Now you need to check whether the approver enabled rework. For this, you add a c

2. In the side panel, change the name to `Rework?`.

![Rework condition](rework-condition.png)

3. Click **Open Condition Editor**.

4. Click in the first field, and under **Approval Form**, select **Rework**.
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tutorials/codejam-11-scan-barcode/backhome.png
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.
55 changes: 13 additions & 42 deletions tutorials/codejam-11-scan-barcode/codejam-11-scan-barcode.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,7 @@ One of the best things about SAP Build Apps is that you can easily enable basic

In this tutorial, you will let you scan a barcode in order to select a product, instead of having to select from the list on the home page.

>**IMPORTANT:** Currently, it is not possible to get the current user when running the app on a mobile device (this is expected to be enabled in Q1 of 2024, but no guarantees). In the app, you use the current user's email to identify the user and indicate which order's in the CAP service belong to the current user.

>In order to enable our scenario to work on mobile, you will change the way you identify the current user.



Expand All @@ -53,48 +51,15 @@ To get and set up the SAP Build Apps Mobile Preview App, watch and follow along



### Change customer logic
Because the mobile preview does not yet support getting user information, you will select a string and hardcode it as your user ID.

1. Go to the **Home page**, and toggle to **Variables**.

2. Create an app variable called `currentUser`.

Set its **Variable value type** to **Text**.

Set it's **Initial value** to some unique value, like your email address or some GUD (or you can create a GUID from some online generator, like [this one](https://guidgenerator.com/)).

![Current user](currentuser.png)

3. Open the logic canvas.

4. Click on the **Get record collection**, and in the **Filter condition**, change the binding for **customer** condition.

![Get record collection](currentUser2.png)

Set it to **Data and Variables > App variable > current user**.

![New filter](currentUser3.png)

5. Click the **Create record**, and in the **Record** property.

![Create record](currentUser4.png)

Change the formula binding to the following formula.
### Add UI for barcode scanning
1. Go to the home page.

```JavaScript
{customer: appVars.currentUser, status: "CART"}
```

6. Click **Save** (upper right).




Make sure you are toggled to **View**.


### Add UI for barcode scanning
1. Toggle back to **View**.
![Back home](backhome.png)

2. Right now, you have a title component.

Expand All @@ -108,6 +73,8 @@ Because the mobile preview does not yet support getting user information, you wi

Move the existing title component into Cell #1.

![Move title](barcode-movetitle.png)

In Cell #2, add a container, and in the container add a text and icon component.

The UI should look like this:
Expand Down Expand Up @@ -150,11 +117,13 @@ Because the mobile preview does not yet support getting user information, you wi

- In the **Layout** tab, in the **Layout** section, change **Text align** to **right**.

6. Select the icon component (in Cell #2), and set the following.
6. Select the icon component (the star in Cell #2), and set the following.

- Under **Properties**, in the **Icon** property, click **star** and enter `barcode` in the search.
- Under **Properties**, in the **Icon** property, click the word **star**.

Click the barcode symbol.
![Select star](selectstar.png)

Enter `barcode` in the search, and click the barcode symbol.

![Icon](1-icon-1.png)

Expand Down Expand Up @@ -188,6 +157,8 @@ Now lets create the logic for handling the tap of the barcode icon.
>- If the value is a product number and in our list of products – held in our data variable – then you navigate to the product details page.
>
>- If the value is not a product, you just alert the user.
>
>**IMPORTANT:** You must connect the top output of he QR code flow function with the If condition flow function.
3. For the **If condition** flow function, set the **Condition** to the following formula:

Expand Down
Binary file added tutorials/codejam-11-scan-barcode/selectstar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7060036

Please sign in to comment.