Profile Control

The profile control displays a short description about a person’s information. It can be used to be displayed in dashboards, social networks and so on .

control

UI Properties

Type: This field is automatically generated depending upon the type of control used. In this case, it is a “dhq_user_details” type.

Unique Names: A Unique Name is used to uniquely identify a control in your App. In this particular control we have 4 unique names representing the different parts of the control. This is done for better customizability.

Label: Label is the text that is displayed above the profile control to tell the user which control it is and how to use it in their application.

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

Description: This Is the description that you can add for your controls. The Description would only be visible if you switch on the Show Description toggle property available below.

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 text field 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. Thus this can be a useful feature while building fast processing apps.

Hidden: This option hides the label of the text field from the view.

Trigger dependents: When you Disable Trigger Dependents, it helps you to reduce or optimise the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here .

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

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

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

Maintain space when hidden: This option maintains the specified space between controls when a particular control is hidden.

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

Properties

  • Profile Image Configuration :
    It provides you the option to specify the maximum height. By default the background colour is white, to make changes select your preferred colour and Save. By default the text colour is black,to make changes select the colour of your choice and Save.

  • Title Font
    It provides you the option to specify the size and the colour of the font for the title.It also provides you the option to specify the thickness of the font.

  • Description Font
    It provides you the option to specify the size and the colour of the font for the description. Also specify the thickness of the font.

  • Border
    It provides you the option to select the size and border colour for the image.

Bind Data Options

You can use the Bind Data options to bind data from different sources to the Profile control. There are different ways in which you can bind data to the field.

Data: This is the data that does not change over the period of time. Such data is used to assign default values in fields in your application. The static data can be based on the data type i.e. Numeric, Text, and List type data.

  • ImgUrl - Provide the url by choosing the data option for the image.

Provide the url as per your requirement. You can also choose the select images if applicable by clicking on the image icon. Select the image and Save.

  • Fallback text - When you bind the fallback text and click Save. You can see that the image disappears and FB appears in the image portion. If you provide any text in the fallback text and click Save only the first letter of the name appears.

fallback1

Note : The url should not be provided for the text to appear.

  • Name - You can provide the name as per your choice and click Save.

  • Description - You can provide the description as per your choice and click Save.

Sheets : This allows you to fetch data from a sheet and display it in the fields. Select your sheet from the list and then select the columns to be used. You can also add filters and sort data.

Controls: This allows you to get data from one of the App controls.

Variables & Keyword: This assigns the value of the variables defined in the app.

Query String: This enables you to add query string variables that you can use in your app. You would define the query string variables and then utilize the parameters in the public embedded apps and different tasks like the input task.You can have a look at how the query string is used in the article here.

LoggedIn User: You can display the properties related to the LoggedIn User like username, usermail, Admin, status, and so on. You can select a single property only . Select column and click Save .

Connectors: This allows you to add a connector and select the values returned by the respective connector. You can select multiple keys to display values.

Custom Formula: This can be used to apply formulas and store the output of those formulas. You can learn more about formulas here.

Custom javascript: This allows you to Import JS libraries and use its reference to run complex JS operations and bind data to your controls directly. Any change in the controls will trigger the re-evaluation of the JS Function.

How to Use Profile Control

Start with selecting the Profile Control from the Display section of the Controls Menu.

image1

Once you select the profile control you can view the image, title and description.Make the changes as per your requirement.

Using Profile Control

The following is an example of how the profile control will look like.