Photo
The Photo component allows you to configure and customize a camera feature for your screen. To insert a Photo component in the screen, go to the Left Panel in the Visual Builder. Go through the list of components to find the Photo component or click the search bar and type its name. Then, drag and drop the component into the canvas and configure its attributes in the right panel.Building Tabs and Left Panel
Important
The Photo component can only be used in mobile apps (both for Android and iOS devices).
Attributes
In the right panel, you can configure different attributes to customize the component. Refer to the sections below to learn more.Right Panel
Design
In the Design tab, you can configure the selected component's basic information and the attributes that determine how the component will look like in the app. Refer to the sections below to learn more.
In this section, you fill in the selected component's basic details and alignment and size attributes. This section is available for every component dragged into the canvas. To learn more, read Design.
In this section, you can set the style of one or more borders of your component.
To set all the borders of the component, click the chain link icon in the middle of the square. The chain appears unbroken and all the inner borders of the square turn blue.
To configure the attributes of borders individually, click the desired border of the square icon; the border selected turns blue and the chain link icon appears broken. Remember to configure attributes for each border you want to customize.
Then, you must set the color and width of the border or borders you want to configure. Refer to the table below to learn more.
Color | Border color. To set the color, click the field and type a hex code or click the rounded-edges square icon to open the color picker. In the color picker, select a color or enter the hexa or rgba color code. |
Width | Border width. Type a number to set the width. To change the unit of measurement, click the ellipsis (three dots) and select an option from the drop-down menu. |
In this section, you can configure the radius to define the roundness of the component's corners.
By default, all the component's corners appear selected. The chain appears unbroken and the dots representing each corner of the square turn blue. If you use this option, the same attributes will be applied to all corners.
To configure the attributes of corners individually, click the desired corner of the square icon; the dot in the selected corner turns blue. Remember to configure attributes for each corner you want to customize.
To increase or decrease the radius size of the borders or a specific border, type the value in the Radius field. To change the unit of measurement, click the unit of measurement selected (blue-colored text) and choose an option from the drop-down menu.
To change the unit of measurement, click the unit of measurement selected (blue-colored text) and choose an option from the drop-down menu.
In this section, you can set the orientation of the camera. Refer to the table below to learn more.
Vertical | Click to set the camera in portrait mode (vertically oriented). |
Horizontal | Click to set the camera in landscape mode (horizontally oriented). |
Flexible | Click to set the camera so that it takes a horizontal or vertical orientation depending on how the user holds the device. If the app user holds the device in vertical position, the camera will be set in vertical orientation and if the app user holds the device in horizontal position, the camera will be set in horizontal orientation. |
In this section, you can select the size of the photos to be taken with the camera. Click the desired size. The options available are: Small (200 KB), Medium (400 KB), Large (2 GB) and Original.
In this section, you can select the camera to be used when taking photos. The options available are: Front and Rear.
In this section, you can select the camera flash mode to be used when taking the photos. The options available are: On, Off and Auto.
In this section, you configure basic attributes of the component. Refer to the table below to learn more.
Source Name | Identification name given to the component so it can then be invoked from another component. To set a name, click the field and type it. |
Available Photo Preview | Attribute that defines whether the photo taken can be previewed in the app. Click the arrow and choose a value from the drop-down menu. Select true so that the photo can be previewed or false so that it cannot be previewed. |
Visible | Attribute that defines whether the component is visible in the app. Click the arrow and choose an option from the drop-down menu. Select true so that the component is visible in the app or false so that it is not visible. |
Important For Accessibility | Attribute that defines whether the screen reader reads or ignores the value defined in the Accessibility Text attribute of the component. Click the arrow and select an option from the drop-down menu. Choose true so that the screen reader reads the component or false so that the screen reader does not read the component. The default value is false. |
Accessibility Text | Alternative text. Add a short text to describe the component to users who may not be able to see it. The text will be read by iOS Voice Over or Android Talk Back. You can also add the accessibility text to the translations dictionary or select an existing translation if there are languages selected in your context settings.TranslationsSettings |
In this section, you can configure the size and position attributes of the component. Refer to the table below to learn more.
Position Type | Click the arrow and select a type from the drop-down menu. Refer to the table below to learn more about the options available.
|
In this section, you can define the order of the components within the screen. Refer to the table below to learn more.
Z-Index | Property that defines the components' position order. If several components overlap, components with a higher Z-index will be placed over those with a lower index. This field is filled in automatically. |
Actions
In the Actions tab, you can set animations for the components in your app's screen and determine how the user invokes effects and triggers actions while interacting with the app. Refer to the sections below to learn more.
In this section, you can set events or actions on the component that will be triggered by other certain actions. The only action available for configuration is On Successful, which involves setting an event after a photo is taken successfully.
To set the event or action, type the action to be triggered in the On Successful field or click the vertical three-dot icon. The Create new link window opens. Click the down arrow and select one of the link types available in the drop-down menu: View, SW States, Process, Lambda, Pop Up, Toggle, Event, Link, Mail, Module Screen or Interface Message. A new drop-down menu appears. Click the down arrow and select the action or event within the selected type. Then, fill in the parameters applicable to the option selected. Once you configure the required parameters, click Accept.Instancing a Screen-type Module
In this section, you can set different effects on the component's attributes and the animations through which the effects take place. First, you must select the attributes for which you want to set effects. Refer to the table below to learn more.
Alpha | Component’s transparency or opacity. Enter the value to set the initial opacity of the component before the animation is executed. The value can range from 0 to 1, considering 1 as the value that grants the highest level of transparency. |
Scale | Component's dimension. Enter the value to set the initial scale of the component before the animation is executed. By default, the scale value is 1, which equals the component’s original size. The value can be any number starting on 1. |
Then, you configure the animation through which the effects previously defined will be executed. Refer to the table below to learn more about the animations available.
On Load Effect | Animation executed immediately after the screen loads. |
On Call Effect | Animation executed upon invoking it through a message. |
In all cases, you can set the animation's code or configure it with the Animation Editor. To configure the animation, click </> and then click on the text field to start typing the code or click the vertical three-dot icon to open the Animation Editor. Refer to Actions to learn how to use the editor.
In this section, you can set advanced attributes related to the animation of the component. Refer to the table below to learn more.
Auto dump | Token where the photo taken with the camera will be stored. To set a token, click the field and enter the token number. |
Advanced
In the Advanced tab, you can configure advanced attributes for the component. The Photo component has no attributes to be configured in this tab.Advanced