Profile Group

The Profile Group control is a Display control that is used to display user profiles in the form of a group.

UI Properties

  • Label : The text that is displayed which helps the user to understand the type of control it represents.

  • Toop Tip : The option to add tooltip text as a hint to the user. It is visible when you switch on the visibility toggle property.

  • Description : The option to provide a description that you can add for your control. It is visible when you switch on the visibility toggle property.

  • Caching : When the caching option is selected and if a LOOKUP formula is applied to this control, the value that the LOOKUP returns will be cached and the user will be able to see this value in the fields even when he accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and getting the latest data from the sheets is not always critical.

  • Hidden : The hidden option helps to hide the control from the user. This helps when you don’t want the user to view the control.

  • Trigger Dependents : When you Disable Trigger Dependents, it helps you to reduce or optimize the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here ..By default Trigger dependents are enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.

  • Hide on desktop: This option hides the selected control in the desktop view.

  • Hide on Mobile : This option hides the selected control in the mobile view.

  • Dynamic Height : This option dynamically increases /decreases the height of the text control based on the given content.

  • Maintain space when hidden : This option maintains the specified space between controls when a particular control is hidden. When a control is hidden the space is maintained in the preceeding control depending on the space the previous control has occupied.

Note : Hide on Mobile, Hide on Desktop, Dynamic Height and Maintain space when hidden are available in Basic Freeflow Editor only.

Properties

image7

  • IMAGE

  • Overlay by: This option helps to set the overlay distance between pictures. Units can be in following units :- px, em , vh, %. For more information about these units, refer here.

  • Alignment: This option helps to set the alignment of pictures , it can be either left, right or center.

  • Background color: This option helps you set the color of the last image* in a group.

  • Text color: This option helps you to set the text color in last image* in a group.

Note : Last image might be a userimage or just a reference of the total number of images depending on the number of images and the set limit of maximum elements.

  • BORDER

  • Size: This property helps you to set the border size of each user image

  • Color: This property helps you to set the border color of the user image.

  • Maximum elements: This property helps you to set the maximum number of images visible in the profile group. For instance if you have 5 user images, you can set the Maximum elements to 4. Three user images will be visible and the 4th image will be a blank element showing rest count of images.

  • Image column: This option helps you to select the property you want initially to be displayed in the profile group control. You can select either Image or Name of a user.

  • Fallback column: This option helps you to select the fallback property. Usually it is the opposite of the Image column. This property is used when the default selection, i.e the image column selection fails to render.

image4

How to Use the Profile Group Control

image5

From the controls option on the left sidebar, search for Profile Group, pick and drop this control on your screen.

You can use the data option to bind data to profile group Control. You can learn more about validations here. There are different ways in which you can bind data.

1.Static Data: You can add Static data as an Array of objects. Each object defines a single user. An object will have two properties, Image and Name.
Eg:-
{
“image”:“https://dronamobilepublic.s3.amazonaws.com/sampleuser.png”,
“name”:“John doe”
}

  1. Sheets: You can use data from sheets as well.
    image6

You can specify the sheet, the columns and in case you want additional filters and sorting, you can apply them. To learn more about the filters and sorting, refer here.

  1. Controls: You can select Controls>fieldname to fetch data from for the profile group control.
  2. Variables and Keywords: You can make use of the Variables and Keywords to get data for the Profile Group control.
  3. Query String: This assigns the value returned by the Query string
  4. Logged In User: This allows you to select properties for the Logged In user like UserName, UserMail that would be the data for the profile Group control
  5. Connectors: This allows you to add a Connector and select the values returned by the respective Connectors.
  6. Custom Formula: This can be used to apply formulas and use the output of those formulas to set the control. You can learn more about formulas here.

Preview

Default view
image3

Customized view
image6