How to use SAP AppGyver’s conditional renderer in your application

[sraji2486]

Introduction

SAP Build Apps is a professional application development solution designed for anyone to quickly create apps without code regardless of role or skill level. The conditional renderer component is now available to make it easier to render different items depending on the state of your app.

Content

To begin with, I have created a new app and installed the conditional renderer from the marketplace.

Initially, I created two-page variables. One is status, and the other is variable 1.

The status variable will be assigned to the render Id that was used to toggle.

Variable 1 is used for images.

The layout can then be constructed by dragging and dropping elements from the core components, where we are switching between container 1 and container 2 using a conditional renderer.

Container 1 features a static image that will appear on the home screen, a "Take a picture" button that will activate the camera on the device, capture the image, and save it to variable 1, and also it is configured to move to container 2.

Then in container 2 where the collected image is shown, there are two more buttons: "continue" and "again". The continue button will display the compressed image and the again button will move to container 1.

Also, the render id for containers 1 and 2 are created in the properties of the conditional renderer as op1 and op2, respectively.

The status variable is set to op1 so that the app will initially display container 1.

The logic behind the "Take picture" button is explained below. Drag the take photo, set page variables to your logic builder, and bind them to the tap component.

When this button is pressed, the phone camera will open, take a picture, and then save it in variable1 and switch to container2.

To store the captured image, variable 1 is set to the output of the camera.

To go to container 2, the status is assigned with the render ID op2.

Resize/compress image is installed from the marketplace to resize the image.

The logic behind the "Continue" button is explained below. Drag the resize/compress image onto your logic builder and connect it to the tap component.

Provide the input as variable1 where the image is saved, in the source image path in the properties of the resize/compress image to resize the image. Here the image quality, maximum height and width are changed.

The logic behind the "Again" button is explained below. Drag the set page variable onto your logic builder and connect it to the tap component. When this button is pressed, it will go to the app's initial stage, i.e., container 1.

To go to container 1, the status is assigned with the render ID op1.

Finally, the application will look like this:

The gadget camera will open to snap the photo if we press the "Take picture" button.

The image will be resized after hitting the "Continue" button.

The "Again" button will take you back to the previous screen.

Conclusion

This blog post explains how to use a conditional renderer. To advance the app's development, we can download the resized image to our local storage or identify what it is using an API. You can post feedback or queries you may have about this blog in the comments. Follow the SAP Build environment for additional content.

Reference

SAP Appgyver

Conditional renderer

SAP Build