# Overview

This section provides a walkthrough of the configuration steps required to get going with the lowcodera Power App components.

{% embed url="<https://youtu.be/Ch6g_Hm-Mfg>" %}
Getting Started with lowcodera
{% endembed %}

## Prerequisites&#x20;

Before you can use our components you need to ensure you have Power App licensing in place and an active subscription to lowcodera. You also need to have the right permissions to upload the lowcodera solution packages into your environment.&#x20;

### Licenses

* [x] Active Power Apps Licensing
* [x] An active subscription to lowcodera

### Permissions

<table><thead><tr><th width="374">Role/Permission</th><th>Purpose</th></tr></thead><tbody><tr><td>Power Platform Admin </td><td>To enable Power Apps Component framework feature.</td></tr><tr><td>Environment Admin</td><td>To Import Lowcodera component packages into your Power Apps Environment.</td></tr></tbody></table>


# Download components

This section describes the steps involved in downloading your lowcodera component packages.

{% hint style="info" %}
The steps described here are designed to be performed by an **Admin** of your lowcodera service.
{% endhint %}

* Open [https://app.lowcodera.com/](https://app.lowcodera.com/account/login)
* Login with your Microsoft Work Account
* From the Left navigation, click **Downloads**.
* Lowcodera provides two components packages - UI Components and Data Visualization components. **Download** both packages.

![](/files/09D1oHKxlJ4JB4b0D3J3)

{% hint style="info" %}
You may notice multiple versions of the download packages listed. This allows you to import previous versions of lowcodera solutions if you need to.
{% endhint %}


# Installing Components

Installing the Lowcodera Component Packages.

After [downloading the lowcodera component solution packages](/getting-started/download-components#step-2-download-lowcodera-component-package), we need to install the components to your Power Apps Environment.&#x20;

To start the installation, we first to need to make sure the Power Apps Component feature is enabled on your Power Apps environment.&#x20;

## Enable Power Apps Component Feature

As a **Power Platform Admin**, you need to turn on the Power Apps Component feature.&#x20;

* Open <https://admin.powerplatform.microsoft.com/>
* Select the Power Platform Environment and click on **Settings**.&#x20;
* Expand **Product** and select **Features**.

![](/files/ep5GCXb2njg56BufwXmn)

* Make sure, **Power Apps component framework for canvas apps** is turned on. Click on **Save**.

![](/files/pK4rhWE1rCnkBTl0ec7l)

## Import Component Package Solution

Once we enable Power Apps Component feature, we need to **Import the Solution** **Package**. To import the packages, you need to have the permissions of the Environment Admin Role.

* Open <https://make.powerapps.com/>
* From the left navigation, click on Solutions and click on Import from top ribbon.

![](/files/0a81y6WALseLcfzzu8sp)

* Click on **Browse**&#x20;
* Navigate to the folder location of where you downloaded the solution packages
* Select the Lowcodera UI Components zip file
* Press **Next**.

![](/files/7bPO1ZIvt5IdfYaCKiUo)

* Click on **Import**.

![](/files/iCJb1YHH2gI6mM41591P)

* The importing process will take up to 5 Minutes. Once it is imported, you should see a success message.

![](/files/GTk6io0FcSELTEXIKHlv)

* Repeat the steps above to import the lowcodera Data Visualization solution package.&#x20;

![](/files/Ype3y7UAQIOaweXDCBSu)


# Using a component

Using a lowcodera Components in Power Apps

Having [installed lowcodera components](/getting-started/installation#import-component-package-solution) into your environment, you are now ready to make use of them in your Power Apps.&#x20;

## Adding the UI Assets Component&#x20;

{% hint style="warning" %}
The lowcodera UI assets component is a master component and is required to be present in your app to make all other lowcodera components work.
{% endhint %}

* From Power Apps studio, click on **Insert(+ Icon)** from left navigation
* Select **Get more components**.

![](/files/QYIJeRe3VK8YZ39ZWSnC)

* Click on the **Code** tab from the **Import Components** panel on the right. This will show all the Lowcodera component that are available to add to your app. You can Import them one by one based on what you need.&#x20;
* Select **Lowcodera UI Assets Component** and click on **Import**.

{% hint style="info" %}
If you are not able to see Code section, then make sure you have activated[ Power Apps Component framework feature](/getting-started/installation#enable-power-apps-component-feature).
{% endhint %}

![](/files/DudOK4StB9teGUt4WkOH)

Once we Import the component, it will appear in the following section.

![](/files/ufJHe4g6AyUkTfYySNf9)

On the first screen of your app, **add the Lowcodera UI Assets Component** into your editing Canvas

### Adding an App token

{% hint style="info" %}
**lowcodera App Tokens** are unique keys which which allow a Power App to render lowcodera components. Your lowcodera subscription comes with an allowance of app tokens. While building apps you can use a **dev token**, but this must be replaced by a **unique app token** when the Power app is run by users.&#x20;
{% endhint %}

* From the lowcodera Admin Portal menu, select **App Tokens**
* Click **Dev Token**
* Paste the copied value into the App Token Property of the UI Assets component in your app

![](/files/U5ZynW8MwlkwichnZht2)

![](/files/K3oo5J62SYz8qNgDBngh)

## Add your first Component

You can now use any other lowcodera component in your app. In this example, we will add a lowcodera button component on the screen.&#x20;

![](/files/dgkWTwwIN8D42rxa3gm3)

* Click on **Insert(+ Icon)** from left navigation
* Select **Get more components**.
* As before, from the panel on the right select **Code Components** section&#x20;
* Find and add the **Lowcodera Button Component.**
* **Drag** the lowcodera button component onto your app screen
* Begin configuring the [component properties](/ui-components-1/button#component-properties) as per your requirements,


# lowcodera App Tokens

This section describes the use of lowcodera App Tokens

## What are App Tokens?

lowcodera App Tokens are unique keys which which can be generated from the lowcodera admin portal and allow Power Apps to render lowcodera components. The app token needs to be pasted into the “token” property of the lowcodera master UI component to activate the use of all lowcodera components within an app.

## Generating App Tokens

&#x20;There two types of tokens, a Dev Token and an App Tokens.

{% embed url="<https://youtu.be/5F5S4-sW3Zw>" %}
Generating App Tokens
{% endembed %}

### Dev Tokens

You can generate a dev token and use this while you build and test your app in app studio. When running the app as an end user in Power Apps play mode, the components will not render unless a valid lowcodera App token is present for your specific Power App.

\
1\. Log in to the lowcodera Admin Portal at **app.lowcodera.com**

2\. Navigate to **App Tokens** from the main menu

3\. Click **Get Dev Token** to copy the token to your clipboard

4\. In App studio, paste the token into the **App Token property** of the lowcodera **UI Assets Component**

### **App Tokens**

When users run published apps in Power Apps Player a valid App Token is required for lowcodera components to render.

1\. Log in to the lowcodera Admin Portal at **app.lowcodera.com**

2\. Navigate to **App Tokens** from the main menu

3\. Click the **New App Token** button

4\. Fill in the details on the form:

**Description**: Enter a unique name to identify this token. Usually your Power App name.

**Power App App ID**: Copy and paste your Power App ID&#x20;

5\. Click **Save**

6\. Copy the generated token by clicking on the **copy icon** next to the token in the token list

7\. In App studio, paste the token into the **App Token property** of the lowcodera **UI Assets Component**

8\. **Publish** your apps

{% hint style="danger" %}
You cannot change the Power App ID of your token after it has been generated so it is important to ensure the Power App ID is correct.&#x20;
{% endhint %}

### Renewing Tokens

If you have recently extended your lowcodera subscription, you may wish to renew existing app tokens to correspond to your new subscription end date.

1\. Log in to the lowcodera Admin Portal at **app.lowcodera.com**

2\. Navigate to **App Tokens** from the main menu

3\. Click the **Refresh All Token** button

4\. Copy and paste the required app token into the lowcodera UI Asset component of your Power App


# lowcodera UI Assets

Lowcodera UI Asset Component

## Purpose

The lowcodera UI Assets Component is a master component. To [get started](/getting-started/adding-a-component-to-your-app#adding-the-ui-assets-component) with other components, add this component to your Power App.

## Property Configurations

The properties below are the main ones which change we need to configure!

<table data-header-hidden><thead><tr><th width="196">Control Property</th><th>Description</th><th width="168">Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>AppToken</td><td>Property to enter your lowcodera <a href="/pages/qOUM6FQlmMPEhhmFFQy2">App Token</a></td><td>Text</td><td>Yes</td></tr><tr><td>Font</td><td>Property to set font throughout all the lowcodera UI components.</td><td>Choose from different Font Options</td><td>X</td></tr><tr><td>HideInPlayMode</td><td>Hides the display of the component when the app is running in Play Mode for end users</td><td>True, false</td><td>Yes</td></tr></tbody></table>

##


# Button

lowcodera Button Component

## Purpose

Quickly add professional looking buttons to your Power Apps with the lowcodera button component. Take advantage of several built-in features such as support for icons, predefined styles and different themes. Customize font sizes, button rounding and choose whether the button should be clickable

## Button Variations

![](/files/rxwsLOGnGqJlOqEqhc91)

‌There are several variations of the button with different configuration properties.

* Filled Buttons
* Outline Buttons
* Icons only Buttons‌ &#x20;
* Fill and Outline Buttons with Icons

## Component Properties

The properties below are the main ones which change this components appearance and behaviors.

> See the [general properties for UI components](/component-properties/ui-component-properties) for a reference of wider properties.

<table data-header-hidden><thead><tr><th width="215">Control Property</th><th>Description</th><th width="168">Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Control Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>Label</td><td>Property to set text for your button control</td><td>Text</td><td>Yes</td></tr><tr><td>Type</td><td>Property to choose button type.</td><td><p>Default</p><p>Outline</p></td><td>X</td></tr><tr><td>BorderRadius</td><td>Property to set Radius for our button.</td><td>Numeric</td><td>X</td></tr></tbody></table>

## Examples&#x20;

### Filled Buttons

![](/files/vtn5yUY6kV2FTXavDRiz)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **PRIMARY**
* [x] `Type`is to set as **Default**
* [x] `Theme`is to set as **Primary**
* [x] All control properties can be left as default
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our button and we want to write some events, we need to use **`OnChange`** Event of the button

```
Navigate(Home)
```

{% endtab %}
{% endtabs %}

### Outline Buttons

![](/files/FZlrSJizdk6GzOUpqO2F)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **PRIMARY**
* [x] `Type`is to set as **Outline**
* [x] `Theme`is to set as **Primary**
* [x] All control properties can be left as default
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our button and we want to write some events, we need to use **`OnChange`** Event of the button

```
Navigate(Home)
```

{% endtab %}
{% endtabs %}

### Icons Only Buttons

![](/files/QpauYIAXJFOZy85tItTT)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **blank**
* [x] `Type`is to set as **Default**
* [x] `Theme`is to set as **Primary**
* [x] `BorderRadius` is to set as **100**
* [x] `FontSize` is to set as **20**
* [x] `IconName` is to set as [font-awesome](https://fontawesome.com/v5.15/icons?d=gallery\&p=2\&m=free) icon name (e.g. comments, phone, map, globe, fire)
* [x] All control properties can be left as default
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our button and we want to write some events, we need to use **`OnChange`** Event of the button

```
Navigate(Home)
```

{% endtab %}
{% endtabs %}

### Fill and Outline Buttons with Icons

![](/files/uTiC2rFgkxN2vKhQGhvC)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Promary / Info**
* [x] `Type`is to set as **Outline for Primary and Default for Info**
* [x] `Theme`is to set as **Primary**
* [x] `IconName` is to set as [font-awesome](https://fontawesome.com/v5.15/icons?d=gallery\&p=2\&m=free) icon name (e.g. comments, info)
* [x] All control properties can be left as default
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our button and we want to write some events, we need to use **`OnChange`** Event of the button

```
Navigate(Home)
```

{% endtab %}
{% endtabs %}


# Card

lowcodera Card Component

## Purpose

The lowcodera card component represents a common layout item in many modern design languages. This card component contains content and actions about a single subject and can work well on its own or within a Power Apps gallery. All properties on this card component support dynamic data binding.

## Variations

There are several variations of card with different colors and configuration properties.

* Card with Image
* Card with Header

![](/files/fWPyYnxrHcmlgQEbrghw)

## Component Properties

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th width="216">Control Property</th><th>Description</th><th width="150">Required</th><th width="181">Accepted Values</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Required</strong></td><td><strong>Accepted Values</strong></td></tr><tr><td>ImageURL</td><td>Property to configure Image URL </td><td>X</td><td>String</td></tr><tr><td>ImagePosition</td><td>Property to configure Image Position in a card</td><td>X</td><td><p>Bottom</p><p>Header</p><p>Middle</p><p>Overlay</p><p>Top</p></td></tr><tr><td>BackgroundColor</td><td>Property to set background color for card component</td><td>X</td><td>String (HEX CODE in Upper Case)</td></tr><tr><td>HeaderText</td><td>Property to set header text for a card</td><td>X</td><td>String</td></tr><tr><td>HeaderFontColor</td><td>Property to set font color for header</td><td>X</td><td>String (HEX CODE in Upper Case)</td></tr><tr><td>TagText</td><td>Property to represent  Tag Text for card</td><td>X</td><td>String</td></tr><tr><td>TagFontColor</td><td>Property to show Font Color for tag text</td><td>X</td><td>String</td></tr><tr><td>TagIcon</td><td>Property to show tag icon in a card</td><td>X</td><td>String</td></tr><tr><td>Title</td><td>Property to set Title for card</td><td>X</td><td>String</td></tr><tr><td>TitleFontColor</td><td>Property to set font color for Title</td><td>X</td><td>String (HEX CODE in Upper Case)</td></tr><tr><td>Description</td><td>Property to set Description for card</td><td>X</td><td>String</td></tr><tr><td>DescriptionFontColor</td><td>Property to set font color for description.</td><td>X</td><td>String (HEX CODE in Upper Case)</td></tr><tr><td>HorizontalAlignment</td><td>Property to set horizontal alighment for card title, description.</td><td>X</td><td><p>Center</p><p>Left</p><p>Right</p></td></tr><tr><td>Theme</td><td>Property to set Theme for card control.</td><td>X</td><td><p>Danger</p><p>Default</p><p>Info</p><p>Primary</p><p>Secondary</p><p>Success</p><p>Warning</p></td></tr></tbody></table>

## Example

### Card with Image

![](/files/DRd3Om3x5SwvWwv0wIPa)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `ImageURL` property is to set as **valid publically accessible URL (e.g.** [**https://images.freeimages.com/images/large-previews/0d6/blue-flowers-with-macro-4-1400913.jpg**](https://images.freeimages.com/images/large-previews/0d6/blue-flowers-with-macro-4-1400913.jpg)**)**
* [x] `BackgroundColor` is to set as **#EBEAEB**
* [x] `TagText` is to set as **flower**
* [x] `TagFontColor` is to set as **#CD8332**
* [x] `TagIcon` is to set as **bacon**
* [x] `Title` is to set as **Project Jasmine**
* [x] `TitleFontColor` is to set as **black**
* [x] `Description` is to set as **valid description**
* [x] `DescriptionFontColor` is to set as **black**

{% endtab %}
{% endtabs %}

### Card with Header

![](/files/OmO1o1kzC6seHy43CE5j)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `HeaderText` is to set as **Monsoon Flowers**
* [x] `HeaderFontColor` is to set as **white**
* [x] `TagText` is to set as **flower**
* [x] `TagIcon` is to set as **bahai**
* [x] `Title` is to set as **Project Lily**
* [x] `TitleFontColor` is to set as **black**
* [x] `Description` is to set as **valid description**
* [x] `DescriptionFontColor` is to set as **black**
  {% endtab %}
  {% endtabs %}

### Card with Header


# Date time picker

lowcodera Date time picker Component

## Purpose

The lowcodera date time picker is a lightweight and mobile-friendly component that allows end users to enter or select date and time values from a pop-up calendar and interactive time clock.

## Variations

![Datetimepicker in Power Apps](/files/hMF1iLvlJX54a5QKOlXt)

![Mobile Date time picker in Power Apps](/files/WxzsL8r8b1tQryfGmKuQ)

‌There are several variations of datetimepicker with different configuration properties.

* Date Picker
* Time Picker
* DateTime Picker
* DateMobile Picker
* TimeMobile Picker
* DateTimeMobile Picker

## Properties

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th width="208">Control Property</th><th>Description</th><th width="188">Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td>Accepted <strong>Values</strong></td><td><strong>Required</strong></td></tr><tr><td>Label</td><td>Property to set Label for control</td><td>Text</td><td>Yes</td></tr><tr><td>Type</td><td>Property to set appearence of datetime picker.</td><td><p>Date </p><p>Time </p><p>DateTime </p><p>DateMobile TimeMobile DateTimeMobile</p></td><td>X</td></tr><tr><td>Disabled</td><td>Property to set datetime picker in disabled mode</td><td>Boolean</td><td>X</td></tr><tr><td>ReadOnly</td><td>Property to set datetime picker in read only mode</td><td>Boolean</td><td>X</td></tr><tr><td>Default</td><td>Property to set initial/default date of the calendar on first load</td><td>Date Value (e.g. 2021-12-15)</td><td>X</td></tr><tr><td>InputFormat</td><td>Property to set datetime format</td><td><p>String </p><p>"DD/MM/yyyy"</p><p>"MM/DD/yyyy"</p><p>"yyyy/MM/DD"</p><p>"DD/MM/yyyy hh:mm:ss"</p><p>"DD-MM-yyyy"</p><p>"MM-DD-yyyy"</p><p>"yyyy-MM-DD"</p><p>"yyyy-MM-DD" hh:mm:ss"</p></td><td>Yes</td></tr><tr><td></td><td></td><td></td><td></td></tr></tbody></table>

## Examples&#x20;

### Date Picker

![](/files/zZys9JKXXy88KUaB8bud)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Select Booking Date**
* [x] `Type`is to set as **Date**
* [x] `InputFormat` is set to **"dd/mm/yyyy"**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({DateVal: DateTimePicker1.CurrentValue})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's datetimepicker control.

<table><thead><tr><th>Output Property</th><th width="247.33333333333331">Purpose</th><th>Example</th></tr></thead><tbody><tr><td>CurrentValue</td><td>Get Current value from Lowcodera datetimepicker Component.</td><td>DateTimePicker1.CurrentValue</td></tr></tbody></table>

{% endtab %}
{% endtabs %}

### Time Picker

![](/files/axsnMcUZNxGz0NHEwgU8)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Select Booking Time**
* [x] `Type`is to set as **Time**
* [x] `InputFormat` is set to **"hh:mm:ss"**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({DateVal: DateTimePicker1.CurrentValue})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's datetimepicker control.

| Output Property | Purpose                                                    | Example                      |
| --------------- | ---------------------------------------------------------- | ---------------------------- |
| CurrentValue    | Get Current value from Lowcodera datetimepicker Component. | DateTimePicker1.CurrentValue |
| {% endtab %}    |                                                            |                              |
| {% endtabs %}   |                                                            |                              |

### Date Time Picker

![](/files/aWxOJxL1oVTPKWLT200a)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Select Booking Date**
* [x] `Type`is to set as **DateTime**
* [x] `InputFormat` is set to **"dd/mm/yyyy hh:mm:ss"**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({DateVal: DateTimePicker1.CurrentValue})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's datetimepicker control.

| Output Property | Purpose                                                    | Example                      |
| --------------- | ---------------------------------------------------------- | ---------------------------- |
| CurrentValue    | Get Current value from Lowcodera datetimepicker Component. | DateTimePicker1.CurrentValue |
| {% endtab %}    |                                                            |                              |
| {% endtabs %}   |                                                            |                              |

### Mobile Date Picker

![](/files/vSLh113UaTQkmx60loEv)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Select Booking Time**
* [x] `Type`is to set as **DateMobile**
* [x] `InputFormat` is set to **"dd/mm/yyyy"**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({DateVal: DateTimePicker1.CurrentValue})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's datetimepicker control.

| Output Property | Purpose                                                    | Example                      |
| --------------- | ---------------------------------------------------------- | ---------------------------- |
| CurrentValue    | Get Current value from Lowcodera datetimepicker Component. | DateTimePicker1.CurrentValue |
| {% endtab %}    |                                                            |                              |
| {% endtabs %}   |                                                            |                              |

### Mobile Time Picker

![](/files/CNRvJC9fxjAxEEyPbLXa)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Select Booking Date**
* [x] `Type`is to set as **TimeMobile**
* [x] `InputFormat` is set to **"hh:mm:ss"**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({DateVal: DateTimePicker1.CurrentValue})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's datetimepicker control.

| Output Property | Purpose                                                    | Example                      |
| --------------- | ---------------------------------------------------------- | ---------------------------- |
| CurrentValue    | Get Current value from Lowcodera datetimepicker Component. | DateTimePicker1.CurrentValue |
| {% endtab %}    |                                                            |                              |
| {% endtabs %}   |                                                            |                              |

### Mobile Date Time Picker

![](/files/umnObPf4vIJwUJ9a0fzM)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Select Booking Date**
* [x] `Type`is to set as **DateTimeMobile**
* [x] `InputFormat` is set to **"dd/mm/yyyy hh:mm:ss"**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({DateVal: DateTimePicker1.CurrentValue})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's datetimepicker control.

| Output Property | Purpose                                                    | Example                      |
| --------------- | ---------------------------------------------------------- | ---------------------------- |
| CurrentValue    | Get Current value from Lowcodera datetimepicker Component. | DateTimePicker1.CurrentValue |
| {% endtab %}    |                                                            |                              |
| {% endtabs %}   |                                                            |                              |

###


# Dropdown Menu

lowcodera Dropdown Menu Component

## Purpose

The lowcodera drop down menu component immediately adds professional gloss to your Power App and provides a highly effective menu solution for various application use cases. With its elegant flyout menu, the component has built-in support for icons, various styles and themes.

## &#x20;Variations

![](/files/2iUYuEPOMUmrWvchXUPN)

‌There are several variations of dropdown with different colors and configuration properties.

* Dropdown with Icons
* Dropdown with Circular radius
* Dropdown without Icons
* Dropdown with Outline

## Component Properties

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th width="248">Control Property</th><th width="195">Description</th><th width="155">Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>Type</td><td>Property to define dropdown fill</td><td><p>Default</p><p>Outline</p></td><td>X</td></tr><tr><td>IsRequired</td><td>Property to make our dropdown menu field required</td><td>Boolean</td><td>X</td></tr><tr><td>ShowEmptyMenuOption</td><td>Property to show first menu option as empty</td><td>Boolean</td><td>X</td></tr><tr><td>ShowSelectedAsTitle</td><td>Property to show selected option in a title</td><td>Boolean</td><td>X</td></tr><tr><td>PlaceholderText</td><td>Property to show placeholder text for dropdown when no value is selected</td><td>String</td><td>X</td></tr><tr><td>Default</td><td>Property to show default selected item from dropdown</td><td>Numeric</td><td>X</td></tr></tbody></table>

## Examples&#x20;

### Dropdown Menu with Icons

![](/files/5xeMLyPnYt6AGRGnmw01)

{% tabs %}
{% tab title="Static Collection Example" %}
In this example, a collection with static data called `colldropdownwithIcon` is defined in the Power App. The items property of the dropdown menu component is then bound to this collection.

```
ClearCollect(
    colldropdownwithIcon,
    {
        key: "1",
        text: "My profile",
        icon: "user"
    },
    {
        key: "2",
        text: "Settings",
        icon: "cog"
    },
    {
        key: "3",
        text: "Activity",
        icon: "calendar-alt"
    },
    {
        key: "4",
        text: "Support",
        icon: "phone-square"
    },
    {
        key: "5",
        text: "Logout",
        icon: "sign-out-alt"
    }
);


```

{% endtab %}

{% tab title="Property Configration" %}

* [x] `PlaceholderText` property is to set as **Menu with Icons**
* [x] `PlaceholderIcon` is to set as **archive**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({Name: DropDownMenu1.CurrentText})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's Dropdown control.

| Output Property           | Purpose                                                             | Example                   |
| ------------------------- | ------------------------------------------------------------------- | ------------------------- |
| DropDownMenu1.CurrentText | Get Current selected item's Text from Lowcodera dropdown Component. | DropDownMenu1.CurrentText |
| DropDownMenu1.CurrentKey  | Get Current selected item's key from Lowcodera dropdown Component.  | DropDownMenu1.CurrentKey  |

{% endtab %}
{% endtabs %}

### Dropdown with circular radius

![](/files/jC2wqHfKYky5iYU1FImL)

{% tabs %}
{% tab title="Static Collection Example" %}
You can use the same collection used in [section](#dropdown-menu-with-icons).
{% endtab %}

{% tab title="Property Configration" %}

* [x] `Theme`property is to set as **Default**&#x20;
* [x] `PlaceholderText` is to set as **Menu with Icons**
* [x] `PlaceholderIcon` is to set as **bars**
* [x] `BorderRadius` is to set as **100**

{% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({Name: DropDownMenu1.CurrentText})
```

{% endtab %}
{% endtabs %}

### Dropdown without Icons

![](/files/KF2GbOQFWOPtNzWfJ5PK)

{% tabs %}
{% tab title="Static Collection Example" %}
In this example, a collection with static data called `colldropdownwithoutIcon` is defined in the Power App. The items property of the dropdown menu component is then bound to this collection.

```
ClearCollect(
    colldropdownwithoutIcon,
    {
        key: "1",
        text: "My profile"
    },
    {
        key: "2",
        text: "Settings"
    },
    {
        key: "3",
        text: "Activity"
    },
    {
        key: "4",
        text: "Support"
    },
    {
        key: "5",
        text: "Logout"
    }
);
```

{% endtab %}

{% tab title="Property Configration" %}

* [x] `PlaceholderText` property is to set as **Menu without Icon**
  {% endtab %}
  {% endtabs %}

### Dropdown with Outline

![](/files/6rVy76tEKySWKyYyhlCK)

{% tabs %}
{% tab title="Static Collection Example" %}
You can use the same collection used in [section](#textbox-with-password).
{% endtab %}

{% tab title="Property Configration" %}

* [x] `Type` property is to set as **Outline**
* [x] `PlaceholderText` property is to set as **Menu without Icon**
  {% endtab %}
  {% endtabs %}


# Horizontal Navbar

Lowcodera Horizontal Navigation Bar Component

## Purpose

The lowcodera horizontal navigation bar provides a quick and elegant solution to one of the most common UI requirements within an app. Our component supports rich styling options, icons, dynamic data binding, and multilevel item nesting.

## Variations

![Lowcodera Naviation bar](/files/m1dd6qMUyztOmykTBEY3)

![](/files/MqBmBTOjNnh8nPOVZkq1)

‌There are several variations of navigation bar with different colors and configuration properties.

## ​Working with Data

‌The data format for the navigation bar is simple and easy to configure. &#x20;

{% hint style="info" %}
Note: Make sure Navigation Component you are adding on the screen is reordered with the "Bring to Front" option.
{% endhint %}

{% tabs %}
{% tab title="Static Collection Example" %}
In this example, a collection with static data called `globalNav` is defined in the Power App. The **`items`** property of the navigation bar component is then bound to this collection.

```markup
Table(
    {
        type: "DropDown",
        title: "Employee Corner",
        icon: "object-group",
        key: "ec",
        dropDown: ForAll([
            {
                type: "Action",
                title: "Log Timesheet",
                key: "logtimesheet"
            },
            {
                type: "Action",
                title: "Apply Leave",
                key: "leave"
            },
            {
                type: "Action",
                title: "My Projects",
                key: "projects"
            }
        ], {Value: ThisRecord})
    },
    {
        type: "DropDown",
        title: "HR Corner",
        icon: "chart-area",
        key: "hrcorner",
        containerIdentifier: "contactConainer",
        height: 150,
        direction: "bottom-start",
        dropDown: ForAll([
            {
                type: "Action",
                title: "HR Policies",
                key: "policies"
            },
            {
                type: "Action",
                title: "TimeSheet",
                key: "timesheet"
            },
            {
                type: "Action",
                title: "Leave Approval",
                key: "approval"
            },
            {
                type: "Action",
                title: "Notifications",
                key: "notification"
            }
        ], {Value: ThisRecord})
    },
    {
        type: "Action",
        icon: "cog",
        key: "settings",
        title: "Settings"
    },
    {
        type: "Action",
        key: "user",
        icon: "user-circle",
        title: "User"
    }
)
```

The above code snippet will generate the following navigation bar.

![](/files/ZRfddMYoO1NrwL3EIayZ)
{% endtab %}

{% tab title="Property Configration" %}

* [x] `IconName` property is to set as **award**
* [x] `HeaderIsClickable` is to set as **true**
* [x] `HeaderText` is to set as **Lowcodera**
* [x] All control properties can be left as default
  {% endtab %}

{% tab title="Output Property" %}
Please check the following Output properties for Lowcodera's H Navbar control.

<table><thead><tr><th>Output Property</th><th width="247.33333333333331">Purpose</th><th>Example</th></tr></thead><tbody><tr><td>CurrentKey</td><td>Get Current selected Item's Key from horizontal navigation bar.</td><td>HorizontalNavBar1.CurrentKey</td></tr></tbody></table>

{% endtab %}

{% tab title="Event Configuration" %}
Once we configure our Navigation bar, we need to configure `OnChange` event.  The code contains one switch function which will navigate user to appropriate page when any item is selected from the navigation bar.

```
Switch(
    HorizontalNavBar1.CurrentKey,
    "0",
    Navigate(Home),
    "logtimesheet",
    Navigate(Home),
    "leave",
    Navigate(Navbar),
    "projects",
    Navigate(Buttons),
    "policies",
    Navigate(Icons),
    "timesheet",
    Navigate(Cards),
    "approval",
    Navigate(Dropdown),
    "notification",
    Navigate('Bar Chart'),
    "settings",
    Navigate('Column Chart'),
    "user"
)


```

{% endtab %}
{% endtabs %}

## Component Properties

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th width="197">Control Property</th><th width="219">Description</th><th width="150">Required</th><th width="184">Accepted Values</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Required</strong></td><td><strong>Accepted Values</strong></td></tr><tr><td>Items</td><td>Property to define how navigation bar looks like</td><td></td><td>Table</td></tr><tr><td>Theme</td><td>Property to change theme of the navigation bar</td><td>X</td><td><p>Default</p><p>Danger</p><p>Info</p><p>Primary</p><p>Secondary</p><p>Success</p><p>Warning</p><p></p></td></tr><tr><td>FontSize</td><td>Property to set font size </td><td>X</td><td>Number</td></tr><tr><td>IconName</td><td>Property to icon name for header</td><td>X</td><td><a href="https://fontawesome.com/v5.15/icons?d=gallery&#x26;p=2&#x26;m=free">Font-awosome icon name</a></td></tr><tr><td>HeaderIsClickable</td><td>Property to make header clickable.</td><td>X</td><td>Boolean</td></tr><tr><td>HeaderText</td><td>Property to change header title</td><td>X</td><td>Text</td></tr></tbody></table>

## Examples&#x20;

![](/files/0yhnqdDN1sOgep13Pgid)

{% tabs %}
{% tab title="Data Configuration" %}
We need to add the following collection.&#x20;

```csharp
ClearCollect(
Nav4,
    {
        type: "Action",
        icon: "bell",
        key: "Option1",
        title: "Item 1"
    },
    {
        type: "Action",
        title: "Item 2",
        key: "Option2",
        icon: "share-square"
    },
    {
        type: "Action",
        title: "Item 3",
        icon: "user-circle",
        key: "Option3"
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `IconName` property is to set as **atom**
* [x] `Theme` property is to set based on requirements.&#x20;
* [x] `HeaderIsClickable` is to set as **true**
* [x] `HeaderText` is to set as **based on requiremet**
* [x] All control properties can be left as default
  {% endtab %}
  {% endtabs %}


# Icon

lowcodera Icon Component

## Purpose

The lowcodera's Icons control provides us the flexibility to add icons from large set of the [font-awesome library](https://fontawesome.com/v5.15/icons?d=gallery\&p=2\&m=free).

## Variations

![](/files/LVQ4sRit0GGJrS8NNLwJ)

## Component Properties

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th width="215">Control Property</th><th>Description</th><th width="150">Required</th><th width="171">Accepted Values</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Required</strong></td><td><strong>Accepted Values</strong></td></tr><tr><td>IconName</td><td>Property to provide icon name from font-awosome gallery.</td><td>Yes</td><td>Text</td></tr><tr><td>IsClickable</td><td>Property to makeour icon clickable</td><td>X</td><td>Boolean</td></tr></tbody></table>

## Examples&#x20;

### Icons

![](/files/zVNa2QeVQL8pqnSN2stA)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Icon name`property is to set as **file/folder/map-signs/map/marker/tree**
* [x] `Theme`is to set as **Primary/Info/Success**
* [x] All control properties can be left as default
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our button and we want to write some events, we need to use **`OnChange`** Event of the button

```
Navigate(Home)
```

{% endtab %}
{% endtabs %}


# PowerGrid

lowcodera PowerGrid Component

## Purpose

Packed with features and customization options, the lowcodera PowerGrid takes presenting, interacting and editing your tabular data in Power Apps to a new level.

## Binding Data

You can bind data to the PowerGrid using the **items** property. Simply select your data source like you would with any out of the box control like the Gallery or Data Grid.

## PowerGrid Properties

<table data-header-hidden><thead><tr><th width="198.33333333333331">Property</th><th>Description</th><th>Type<select><option value="f1d23c58a407493bb41d433c34710260" label="Input" color="blue"></option><option value="f2f01f27df394bf2aa4d9f168669df40" label="Output" color="blue"></option></select></th></tr></thead><tbody><tr><td>Theme</td><td>Styles the grid with one of several themes.</td><td><span data-option="f1d23c58a407493bb41d433c34710260">Input</span></td></tr><tr><td>Auto-Size</td><td><p>Size the grid columns with three different options</p><p><br>Auto-Size All – auto-sizes columns based on cell content and column name lengths</p><p><br>Auto-Size All (Skip Header) – auto-sizes columns based on cell content and ignores headers</p><p> </p><p>Size to Fit – auto-sizes the grid content to fit the width of the component</p><p> </p></td><td><span data-option="f1d23c58a407493bb41d433c34710260">Input</span></td></tr><tr><td>Row Drag</td><td>Enables or disables the ability for end users to re-order rows by dragging rows</td><td><span data-option="f1d23c58a407493bb41d433c34710260">Input</span></td></tr><tr><td>Grouped Rows</td><td>Enables or disables the ability for end users to use the row grouping function. The row grouping feature allows the data to be grouped by a column or hierarchy of columns.</td><td><span data-option="f1d23c58a407493bb41d433c34710260">Input</span></td></tr><tr><td>Use Custom Grouping</td><td>Boolean to determine if rows should be grouped based on the column schema definition instead of what the end user does as run-time</td><td><span data-option="f1d23c58a407493bb41d433c34710260">Input</span></td></tr><tr><td>Columns Sidebar</td><td>Enables or disables the ability for end users to see the columns sidebar. The columns sidebar allows users to select which columns to show in the grid at run-time</td><td><span data-option="f1d23c58a407493bb41d433c34710260">Input</span></td></tr><tr><td>Filters Sidebar</td><td>Enables or disables the ability for end users to see the Filters sidebar. The filters sidebar provides advanced data filtering capability for users at run-time</td><td><span data-option="f1d23c58a407493bb41d433c34710260">Input</span></td></tr><tr><td>Column Search</td><td>Enables or disables the in-column search function for users</td><td><span data-option="f1d23c58a407493bb41d433c34710260">Input</span></td></tr><tr><td>Use Dataset API</td><td>Enables or disables use of the Dataset API feature. The Dataset API is new feature from Microsoft and simplifies how data is saved back to a data source. There are currently <a href="#limitations-known-issues">limitations and known issues</a> with this approach which is why it is not always suitable for <a href="#saving-data">saving data back to your data source</a></td><td><span data-option="f1d23c58a407493bb41d433c34710260">Input</span></td></tr><tr><td>Hide Toolbar</td><td>Boolean to hide or show the PowerGrid toolbar which is above the grid.</td><td><span data-option="f1d23c58a407493bb41d433c34710260">Input</span></td></tr><tr><td>items</td><td>Used to bind to your data source</td><td><span data-option="f1d23c58a407493bb41d433c34710260">Input</span></td></tr><tr><td>ColumnsDataSet_Items</td><td>Used to define <a href="#columns-dataset">column schema</a> in JSON so that advanced grid column features can be used.</td><td><span data-option="f1d23c58a407493bb41d433c34710260">Input</span></td></tr><tr><td>Load All Rows</td><td>Preloads all rows instead of loading data on scroll</td><td><span data-option="f1d23c58a407493bb41d433c34710260">Input</span></td></tr><tr><td>Font Size</td><td>Sets the font size of the grid content</td><td><span data-option="f1d23c58a407493bb41d433c34710260">Input</span></td></tr><tr><td>Row Height</td><td>sets the height of rows for the grid</td><td><span data-option="f1d23c58a407493bb41d433c34710260">Input</span></td></tr><tr><td>Set Filter</td><td>definition of the pre-defined filter settings to apply to the grid</td><td><span data-option="f1d23c58a407493bb41d433c34710260">Input</span></td></tr><tr><td>filter</td><td>JSON output of the filters currently applied to the grid. Can be copied and pasted into Set Filter input property for setting predefined filters</td><td><span data-option="f2f01f27df394bf2aa4d9f168669df40">Output</span></td></tr><tr><td>onSelectedItems</td><td>Returns a collection of the items selected on the grid</td><td><span data-option="f2f01f27df394bf2aa4d9f168669df40">Output</span></td></tr><tr><td>onEventType</td><td>Outputs the current event which has been triggered on the grid.  </td><td><span data-option="f2f01f27df394bf2aa4d9f168669df40">Output</span></td></tr><tr><td>actionButtonRowId</td><td>Returns the id of the row from where the user invoked an action button</td><td><span data-option="f2f01f27df394bf2aa4d9f168669df40">Output</span></td></tr></tbody></table>

## Columns Dataset

&#x20;The items property allows you to bind the grid to your data source and render it. In addition to this, there is some advanced functionality available in the PowerGrid which is unlocked through using the columns dataset property which is defined in JSON. Key attributes for our column dataset schema are documented below

&#x20;

| **Attribute**         | **Description**                                                                                                                             |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| DisplayName           | Sets the display name of the column                                                                                                         |
| IsKey                 | Boolean to define if the column is the primary key. Necessary when the API dataset method is not used to save records.                      |
| visible               | Boolean to define whether the column is visible or not on the grid                                                                          |
| editable              | Boolean to determine if a column is editable or not                                                                                         |
| DataType              | <p>Defines the column Data Type. Supported values are:<br>String</p><p>Number<br>Date</p><p>Choices<br>html<br>rating<br>actionButton</p>   |
| DataFormat            | Allows advanced data formatting expressions to be applied. See [data formatting](#data-formatting) for examples.                            |
| ConditionalFormatting | Allows in-cell conditional formatting rules to specified for the column. See [Conditional Formatting](#conditional-formatting) for examples |
| Choices               | Used to provide a JSON data schema for any column defined with a datatype of Choices                                                        |
| rowGroupIndex         | Integer to define the column grouping order for this column                                                                                 |
| showCheckbox          | Boolean to determine if a checkbox is shown against the column                                                                              |

### Example Schema

```csharp
Table(
    {
        fieldName:"ID",
        displayName:"ID",
        isKey:true        
    },
    {
        fieldName:"Title",
        displayName:"Work Order"        
    },
    {
        fieldName:"District",
        displayName:"District"
    },
    {
        fieldName:"Service",
        displayName:"Service"        
    },
    {
        fieldName:"LeadTech",
        displayName:"LeadTech"                
    },    
    {
        fieldName:"WorkDate",
        displayName:"Work Date",                
        dataType:"date",//datatype for the value eg. string,number
        dataFormat:"DD-MMM-YYYY" //Custom date format         
    },
    {
        fieldName:"Payment",
        displayName:"Payment",
        dataType:"choices",
        choices:ForAll([
            {
                key:"COD",
                value:"C.O.D."
            },
            {
                key:"account",
                value:"Account"
            }
        ], {Value: ThisRecord})  
    },
    {
        fieldName:"LbrHrs",
        displayName:"Labor Hours",
        dataType:"number",        
        dataFormat:"{{value:d1}}"// data format mechanism to format the number value eg. 100.0
    },
    {
        fieldName:"Techs",
        displayName:"Techs",       
        dataType:"number",
        conditionalFormat: //Display background-color of the value based on two or more conditions 
        ForAll([
            {
                condition: "value == 1",
                ifTrue: {backgroundColor: "red"}                
            },
            {            
                condition: "value == 2",
                ifTrue: {backgroundColor: "blue"}                
            },
            {
                condition: "value == 3",
                ifTrue: {backgroundColor: "green"}                
            }
        ], {Value: ThisRecord})      
    },
    {
        fieldName:"TotalPayable",
        displayName:"Total Cost",
        dataType:"number",
        dataFormat:"{{value:d2}}",//Set the data format of the value eg. 100.25
        dataAlign: "right"//Set the alignment of the value eg. left,center,right        
    }
)
```

## Saving Data

There are two approaches for saving data back to your data source- using the dataset API or by patching records via the OnChange Event. The Dataset API is simpler to use, however it is a new feature from Microsoft and there are some [limitations](#limitations-known-issues) which means it is not suitable for all situations.

### Using the Dataset API

To use this method for saving data, make sure the “**Use Dataset API**” property is set to **true** and the **Hide Toolbar** property is set to **false**.

As users make changes to column values, the toolbar will show a count of unsaved row changes. Users need to press the **save** button in the toolbar to commit changes back to the underlying data source.

### Saving via the OnChange Event

Before using this method:

1. Set the **IsKey** attribute to **true** for whichever the unique ID column is in your [Columns Dataset](#columns-dataset).
2. Set the “**Use Dataset API**” property to **false**
3. Set the **“Hide Toolbar**” property to true.

This method requires PowerFX to be inserted into the **OnChange** event of the PowerGrid. There are 3 sections to the PowerFX code which are documented in the example code snippet below.

* Generating a collection of changed rows
* Generating a collection of changed values from the changed rows
* Patching the changed values back to the data source

See below for an example code snippet for saving data via the OnChange Event:

```csharp
// 1.  Parsing changed rows into a collection
Clear(updatedRowsCol);
Clear(updatedItemsCol);

ForAll(
    Split(Self.onUpdatedItems,"</Row>"),
    Collect(updatedRowsCol,Result)
);

// 2. Parsing the ID, ColumnName and new value for each changed row

ForAll(
    updatedRowsCol,
    Collect(
        updatedItemsCol,
        {
            id: First(Split(ThisRecord.Value,"</>")).Result,
            fieldName: First(LastN(Split(ThisRecord.Value,"</>"),2)).Result,
            value: Last(LastN(Split(ThisRecord.Value,"</>"),2)).Result
        }
    )
);

// 3. Save the final data - Patch Updates

ForAll(
    updatedItemsCol As UpdatedItems,
    Switch(
        UpdatedItems.fieldName,
        "field_LeadTech",
        Patch(
            colWorkOrders,
            LookUp(
                colWorkOrders,
                ID = Value(UpdatedItems.id)
            ),
            {LeadTech: UpdatedItems.value}
        ),
        "field_ReqDate",
        Patch(
            colWorkOrders,
            LookUp(
                colWorkOrders,
                ID = Value(UpdatedItems.id)
            ),
            {
                ReqDate: DateValue(
                    UpdatedItems.value,
                    "en-GB"
                )
            }
        ),
        "field_Service",
        Patch(
            colWorkOrders,
            LookUp(
                colWorkOrders,
                ID = Value(UpdatedItems.id)
            ),
            {Service: UpdatedItems.value}
        ),
        "field_District",
        Patch(
            colWorkOrders,
            LookUp(
                colWorkOrders,
                ID = Value(UpdatedItems.id)
            ),
            {District: UpdatedItems.value}
        ),
        "field_LbrHrs",
        Patch(
            colWorkOrders,
            LookUp(
                colWorkOrders,
                ID = Value(UpdatedItems.id)
            ),
            {LbrHrs: Value(UpdatedItems.value)}
        )
    )
);
```

## Copy and Pasting Data

The grid supports copying and pasting data into it from data sources like Excel. The **Ctrl + V** keyboard shortcut will need to be used to perform the paste operation.&#x20;

When data is pasted into the grid, there is a **pastedData** EventType which is exposed. This should be used in the OnChange event to process the pasted data. The pasted data is held in the onUpdatedItems output property, as per when any data is updated in the grid.

You will need to handle the two scenarios of when data is pasted into existing records and when pasted data is creating new rows. When the pasted data is creating a new row on the grid, the id attribute for that row of onUpdatedItems will be set to "NEW\_ROW".

See the example PowerFx code below for how the OnChnage event of the grid can be used to process regular updates to the grid as well as from Copy and Paste operations.#

<pre class="language-csharp"><code class="lang-csharp">    Clear(updatedRowsCol);
    Clear(updatedItemsCol);
<strong>
</strong><strong>If(
</strong>    Self.onEventType = "pastedData",

// 1.  Parsing pasted rows into a collection
ForAll(
        Split(
            Self.onUpdatedItems,
            "&#x3C;/Row>"
        ),
        Collect(
            updatedRowsCol,
            Result
        )
    );
    
// 2. Parsing the ID, ColumnName and new value for each pasted row
ForAll(
        updatedRowsCol,
        Collect(
            updatedItemsCol,
            {
                id: First(
                    Split(
                        ThisRecord.Value,
                        "&#x3C;/>"
                    )
                ).Result,
                fieldName: First(
                    LastN(
                        Split(
                            ThisRecord.Value,
                            "&#x3C;/>"
                        ),
                        2
                    )
                ).Result,
                value: Last(
                    LastN(
                        Split(
                            ThisRecord.Value,
                            "&#x3C;/>"
                        ),
                        2
                    )
                ).Result
            }
        )
    );
    
// Patch any new records from the paste operation. New rows hav an id value of NEW_ROW
ForAll(
        Filter(
            updatedItemsCol,
            id = "NEW_ROW"
        ) As UpdatedItems,
        Switch(
            UpdatedItems.fieldName,
            "Payment",
            Patch(
                colltestData,
                Defaults(colltestData),
                {Payment: UpdatedItems.value}
            ),
            "Title",
            Patch(
                colltestData,
                Defaults(colltestData),
                {Title: UpdatedItems.value}
            ),
            "JoinDate",
            Patch(
                colltestData,
                Defaults(colltestData),
                {JoinDate: DateValue(UpdatedItems.value)}
            )
        )
    );
    
//Patch Updates for pasted rows which already exist
ForAll(
        updatedItemsCol As UpdatedItems,
        Switch(
            UpdatedItems.fieldName,
            "Payment",
            Patch(
                colltestData,
                LookUp(
                    colltestData,
                    ID = Value(UpdatedItems.id)
                ),
                {Payment: UpdatedItems.value}
            ),
            "Title",
            Patch(
                colltestData,
                LookUp(
                    colltestData,
                    ID = Value(UpdatedItems.id)
                ),
                {Title: UpdatedItems.value}
            ),
            "JoinDate",
            Patch(
                colltestData,
                LookUp(
                    colltestData,
                    ID = Value(UpdatedItems.id)
                ),
                {JoinDate: DateValue(UpdatedItems.value)}
            )
        )
    ),
    
//Handle regular updates to rows

    
// 1.  Parsing chnaged rows into a collection
ForAll(
        Split(
            Self.onUpdatedItems,
            "&#x3C;/Row>"
        ),
        Collect(
            updatedRowsCol,
            Result
        )
    );
    
// 2. Parsing the ID, ColumnName and new value for updated row
ForAll(
        updatedRowsCol,
        Collect(
            updatedItemsCol,
            {
                id: First(
                    Split(
                        ThisRecord.Value,
                        "&#x3C;/>"
                    )
                ).Result,
                fieldName: First(
                    LastN(
                        Split(
                            ThisRecord.Value,
                            "&#x3C;/>"
                        ),
                        2
                    )
                ).Result,
                value: Last(
                    LastN(
                        Split(
                            ThisRecord.Value,
                            "&#x3C;/>"
                        ),
                        2
                    )
                ).Result
            }
        )
    );
    
    
//Patch Updates for chnaged rows
ForAll(
        updatedItemsCol As UpdatedItems,
        Switch(
            UpdatedItems.fieldName,
            "Payment",
            Patch(
                colltestData,
                LookUp(
                    colltestData,
                    ID = Value(UpdatedItems.id)
                ),
                {Payment: UpdatedItems.value}
            ),
            "Title",
            Patch(
                colltestData,
                LookUp(
                    colltestData,
                    ID = Value(UpdatedItems.id)
                ),
                {Title: UpdatedItems.value}
            ),
            "JoinDate",
            Patch(
                colltestData,
                LookUp(
                    colltestData,
                    ID = Value(UpdatedItems.id)
                ),
                {JoinDate: DateValue(UpdatedItems.value)}
            )
        )
    )
);


</code></pre>

&#x20;&#x20;

## Conditional Formatting

The columns schema can be used to define cell based rules for conditional formatting. The example code snippet below shows how the background color of a cell can conditionally be defined

```csharp
    {
        fieldName:"AccountStatus",
        displayName:"Account Status",
        dataType:"number",
        conditionalFormat: ForAll([
            {
                condition: "value == 1",
                ifTrue: {backgroundColor: "red"}                
            },
            {            
                condition: "value == 2",
                ifTrue: {backgroundColor: "blue"}                
            },
            {
                condition: "value == 3",
                ifTrue: {backgroundColor: "green"}                
            }
        ] ,{Value: ThisRecord})   
    }

```

### Supported operators

#### Relational operators

* \>&#x20;
* <&#x20;
* \>=
* <=
* \===
* <> or !== or !=

#### Logical operators

* && or And
* || or Or
* ! or Not
* ‘value’ or ‘x’ is used for the content in the cell
* Schema for conditional formatting JSON (conditionalFormat in column definition of the grid)

{% hint style="info" %}
When there are overlapping regions then the later style takes the precedence
{% endhint %}

&#x20;

Any [CSS attributes](https://www.tutorialrepublic.com/css-reference/css3-properties.php) can be used inside the ‘ifTrue’ and ‘ifFalse’. Also use camelCase for the CSS attributes.&#x20;

## Data Formatting

Cell values can be formatted in the PowerGrid by specifying the appropriate expression in DataFormat attribute of the JSON column schema.

### **Decimal places**

Use the expression below, where the number after d denotes the number of decimal places. The example below formats the numbers to 2 decimal places.\
\
dataFormat: "{{value:d2}}"

### **Thousand separators**

A thousand separator can be specified by extending the decimal formatting expression with “:t”. The example below formats the numbes to 0 decimal places, with a thousand separator

&#x20;dataFormat: "{{value:d2:t}}"

### **Prefixes**

Values can also be prefixed into the expression e.g. Currency Symbol. The example below formats the number to 0 decimal places, with a thousand separator and a £ currency symbol

dataFormat: "£{{value:d2:t}}"

### **Dates**

When the DataType is Date, various data formatting expressions can be used to format the date.

dataFormat:"DD-MM-YYYY"

## Action Buttons

Action buttons allow you to define in-line interactive buttons within the grid. You can have one or more buttons per row and style each one independently. Importantly, you can also assign an event to a button and define PowerFx expressions to trigger when the user clicks on it.

### **Adding buttons**

Action buttons can be defined in the Column Schema by setting the DataType attribute for a column to be “actionButton”

<details>

<summary>Sample button definition</summary>

```
        fieldName: "button_column1",
        visible: true,
        displayName: "",
        editable: false,
        dataType: "actionButton",
        actionButtonProps: [
            {
                event: "viewProfile",
                id: "viewProfile",
                variant: "Outline",
                tooltip: "View Profile",
                name: "view",
                disabled: false,
                icon: "eye",
                fontColor: "green",
                backgroundColor: "transparent",
                borderColor: "transparent",
                width: 30,
                height: 30,
                fontSize: 12,
                borderRadius: 10,
                margin: 0
            }
        ]

```

</details>

### Action button attributes&#x20;

| event           | Name of the event which can be used in the OnChange event formula                 |
| --------------- | --------------------------------------------------------------------------------- |
| id              | Unique of the event. Comes into use when conditional visibility rules are applied |
| variant         | The style of the button. “Outline” or “Default”                                   |
| tooltip         | A tooltip description which will be displayed on hover                            |
| name            | Text to appear on the button                                                      |
| disabled        | Boolean to denote whether button can be clicked or not                            |
| icon            | FontAweseome icon reference                                                       |
| fontColor       | Color of text ad icon                                                             |
| backgroundColor | Background color of button                                                        |
| borderColor     | Border color of button                                                            |
| width           | Width of button in px                                                             |
| height          | Height of button in px                                                            |
| fontSize        | Size of text and icon                                                             |
| borderRadius    | Radius of the button in px                                                        |
| margin          | Margin between buttons                                                            |

### Handling user interaction

When a user clicks on an action button the PowerGrid onEventType property outputs the name of the event, as defined in the column definition. The actionButtonRowId output property also returns the id of the row the user has interacted with.&#x20;

To handle the interaction, follow these steps:

1. Make sure you have defined a unique name for the action button in the **event** attribute
2. In the OnChange of the PowerGrid, add a PowerFx expression for when the onEventType is equal to the name of your event.&#x20;
3. Use the actionButtonRowId output to perform your action against the appropriate row in your data source
4. See below for example, where the event has been called viewProfile

```csharp
Switch(
    Self.onEventType,
    "viewProfile",
    Set(
        VarPlayerProfileID,
        Self.actionButtonRowId
    );
    Navigate('Player Profile')
)
```

## Setting Predefined Filters

The PowerGrid supports scenarios where you need the grid prefiltered. To enable this simply populate the Set Filter input property with the appropriate JSON expressio&#x6E;**.**

{% hint style="info" %}
To save you having to manually generate the JSON for the filter query, the easiest way of setting a predefined filter is to first of all apply the filter condition(s) to the grid as an end user. Then copy the string generated in the output property **filter** and paste this into the **set filter** input property

{% endhint %}

<details>

<summary>Example filter</summary>

```
{
  "Nationality": {
    "filterType": "multi",
    "filterModels": [
      null,
      {
        "values": [
          "Argentina",
          "Austria",
          "Belgium"
        ],
        "filterType": "set"
      }
    ]
  }
}
```

</details>

## Using Pre-set Grouping

It's possible to have predefined column grouping on the grid. To enable this follow thee steps

1. Turn on the **Use Custom Grouping** property in the grid (set to true)
2. In the column schema, for each column you want to group by, set the rowGroupIndex attribute. This should be a number from 0 onwards for each column which will be grouped.  See example below.

```csharp
{
    fieldName: "name",
    displayName: "name", 
},
{
    fieldName: "country",
    displayName: "category",
    rowGroupIndex: 0
},
{
    fieldName: "Language",
    displayName: "Language",
    rowGroupIndex: 1
}
```

## Limitations/Known issues

* Saving decimal data is currently not supported by the new dataset API
* Saving data to SQL data source is currently not supported the new dataset API
* Under certain scenarios, changes on the grid are not reflected in real-time even though they are saved to the data source

&#x20;


# Progress Bar

lowcodera Progress Bar component

## Purpose

The lowcodera progress bar component can be used to visualize the progress of a task or activity. The progress bar can also be used to inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.

## Component Properties

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th width="236">Control Property</th><th width="194">Description</th><th width="150">Required</th><th width="168">Accepted Values</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Required</strong></td><td><strong>Accepted Values</strong></td></tr><tr><td>BarLabel</td><td>Property to set bar label.</td><td>X</td><td>String</td></tr><tr><td>Label</td><td>Property to set up Progressbar's title</td><td>X</td><td>String</td></tr><tr><td>Theme</td><td>Property to set theme for progress bar.</td><td>X</td><td><p>Danger</p><p>Default</p><p>Info</p><p>Primary</p><p>Secondary</p><p>Success</p><p>Warning</p></td></tr><tr><td>CustomColor</td><td>Property to set custom color for progress bar</td><td>X</td><td>String (HEX CODE in Upper Case) (e.g #E4501B)</td></tr><tr><td>Stripped</td><td>Property to allow stripe within the proress bar</td><td>X</td><td>Boolean</td></tr><tr><td>Animated</td><td>Property to show animation effect with stripe in progress bar.</td><td>X</td><td>Boolean</td></tr><tr><td>ShowPercentage</td><td>Property to show progress of progress bar in percentage</td><td>X</td><td>Boolean</td></tr><tr><td>ShowPercentageOnBar</td><td>Property to show progress of progress bar on bar</td><td>X</td><td>Boolean</td></tr><tr><td>MaximumValue</td><td>Property to set Maximum limit for pogress bar</td><td>Yes</td><td>Numeric</td></tr><tr><td>CurrentValue</td><td>Property to set current value for the progress bar</td><td>Yes</td><td>Numeric</td></tr></tbody></table>

## Example

### Simple Progress Bar

![](/files/Jh7JZvp81Mh1XfgxF9cK)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `CustomColor` property is to set as **#E4501B**
* [x] `MaximumValue` is to set as **100**
* [x] `CurrentValue` is to set as **34**
  {% endtab %}
  {% endtabs %}

###


# TextBox

lowcodera TextBox Control

## Purpose

The lowcodera text box is a component for editing, displaying, or entering plain text on forms to capture user names, phone numbers, email, and more.

## Variations

![](/files/DMGbaqOjslli7e4KJedL)

‌There are several variations of textbox with different colors and configuration properties.

* Textbox&#x20;
* Textbox with Numeric Value
* Textbox with Password
* Multiline Textbox
* Textbox with validations

## Component Properties

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th width="215">Control Property</th><th>Description</th><th width="152">Required</th><th width="183">Accepted Values</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Required</strong></td><td><strong>Accepted Values</strong></td></tr><tr><td>Label</td><td>Property to set Label for Textbox control</td><td>Yes</td><td>Text</td></tr><tr><td>Placeholder</td><td>Property to set placeholder inside Textbox control</td><td>X</td><td>Text</td></tr><tr><td>Type</td><td>Property to set if you want Float value in Textbox</td><td>X</td><td><p>Regular</p><p>Float</p></td></tr><tr><td>IsRequired</td><td>Property to make our textbox field required</td><td>X</td><td>Boolean</td></tr><tr><td>Mode</td><td>Property to set Mode for textbox control</td><td>X</td><td><p>Number</p><p>Password</p><p>Text</p><p>Multiline Text</p></td></tr><tr><td>LinesCount</td><td>Property to set line count for Multiline Textbox</td><td>X</td><td>Numeric</td></tr><tr><td>ShowSucess</td><td>Property to show success message</td><td>X</td><td>Boolean</td></tr><tr><td>SuccessMessage</td><td>Property to set success message</td><td>X</td><td>String</td></tr><tr><td>ShowError</td><td>Property to show error message</td><td>X</td><td>Boolean</td></tr><tr><td>ErrorMessage</td><td>Property to set error message</td><td>X</td><td>String</td></tr></tbody></table>

## Examples&#x20;

### TextBox

![](/files/xvluwJpr9TRtkwpt1Iv0)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Name**
* [x] `Placeholder` is to set as **Please Enter Name**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({Name: TextBox2.CurrentValue})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's Textbox control.

| Output Property | Purpose                                             | Example               |
| --------------- | --------------------------------------------------- | --------------------- |
| CurrentValue    | Get Current value from Lowcodera Textbox Component. | TextBox2.CurrentValue |
| {% endtab %}    |                                                     |                       |
| {% endtabs %}   |                                                     |                       |

### Textbox with Numeric Value

![](/files/qaoAecN1Cf0KTQYnPr4N)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Loan Amount**&#x20;
* [x] `Placeholder` is to set as **Please Enter Loan Amount**
* [x] `IsRequired` is to set as **true**
* [x] `Mode` is to set as **Number**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({Name: TextBox2.CurrentValue})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's Textbox control.

| Output Property | Purpose                                             | Example               |
| --------------- | --------------------------------------------------- | --------------------- |
| CurrentValue    | Get Current value from Lowcodera Textbox Component. | TextBox2.CurrentValue |
| {% endtab %}    |                                                     |                       |
| {% endtabs %}   |                                                     |                       |

### TextBox with Password

![](/files/IuPHk5KxWavWSMO6RbUq)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Credit Card Number**&#x20;
* [x] `Placeholder` is to set as **Please Enter Credit Card Number**
* [x] `Mode` is to set as **Password**
  {% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's Textbox control.

| Output Property | Purpose                                             | Example               |
| --------------- | --------------------------------------------------- | --------------------- |
| CurrentValue    | Get Current value from Lowcodera Textbox Component. | TextBox2.CurrentValue |
| {% endtab %}    |                                                     |                       |
| {% endtabs %}   |                                                     |                       |

### Multiline Textbox

![](/files/HaGxYMCVxfqKgpobW2OD)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Comments**
* [x] `Placeholder` is to set as **Please Enter Comments**
* [x] `Mode` is to set as **Multilines Text**
* [x] `LineCount` is to set as **5**
  {% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's Textbox control.

| Output Property | Purpose                                             | Example               |
| --------------- | --------------------------------------------------- | --------------------- |
| CurrentValue    | Get Current value from Lowcodera Textbox Component. | TextBox2.CurrentValue |
| {% endtab %}    |                                                     |                       |
| {% endtabs %}   |                                                     |                       |

### Textbox with Validation

![](/files/HqYQ61nE56vvOMn2oV7X)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Name**
* [x] `Placeholder` is to set as **Please Enter Name**
* [x] `IsError` property to be set as `If(IsBlank(txtnamebox.CurrentValue),true,false)`
* [x] `ErrorMessage` property to be set as **Please enter valid value**
  {% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's Textbox control.

| Output Property | Purpose                                             | Example               |
| --------------- | --------------------------------------------------- | --------------------- |
| CurrentValue    | Get Current value from Lowcodera Textbox Component. | TextBox2.CurrentValue |
| {% endtab %}    |                                                     |                       |
| {% endtabs %}   |                                                     |                       |


# Vertical Navbar

lowcodera Vertical Navigation Bar

## Purpose

Our vertical menu component instantly provides your Power Apps with a dynamic professional grade navigation solution. Define multi-level navigation items, customize the look and allow users to expand/collapse the menu to create a stunning user experience.

## Variations

‌There are several variations of navigation bar with different colors and configuration properties.

![](/files/9Qza2PSQpDNutRW9BAl4)

## Component Properties

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th>Control Property</th><th width="242">Description</th><th width="150">Required</th><th width="150">Accepted Values</th></tr></thead><tbody><tr><td>Property</td><td>Description</td><td>Required</td><td>Accepted Values</td></tr><tr><td>Items</td><td>Property to define the contents of the navbar</td><td>Required</td><td>JSON </td></tr><tr><td>Theme</td><td>Property to change theme of the navigation bar</td><td>X</td><td><p>Default</p><p>Danger</p><p>Info</p><p>Primary</p><p>Secondary</p><p>Success</p><p>Warning</p><p></p></td></tr><tr><td>FontSize</td><td>Property to set font size </td><td>X</td><td>Number</td></tr><tr><td>IconName</td><td>Property to icon name for header</td><td>X</td><td><a href="https://fontawesome.com/v5.15/icons?d=gallery&#x26;p=2&#x26;m=free">Font-awosome icon name</a></td></tr><tr><td>HeaderIsClickable</td><td>Property to make header clickable.</td><td>X</td><td>Boolean</td></tr><tr><td>HeaderText</td><td>Property to change header title</td><td>X</td><td>Text</td></tr><tr><td>Default</td><td>Property to set default selection from vertical menu.</td><td>X</td><td>Numeric</td></tr><tr><td>ImageURL</td><td>Property to set Image URL as background.</td><td>X</td><td>Text</td></tr><tr><td>CollapsedWidth</td><td>Property to set width we want to have when vertical navigation menu in collapsed stage.</td><td>X</td><td>Numeric</td></tr><tr><td>Collapsed</td><td>Property to set default vertical navaigation position as collapsed.</td><td>X</td><td>Boolean</td></tr><tr><td>IconColor</td><td>Property to set icon color for navigation menu item.</td><td>X</td><td>Boolean</td></tr><tr><td>FontColor</td><td>Property to set font color with navigation menu item</td><td>X</td><td>String (HEX CODE in Upper Case)</td></tr></tbody></table>

## ​Example

> Note: Make sure Navigation Component you are adding on the screen is Reordered with the "Bring to Front" option.

{% tabs %}
{% tab title="Static Collection Example" %}
In this example, a collection with static data called `globalverticalnav` is defined in the Power App. The **`items`** property of the navigation bar component is then bound to this collection.

```markup
Table(
    {
        type: "DropDown",
        title: "Employee Corner",
        icon: "object-group",
        key: "ec",
        dropDown: ForAll([
            {
                type: "Action",
                title: "Log Timesheet",
                key: "logtimesheet"
            },
            {
                type: "Action",
                title: "Apply Leave",
                key: "leave"
            },
            {
                type: "Action",
                title: "My Projects",
                key: "projects"
            }
        ], {Value: ThisRecord})
    },
    {
        type: "DropDown",
        title: "HR Corner",
        icon: "chart-area",
        key: "hrcorner",
        containerIdentifier: "contactConainer",
        height: 150,
        direction: "bottom-start",
        dropDown: ForAll([
            {
                type: "Action",
                title: "HR Policies",
                key: "policies"
            },
            {
                type: "Action",
                title: "TimeSheet",
                key: "timesheet"
            },
            {
                type: "Action",
                title: "Leave Approval",
                key: "approval"
            },
            {
                type: "Action",
                title: "Notifications",
                key: "notification"
            }
        ], {Value: ThisRecord})
    },
    {
        type: "Action",
        icon: "cog",
        key: "settings",
        title: "Settings"
    },
    {
        type: "Action",
        key: "user",
        icon: "user-circle",
        title: "User"
    }
)
```

The above code snippet will generate the following navigation bar.

![](/files/D8CHKKPp7Fzs3FcguDOa)

![](/files/ww4l6M5T7U2KzZxz7E4s)
{% endtab %}

{% tab title="Property Configration" %}

* [x] `IconName` property is to set as **bars**
* [x] `HeaderIsClickable` is to set as **true**
* [x] `HeaderText` is to set as **Vertical Nav**
* [x] All control properties can be left as default
  {% endtab %}

{% tab title="Output Property" %}
Please check the following Output properties for Lowcodera's V Navbar control.

<table><thead><tr><th>Output Property</th><th width="247.33333333333331">Purpose</th><th>Example</th></tr></thead><tbody><tr><td>CurrentKey</td><td>Get Current selected Item's Key from vertical navigation bar.</td><td>VerticalNavBar1.CurrentKey</td></tr><tr><td>CollapsedStatus</td><td>Returns "Collapsed" or "Expanded" depending on the current state of the menu</td><td>VerticalNavBar1.CollapsedStatus</td></tr></tbody></table>

{% endtab %}

{% tab title="Event Configuration" %}
Once we configure our Navigation bar, we need to configure `OnChange`event.  The code contains one switch function which will navigate user to appropriate page when any item is selected from the navigation bar.

```
Switch(
    VerticalNavBar1.CurrentKey,
    "0",
    Navigate(Home),
    "logtimesheet",
    Navigate(Home),
    "leave",
    Navigate(Navbar),
    "projects",
    Navigate(Buttons),
    "policies",
    Navigate(Icons),
    "timesheet",
    Navigate(Cards),
    "approval",
    Navigate(Dropdown),
    "notification",
    Navigate('Bar Chart'),
    "settings",
    Navigate('Column Chart'),
    "user"
)


```

{% endtab %}
{% endtabs %}


# Area Chart

lowcodera Area Chart Component

## Purpose

With their mountain-like appearance, Area Charts are used to represent quantitative variations.

![](/files/2XIXMcv70mOzUajgIZYk)

## Variations <a href="#chart-variations" id="chart-variations"></a>

‌There are several variations of Area charts which are supported through the configuration of data and component properties.

* Basic Area Chart&#x20;
* Spline Area Chart&#x20;
* Stepline Area Chart&#x20;
* Area chart with Dashline

## Working with Data

‌The data format for the Area chart is the same as for other bar charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint. &#x20;

{% tabs %}
{% tab title="Static Collection Example" %}
In this example, a collection with static data called *ColAreaChart* is defined in the Power App. The **`items`** property of the bar chart component is then bound to this collection.

```csharp
Table(
    {
        name: "Actual",
        data: ForAll([
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 60
            },
            {
                label: 2003,
                value: 28
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 36
            },
            {
                label: 2006,
                value: 43
            },
            {
                label: 2007,
                value: 55
            },
            {
                label: 2008,
                value: 21
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Budgeted",
        data:ForAll([
            {
                label: 2001,
                value: 25
            },
            {
                label: 2002,
                value: 42
            },
            {
                label: 2003,
                value: 50
            },
            {
                label: 2004,
                value: 18
            },
            {
                label: 2005,
                value: 17
            },
            {
                label: 2006,
                value: 19
            },
            {
                label: 2007,
                value: 58
            },
            {
                label: 2008,
                value: 35
            }
        ],{Value:ThisRecord})
    }
)
```

The above code snippet will generate the following bar chart.

![](/files/-MkfMplBUEqVanKy2Y_I)
{% endtab %}

{% tab title="Dynamic Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](/files/-MlKMKdWBnSBmzEjZ7So)

The below code snippet will generate dynamic collection to be consumed by component.

```
ClearCollect(
    ColAreaChart,
    {
        name: "Actual",
        data: ForAll(
            Finances,
            {
                Value: {
                    label: ThisRecord.Year,
                    value: ThisRecord.Actual
                }
            }
        )
    },
    {
        name: "Budgeted",
        data: ForAll(
            Finances,
            {
                Value: {
                    label: ThisRecord.Year,
                    value: ThisRecord.Budget
                }
            }
        )
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](/component-properties/chart-components)&#x20;
{% endhint %}

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th width="183">Accepted Values</th><th width="151">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>LineType</td><td>Property to show different types of lines</td><td><p>Smooth</p><p>Stepline</p><p>Straight</p></td><td>X</td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>ShowReversed</td><td>Property to represent the Y-Axis from the right side</td><td>Boolean</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for bars.</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td><td>X</td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for bars</td><td>URL</td><td>X</td></tr></tbody></table>

## Examples

### Basic Area Chart

![](/files/-MkfMuMuZbvLQM1X2kLz)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in [section](/area-chart#working-with-data).&#x20;
{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

### Spline Area Chart

![Spline Chart](/files/-MkfN1jKx9TWt_rp0Nj0)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in [section](/area-chart#working-with-data).&#x20;
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `LineType` property is set to **Smooth**
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Stepline Area Chart

![Stepline Area Chart](/files/-MkfN9xovLrqp6rE9rFc)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the data collection

```csharp
ClearCollect(
    ColStackedColumnChart,
    {
        name: "Marine Sprite",
        data: ForAll([
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 60
            },
            {
                label: 2003,
                value: 28
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 36
            },
            {
                label: 2006,
                value: 43
            },
            {
                label: 2007,
                value: 55
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Striking Calf",
        data: ForAll([
            {
                label: 2001,
                value: 53
            },
            {
                label: 2002,
                value: 52
            },
            {
                label: 2003,
                value: 50
            },
            {
                label: 2004,
                value: 18
            },
            {
                label: 2005,
                value: 15
            },
            {
                label: 2006,
                value: 35
            },
            {
                label: 2007,
                value: 40
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Tank Picture",
        data: ForAll([
            {
                label: 2001,
                value: 25
            },
            {
                label: 2002,
                value: 37
            },
            {
                label: 2003,
                value: 75
            },
            {
                label: 2004,
                value: 48
            },
            {
                label: 2005,
                value: 65
            },
            {
                label: 2006,
                value: 29
            },
            {
                label: 2007,
                value: 4
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Bucket Slope",
        data: ForAll([
            {
                label: 2001,
                value: 25
            },
            {
                label: 2002,
                value: 12
            },
            {
                label: 2003,
                value: 19
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 25
            },
            {
                label: 2006,
                value: 24
            },
            {
                label: 2007,
                value: 10
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Reborn Kid",
        data: ForAll([
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 32
            },
            {
                label: 2003,
                value: 19
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 14
            },
            {
                label: 2006,
                value: 10
            },
            {
                label: 2007,
                value: 7
            }
        ],{Value:ThisRecord})
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `LineType` property is set to **Stepline**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Area Chart with Dashline

![Area Chart with Dashline](/files/-MkfNHc8SxviqI7X5OS0)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the data collection.&#x20;

```csharp
ClearCollect(
    ColAreaChartDashline,
    {
        name: "Population",
        dashlength: 7, // Resposible for Dashline
        data: ForAll([
            {
                label: "Cairo",
                value: 115
            },
            {
                label: "Damietta",
                value: 50
            },
            {
                label: "Alex",
                value: 80
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Education",
        dashlength: 9,
        data: ForAll([
            {
                label: "Cairo",
                value: 180
            },
            {
                label: "Damietta",
                value: 50
            },
            {
                label: "Alex",
                value: 70
            }
        ],{Value:ThisRecord})
    },
    {
        name: "Income",
        dashlength: 2,
        data: ForAll([
            {
                label: "Cairo",
                value: 100,
                isnull: false
            },
            {
                label: "Damietta",
                value: 100
            },
            {
                label: "Alex",
                value: 150
            }
        ],{Value:ThisRecord})
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `LineType` property is set to **Smooth**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}


# Bar Chart

lowcodera Bar Chart Component

## Purpose

‌Bar charts are typically used to compare several categories of data. Bar charts are ideal for visualizing the distribution or proportion of data items when there are more than three categories‌.

## Variations

![](/files/M0rQHl9Uluo6D5cWcXfN)

‌There are several variations of bar charts which are supported through configuration of data and component properties.

* Basic Bar Chart
* Grouped Bar Chart
* Stacked Bar Chart
* 100% Stacked Bar Chart
* Reversed Bar Chart
* Bar Chart with markers
* Image background Bar Chart

## ​Working with Data

‌The data format for the bar chart is the same as for other XY charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint. &#x20;

{% tabs %}
{% tab title="Static Collection Example" %}
In this example, a collection with static data called `colBarChart` is defined in the Power App. The **`items`** property of the bar chart component is then bound to this collection.

```markup
Table(
    {
        name: "Population",
        data: [
            {
                label: "South Korea",
                value: 400
            },
            {
                label: "Canada",
                value: 430
            },
            {
                label: "United Kingdom",
                value: 448
            },
            {
                label: "Netherlands",
                value: 500
            },
            {
                label: "Italy",
                value: 700
            },
            {
                label: "France",
                value: 1100
            },
            {
                label: "Japan",
                value: 1500
            },
            {
                label: "United States",
                value: 1456
            },
            {
                label: "Germany",
                value: 1700
            }
        ]
    }
)
```

The above code snippet will generate the following bar chart.

![](/files/-MkgTq52QbD4RSla761K)
{% endtab %}

{% tab title="Dynamic Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](/files/-MlKF8e-prp7SCpLohRQ)

The below code snippet will generate dynamic collection to be consumed by component.

```

Table(
    {
        name: "Population",
        data: ForAll(
        //Replace Populations with the name of your datasource
            Populations,
            {
                Value: {
                    label: ThisRecord.Country,
                    value: ThisRecord.'Population (cr375_population)'
                }
            }
        )
    }
)
```

{% endtab %}

{% tab title="Property Configration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](/component-properties/chart-components)&#x20;
{% endhint %}

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th width="189">Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td>Control Property</td><td>Description</td><td>Accepted Values</td><td>Required</td></tr><tr><td>ShowDistributed</td><td>Property to give each series a unique color<strong>.</strong></td><td>Boolean</td><td>X</td></tr><tr><td>StackedType</td><td>Property to change sack type of a bar</td><td><p>None</p><p>Stacked </p><p>Stacked100</p></td><td>X</td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any append words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>Show100HeightBar</td><td>Property to set 100% height of the bar</td><td>Boolean</td><td>X</td></tr><tr><td>ShowReversed</td><td>Property to represent the Y-Axis from the right side</td><td>Boolean</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for bars.</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td><td>X</td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for bars</td><td>URL</td><td>X</td></tr></tbody></table>

## Examples

### Grouped Bar Chart

![](/files/-MkgUAWE5KFl4tI-YQao)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the data collection&#x20;

```
ClearCollect(
    ColBarChartGroup,
    {
        name: "Actual",
        data: [
            {
                label: "2001",
                value: 44
            },
            {
                label: "2002",
                value: 60
            },
            {
                label: "2003",
                value: 28
            },
            {
                label: "2004",
                value: 32
            },
            {
                label: "2005",
                value: 36
            },
            {
                label: "2006",
                value: 43
            },
            {
                label: "2007",
                value: 55
            },
            {
                label: "2008",
                value: 21
            }
        ]
    },
    {
        name: "Budget",
        data: [
            {
                label: "2001",
                value: 25
            },
            {
                label: "2002",
                value: 42
            },
            {
                label: "2003",
                value: 50
            },
            {
                label: "2004",
                value: 18
            },
            {
                label: "2005",
                value: 17
            },
            {
                label: "2006",
                value: 19
            },
            {
                label: "2007",
                value: 58
            },
            {
                label: "2008",
                value: 35
            }
        ]
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

### Stacked Bar Chart

![](/files/-MkgUF7-hb42jJjPv1aB)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the data collection.

```
ClearCollect(
    ColStackedBarChart,
    {
        name: "Marine Sprite",
        data: [
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 60
            },
            {
                label: 2003,
                value: 28
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 36
            },
            {
                label: 2006,
                value: 43
            },
            {
                label: 2007,
                value: 55
            }
        ]
    },
    {
        name: "Striking Calf",
        data: [
            {
                label: 2001,
                value: 53
            },
            {
                label: 2002,
                value: 52
            },
            {
                label: 2003,
                value: 50
            },
            {
                label: 2004,
                value: 18
            },
            {
                label: 2005,
                value: 15
            },
            {
                label: 2006,
                value: 35
            },
            {
                label: 2007,
                value: 40
            }
        ]
    },
    {
        name: "Tank Picture",
        data: [
            {
                label: 2001,
                value: 25
            },
            {
                label: 2002,
                value: 37
            },
            {
                label: 2003,
                value: 75
            },
            {
                label: 2004,
                value: 48
            },
            {
                label: 2005,
                value: 65
            },
            {
                label: 2006,
                value: 29
            },
            {
                label: 2007,
                value: 4
            }
        ]
    },
    {
        name: "Bucket Slope",
        data: [
            {
                label: 2001,
                value: 25
            },
            {
                label: 2002,
                value: 12
            },
            {
                label: 2003,
                value: 19
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 25
            },
            {
                label: 2006,
                value: 24
            },
            {
                label: 2007,
                value: 10
            }
        ]
    },
    {
        name: "Reborn Kid",
        data: [
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 32
            },
            {
                label: 2003,
                value: 19
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 14
            },
            {
                label: 2006,
                value: 10
            },
            {
                label: 2007,
                value: 7
            }
        ]
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `StackedType` property is set to **Stacked**
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### 100% Stacked Bar Chart

![](/files/-MkgULQcQHxRkvQePDQp)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the data collection. Use the same collection used for [Stacked Bar ](/bar-chart-1#stacked-bar-chart)chart.
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `StackedType` property is set to **Stacked100**
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Reversed Bar Chart

![](/files/-MkgUcAsYUIX8Q9532Aq)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the data collection. Use the same collection used for [Stacked Bar ](/bar-chart-1#working-with-data)chart.
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `ShowReversed` property is set to **true**
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Bar Chart with Markers

![](/files/-MkgUQDbzWf0d7qNwuyl)

{% tabs %}
{% tab title="Data Configuration" %}
One or More than one data series is defined in the data collection.

```csharp
Table(
    {
        name: "Actual",
        color: "#546E7A",
        expectedlabel: "Expected",
        data: [
            {
                label: "2011",
                value: 1200,
                color: "#00e396",
                expectedlabel: "Expected",
                expectedvalue: 1400,
                expectedcolor: "#FF0000"
            },
            {
                label: "2012",
                value: 4000,
                color: "#00e396",
                expectedlabel: "Expected",
                expectedvalue: 3500,
                expectedcolor: "#FF0000"
            },
            {
                label: "2013",
                value: 5400,
                color: "#00e396",
                expectedvalue: 5500,
                expectedlabel: "Expected",
                expectedcolor: "#FF0000"
            },
            {
                label: "2014",
                value: 8000,
                color: "#00e396",
                expectedvalue: 6000,
                expectedlabel: "Expected",
                expectedcolor: "#FF0000"
            },
            {
                label: "2015",
                value: 7000,
                color: "#00e396",
                expectedvalue: 8000,
                expectedlabel: "Expected",
                expectedcolor: "#FF0000"
            }
        ]
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Bar Chart with Background

![](/files/-MkgUVi9FaBHToTqp500)

{% tabs %}
{% tab title="Data Configuration" %}
One or More than one data series is defined in the data collection. You can use same collection created in [Working with Data](/bar-chart-1#working-with-data)  section.
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `FillType` property is set to **Image**
* [x] `BackgroundImage`property is set to **with Image URL. (Example:** "<https://cdn.pixabay.com/photo/2017/11/04/21/09/textile-2918844_1280.jpg>")
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}


# Column Chart

lowcodera Column Chart Component

## Purpose

Column charts are useful for showing data changes over a period of time or for illustrating comparisons among items. In column charts, categories are typically organized along the horizontal axis and values along the vertical axis.

## Variations <a href="#chart-variations" id="chart-variations"></a>

![](/files/ee0WqnZaqx2f0IWfttp3)

‌There are several variations of column charts which are supported through the configuration of data and component properties.

* Basic Column Chart&#x20;
* Grouped Column Chart&#x20;
* Stacked Column Chart&#x20;
* 100% Stacked Column Chart&#x20;
* Reversed Column Chart&#x20;
* Column Chart with markers
* Column Chart with background

## Working with Data

‌The data format for the column chart is the same as for other column charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint. &#x20;

{% tabs %}
{% tab title="Static Collection Example" %}
In this example, a collection with static data called *ColColumnChartBasic* is defined in the Power App. The **`items`** property of the column chart component is then bound to this collection.

```markup
Table(
    {
        name: "Population",
        data: [
            {
                label: "South Korea",
                value: 400
            },
            {
                label: "Canada",
                value: 430
            },
            {
                label: "United Kingdom",
                value: 448
            },
            {
                label: "Netherlands",
                value: 500
            },
            {
                label: "Italy",
                value: 700
            },
            {
                label: "France",
                value: 1100
            },
            {
                label: "Japan",
                value: 1500
            },
            {
                label: "United States",
                value: 1456
            },
            {
                label: "Germany",
                value: 1700
            }
        ]
    }
)

```

The above code snippet will generate the following column chart.

![](/files/-MkaU4uYC8WHFyp8BKUw)
{% endtab %}

{% tab title="Dynamic Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](/files/-MlKF8e-prp7SCpLohRQ)

The below code snippet will generate dynamic collection to be consumed by component.

```

Table(
    {
        name: "Population",
        data: ForAll(
            //Replace Populations with the name of your datasource
            Populations,
            {
                Value: {
                    label: ThisRecord.Country,
                    value: ThisRecord.'Population (cr375_population)'
                }
            }
        )
    }
)

```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](/component-properties/chart-components)&#x20;
{% endhint %}

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th width="189">Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td>Control Property</td><td>Description</td><td>Accepted Values</td><td>Required</td></tr><tr><td>ShowDistributed</td><td>Property to give each series a unique color.</td><td>Boolean</td><td>X</td></tr><tr><td>StackedType</td><td>Property to change sack type of a bar</td><td><p>None</p><p>Stacked </p><p>Stacked100</p></td><td>X</td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>Show100HeightBar</td><td>Property to set 100% height of the bar</td><td>Boolean</td><td>X</td></tr><tr><td>ShowReversed</td><td>Property to represent the Y-Axis from the right side</td><td>Boolean</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for bars.</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td><td>X</td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for bars</td><td>URL</td><td>X</td></tr></tbody></table>

## Examples

### Basic Column Chart

![Basic Column Chart](/files/-MkaW-pKsp4PRsi-YX1m)

{% tabs %}
{% tab title="Data Configuration" %}
A single data series is defined in the collection

```
ClearCollect(
    ColColumnChart,
    {
        name: "Population",
        
        data: [
            {
                label: "South Korea",
                value: 400
            },
            {
                label: "Canada",
                value: 430
            },
            {
                label: "United Kingdom",
                value: 448
            },
            {
                label: "Netherlands",
                value: 500
            },
            {
                label: "Italy",
                value: 700
            },
            {
                label: "France",
                value: 1100
            },
            {
                label: "Japan",
                value: 1500
            },
            {
                label: "United States",
                value: 1456
            }
,
            {
                label: "Germany",
                value: 1700
            }
        ]
    }
        ]
    }
);
```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

### Grouped Column Chart

![](/files/-MkaZ5FjoXL7z_DN0Jhf)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the collection

```
ClearCollect(
    ColColumnChart,
    {
        name: "Series-1",
        data: [
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 60
            },
            {
                label: 2003,
                value: 28
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 36
            },
            {
                label: 2006,
                value: 43
            },
            {
                label: 2007,
                value: 55
            },
            {
                label: 2008,
                value: 21
            }
        ]
    },
    {
        name: "Series-2",
        data: [
            {
                label: 2001,
                value: 25
            },
            {
                label: 2002,
                value: 42
            },
            {
                label: 2003,
                value: 50
            },
            {
                label: 2004,
                value: 18
            },
            {
                label: 2005,
                value: 17
            },
            {
                label: 2006,
                value: 19
            },
            {
                label: 2007,
                value: 58
            },
            {
                label: 2008,
                value: 35
            }
        ]
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

### Stacked Column Chart

![](/files/-Mkac6Vwx9MivY3BT_vE)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the data collection

```
ClearCollect(
    ColStackedColumnChart,
    {
        name: "Marine Sprite",
        data: [
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 60
            },
            {
                label: 2003,
                value: 28
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 36
            },
            {
                label: 2006,
                value: 43
            },
            {
                label: 2007,
                value: 55
            }
        ]
    },
    {
        name: "Striking Calf",
        data: [
            {
                label: 2001,
                value: 53
            },
            {
                label: 2002,
                value: 52
            },
            {
                label: 2003,
                value: 50
            },
            {
                label: 2004,
                value: 18
            },
            {
                label: 2005,
                value: 15
            },
            {
                label: 2006,
                value: 35
            },
            {
                label: 2007,
                value: 40
            }
        ]
    },
    {
        name: "Tank Picture",
        data: [
            {
                label: 2001,
                value: 25
            },
            {
                label: 2002,
                value: 37
            },
            {
                label: 2003,
                value: 75
            },
            {
                label: 2004,
                value: 48
            },
            {
                label: 2005,
                value: 65
            },
            {
                label: 2006,
                value: 29
            },
            {
                label: 2007,
                value: 4
            }
        ]
    },
    {
        name: "Bucket Slope",
        data: [
            {
                label: 2001,
                value: 25
            },
            {
                label: 2002,
                value: 12
            },
            {
                label: 2003,
                value: 19
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 25
            },
            {
                label: 2006,
                value: 24
            },
            {
                label: 2007,
                value: 10
            }
        ]
    },
    {
        name: "Reborn Kid",
        data: [
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 32
            },
            {
                label: 2003,
                value: 19
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 14
            },
            {
                label: 2006,
                value: 10
            },
            {
                label: 2007,
                value: 7
            }
        ]
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `StackedType` property is set to **Stacked**
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### 100% Stacked Column Chart

![](/files/-Mkace9Q9NxC_Rd_S4GA)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the data collection. Use the same collection used for [Stacked Column](/column-chart#stacked-column-chart) chart.
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `StackedType` property is set to **Stacked100**
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Reversed Column Chart

![](/files/-Mkaelblv3-vpokuJoT9)

{% tabs %}
{% tab title="Data Configuration" %}
One or More than one data series is defined in the data collection.

```
ClearCollect(
    ColColumnChartRev,
    {
        name: "Population",
        data: [
            {
                label: "June",
                value: 400
            },
            {
                label: "July",
                value: 430
            },
            {
                label: "August",
                value: 448
            },
            {
                label: "September",
                value: 500
            },
            {
                label: "October",
                value: 700
            },
            {
                label: "France",
                value: 1100
            },
            {
                label: "November",
                value: 1500
            },
            {
                label: "December",
                value: 1456
            }
        ]
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `ShowReversed` property is set to **true**
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Column Chart with Markers

![](/files/-MkaixS1cqYrlrtpcDpM)

{% tabs %}
{% tab title="Data Configuration" %}
One or More than one data series is defined in the data collection.

```csharp
Table(
    {
        name: "Actual",
        color: "#546E7A",
        expectedlabel: "Expected",
        data: [
            {
                label: "2011",
                value: 1200,
                color: "#00e396",
                expectedlabel: "Expected",
                expectedvalue: 1400,
                expectedcolor: "#FF0000"
            },
            {
                label: "2012",
                value: 4000,
                color: "#00e396",
                expectedlabel: "Expected",
                expectedvalue: 3500,
                expectedcolor: "#FF0000"
            },
            {
                label: "2013",
                value: 5400,
                color: "#00e396",
                expectedvalue: 5500,
                expectedlabel: "Expected",
                expectedcolor: "#FF0000"
            },
            {
                label: "2014",
                value: 8000,
                color: "#00e396",
                expectedvalue: 6000,
                expectedlabel: "Expected",
                expectedcolor: "#FF0000"
            },
            {
                label: "2015",
                value: 7000,
                color: "#00e396",
                expectedvalue: 8000,
                expectedlabel: "Expected",
                expectedcolor: "#FF0000"
            }
        ]
    }
)

```

{% endtab %}

{% tab title="Property Configuration" %}
All other control properties can be left as default
{% endtab %}
{% endtabs %}

### Column Chart with Background

![](/files/-Mkak8qSMlxpsQTCarkk)

{% tabs %}
{% tab title="Data Configuration" %}
One or More than one data series is defined in the data collection. You can use same collection created in [Basic Column Chart](/column-chart#basic-column-chart) section.
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `FillType` property is set to **Image**
* [x] `BackgroundImage`property is set to **with Image URL. (Example:** "<https://cdn.pixabay.com/photo/2017/11/04/21/09/textile-2918844_1280.jpg>")
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}


# Donut Chart

Lowcodera Donut Chart Component

## Purpose

Donut charts are used **to show the proportions of categorical data**, with the size of each piece representing the proportion of each category.&#x20;

## Variations

![](/files/4KJ5Mnr5rw5GnWvEan7V)

There are several variations of Donut charts which are supported through the configuration of data and component properties.

* Basic Donut Chart
* Donut Chart with Image
* Gradient Donut Chart

## Working with Data

‌The data format for the Donut chart is the same as for other Lowcodera charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint. &#x20;

{% tabs %}
{% tab title="Static Collection example" %}
In this example, a table with static data called `ColDonutChart` is defined in the Power App. The **`items`** property of the donut chart component is then bound to this collection.

```csharp
Table(
    {
        name: "Delivery",
        data: 5
    },
    {
        name: "Finance",
        data: 12
    },
    {
        name: "HR",
        data: 19
    },
    {
        name: "Planning",
        data: 25
    }
)
```

The above code snippet will generate the following Donut chart.

![](/files/-MkgI0cvZ6-vWaKFGhFo)
{% endtab %}

{% tab title="Dynamic Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](/files/-MlKjYsnrI0i0oUTA2gt)

The below code snippet will generate dynamic collection to be consumed by component.

```csharp
ForAll(
    Projects,
    {
        name: ThisRecord.Category,
        data: Value(ThisRecord.Rate)
    }
)

```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](/component-properties/chart-components)&#x20;
{% endhint %}

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th>Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any append words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for donut chart.</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td><td>X</td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for donut</td><td>URL</td><td>X</td></tr><tr><td>StartAngle</td><td>Property to Set the starting Angle of the <strong>Pie</strong> or <strong>Doughnut</strong> Chart in degrees.<br></td><td>Numeric (ranges 0 to 360)</td><td>X</td></tr><tr><td>EndAngle</td><td>Property to Set the ending Angle of the <strong>Pie</strong> or <strong>Doughnut</strong> Chart in degrees.Numeric (ranges 0 to 360)</td><td>Numeric (ranges 0 to 360)</td><td>X</td></tr></tbody></table>

## Examples

### Donut Chart with Image

![](/files/-MkgIaPaGwHy73utFFVE)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in [section](/donut-chart#working-with-data).&#x20;
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `FillType` property is set to **Image**
* [x] `BackgroundImage` property is set to **URL** (e.g. <https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260>)
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Donut Pie Chart&#x20;

![](/files/-MkgIe2865rjk1N-xeOm)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in [section](/donut-chart#working-with-data).&#x20;
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `FillType` property is set to **Gradient**
* [x] `GradientShadeIntensity` property is set to **3**
* [x] `GradientOpcityFrom` property is set to **5**
* [x] `GradientOpcityTo` property is set to **7**
* [x] `GradientInverse` property is set to **true**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}


# Heatmap Chart

lowcodera Heatmap component

## Purpose

A heatmap contains values representing various shades of the same colour for each value to be plotted. Usually the darker shades of the chart represent higher values than the lighter shade.

## Variations

![](/files/HL18dQGh1JEtoW64KixU)

There are several variations of Heatmap charts which are supported through the configuration of data and component properties.

* Basic Heatmap Chart
* Heatmap with multiple series
* Heatmap with Ranges

## Working with Data

‌The data format for the Heatmap chart is the same as for other Lowcodera charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint. &#x20;

{% tabs %}
{% tab title="Static Collection example" %}
In this example, a collection with static data called `colheatmapsinglecolor`is defined in the Power App. The **`items`** property of the heatmap chart component is then bound to this collection.

```csharp
Table(
    {
        name: "Population",
        color: "#49b689",
        data: [
            {
                label: "Project Alpha",
                value: 115
            },
            {
                label: "Project Beta",
                value: 150
            },
            {
                label: "Project Gamma",
                value: 180
            },
            {
                label: "Project Delta",
                value: 30
            },
            {
                label: "Project Epsilon",
                value: 110
            },
            {
                label: "Project Zeta",
                value: 251
            },
            {
                label: "Project Eta",
                value: 90
            },
            {
                label: "Project Theta",
                value: 145
            },
            {
                label: "Project Iota",
                value: 120
            },
            {
                label: "Project Kappa",
                value: 80
            }
        ]
    },
    {
        name: "Education",
        data: [
            {
                label: "Project Alpha",
                value: 142
            },
            {
                label: "Project Beta",
                value: 100
            },
            {
                label: "Project Gamma",
                value: 85
            },
            {
                label: "Project Delta",
                value: 120
            },
            {
                label: "Project Epsilon",
                value: 170
            },
            {
                label: "Project Zeta",
                value: 75
            },
            {
                label: "Project Eta",
                value: 45
            },
            {
                label: "Project Theta",
                value: 117
            },
            {
                label: "Project Iota",
                value: 60
            },
            {
                label: "Project Kappa",
                value: 141
            }
        ]
    },
    {
        name: "Income",
        data: [
            {
                label: "Project Alpha",
                value: 15
            },
            {
                label: "Project Beta",
                value: 150
            },
            {
                label: "Project Gamma",
                value: 180
            },
            {
                label: "Project Delta",
                value: 25
            },
            {
                label: "Project Epsilon",
                value: 190
            },
            {
                label: "Project Zeta",
                value: 85
            },
            {
                label: "Project Eta",
                value: 47
            },
            {
                label: "Project Theta",
                value: 150
            },
            {
                label: "Project Iota",
                value: 152
            },
            {
                label: "Project Kappa",
                value: 41
            }
        ]
    }
)

```

The above code snippet will generate the following Heatmap chart.

![](/files/-Mkq4bX8Pu5RDcnhwtCe)
{% endtab %}

{% tab title="Dynamic Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](/files/-MlTY8VMoDy6cXiUhlFx)

The below code snippet will generate dynamic collection to be consumed by component.

```
ClearCollect(
    CategoryCol,
    Distinct(
        Budgets,
        Category
    )
);
Clear(ItemCategoryCol);
ForAll(
    CategoryCol,
    Collect(
        ItemCategoryCol,
        {
            ItemCategory: ThisRecord.Result,
            ItemColor:First(Filter(Budgets,Category=Result)).Color
        }
    )
);
Clear(colheatmapsinglecolor);
ForAll(
    ItemCategoryCol,
    Collect(
        colheatmapsinglecolor,
        {
            name: ThisRecord.ItemCategory,
            color:ItemColor,
            data: ForAll(
                Filter(
                    Budgets,
                    Category = ItemCategory
                ),
                {
                    Value: {
                        label: ThisRecord.Name,
                        value: ThisRecord.Value
                    }
                }
            )
        }
    )
);
```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](/component-properties/chart-components)&#x20;
{% endhint %}

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th width="153">Required</th><th width="180">Accepted Values</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Required</strong></td><td><strong>Accepted Values</strong></td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>X</td><td>Text</td></tr><tr><td>Radius</td><td>Property to set the Radius for heat map </td><td>X</td><td>Numeric (ranges from 0 to 70)</td></tr></tbody></table>

## Examples

### Heatmap Chart with Multiple Series

![](/files/-Mkq4h4TpEOdodfOBTqM)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```
ClearCollect(
    heatmapbasicsseries,
    {
        name: "Population",
        data: [
            {
                label: "Project Alpha",
                value: 115
            },
            {
                label: "Project Beta",
                value: 50
            },
            {
                label: "Praject Gamma",
                value: 80
            },
            {
                label: "Praject Delta",
                value: 30
            },
            {
                label: "Praject Epsilon",
                value: 10
            },
            {
                label: "Praject Zeta",
                value: 25
            },
            {
                label: "Praject Eta",
                value: 90
            },
            {
                label: "Praject Theta",
                value: 145
            },
            {
                label: "Praject Iota",
                value: 120
            },
            {
                label: "Praject Kappa",
                value: 80
            }
        ]
    },
    {
        name: "Education",
        data: [
            {
                label: "Project Alpha",
                value: 42
            },
            {
                label: "Project Beta",
                value: 100
            },
            {
                label: "Praject Gamma",
                value: 85
            },
            {
                label: "Praject Delta",
                value: 120
            },
            {
                label: "Praject Epsilon",
                value: 70
            },
            {
                label: "Praject Zeta",
                value: 75
            },
            {
                label: "Praject Eta",
                value: 45
            },
            {
                label: "Praject Theta",
                value: 17
            },
            {
                label: "Praject Iota",
                value: 60
            },
            {
                label: "Praject Kappa",
                value: 41
            }
        ]
    },
    {
        name: "Income",
        data: [
            {
                label: "Project Alpha",
                value: 15
            },
            {
                label: "Project Beta",
                value: 150
            },
            {
                label: "Praject Gamma",
                value: 180
            },
            {
                label: "Praject Delta",
                value: 25
            },
            {
                label: "Praject Epsilon",
                value: 90
            },
            {
                label: "Praject Zeta",
                value: 85
            },
            {
                label: "Praject Eta",
                value: 47
            },
            {
                label: "Praject Theta",
                value: 50
            },
            {
                label: "Praject Iota",
                value: 52
            },
            {
                label: "Praject Kappa",
                value: 41
            }
        ]
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Heatmap Chart with Range

![](/files/-Mkq4pz-eQqZxFQIjrCD)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```
ClearCollect(
    heatmapWithColorRange,
    {
        name: "Population",
        colorRange: [
            {
                from: 0,
                to: 50,
                color: "#8ef19a"
            },
            {
                from: 51,
                to: 100,
                color: "#a370f5"
            },
            {
                from: 101,
                to: 200,
                color: "#f6756f"
            }
        ],
        data: [
            {
                label: "Project Alpha",
                value: 115
            },
            {
                label: "Project Beta",
                value: 50
            },
            {
                label: "Praject Gamma",
                value: 80
            },
            {
                label: "Praject Delta",
                value: 30
            },
            {
                label: "Praject Epsilon",
                value: 10
            },
            {
                label: "Praject Zeta",
                value: 25
            },
            {
                label: "Praject Eta",
                value: 90
            },
            {
                label: "Praject Theta",
                value: 145
            },
            {
                label: "Praject Iota",
                value: 120
            },
            {
                label: "Praject Kappa",
                value: 80
            }
        ]
    },
    {
        name: "Education",
        data: [
            {
                label: "Project Alpha",
                value: 42
            },
            {
                label: "Project Beta",
                value: 100
            },
            {
                label: "Praject Gamma",
                value: 85
            },
            {
                label: "Praject Delta",
                value: 120
            },
            {
                label: "Praject Epsilon",
                value: 70
            },
            {
                label: "Praject Zeta",
                value: 75
            },
            {
                label: "Praject Eta",
                value: 45
            },
            {
                label: "Praject Theta",
                value: 17
            },
            {
                label: "Praject Iota",
                value: 60
            },
            {
                label: "Praject Kappa",
                value: 41
            }
        ]
    },
    {
        name: "Income",
        data: [
            {
                label: "Project Alpha",
                value: 15
            },
            {
                label: "Project Beta",
                value: 150
            },
            {
                label: "Praject Gamma",
                value: 180
            },
            {
                label: "Praject Delta",
                value: 25
            },
            {
                label: "Praject Epsilon",
                value: 90
            },
            {
                label: "Praject Zeta",
                value: 85
            },
            {
                label: "Praject Eta",
                value: 47
            },
            {
                label: "Praject Theta",
                value: 50
            },
            {
                label: "Praject Iota",
                value: 52
            },
            {
                label: "Praject Kappa",
                value: 41
            }
        ]
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `radius`property is set to **50**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}


# Kanban Board

lowcodera Kanban Board Component

Visually depict work at various stages of a process using cards to represent work items and columns to represent each stage of the process.

![lowcodera Kanban Board](/files/EqCbNWMhK8n0f1xhWtjL)

## Configuration of Datasets

There are 3 Dataset which need to be configured to operate the lowcodera Kanban component.

**Boards dataset** – defines the number of boards and their respective properties. Boards are reflected as columns in Kanban.

**Work Items dataset** – defines the individual work items which are laid out as cards on the Kanban Board

**Labels dataset** – defines the various tags which can be added to the Work Item cards.

### Boards Dataset

&#x20;The boards dataset expects a JSON collection with various attributes which are defined below

{% tabs %}
{% tab title="Properties" %}

<table data-header-hidden><thead><tr><th width="168.34220072551398"></th><th width="151.33333333333331"></th><th></th></tr></thead><tbody><tr><td><strong>Attribute</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td>id</td><td>String</td><td>The unique identifier for the board</td></tr><tr><td>title</td><td>String</td><td>The name of the board which is presented at the top</td></tr><tr><td>color</td><td>String</td><td>The color of the text for the title</td></tr><tr><td>backgroundColor</td><td>String</td><td>The background color of the board</td></tr><tr><td>icon</td><td>String</td><td>The icon which is presented next to the title at the top.</td></tr><tr><td>enableAdd</td><td>Boolean</td><td>Determines whether the board supports the option to add new work items to its</td></tr></tbody></table>
{% endtab %}

{% tab title="Sample" %}

```
ClearCollect(
    CollBoards,
    {
        id: "1",
        title: "Not started",
        color: "#000",
        backgroundColor: "#ffffe0",
        icon: "folder-open",
        enableAdd: true
    },
    {
        id: "2",
        title: "In progress",
        color: "#000",
        backgroundColor: "#add8e6",
        icon: "tasks",
        enableAdd: true
    },
    {
        id: "3",
        title: "Completed",
        color: "#000",
        backgroundColor: "#e6ffe6",
        icon: "check-circle",
        enableAdd: true
    },
    {
        id: "4",
        title: "Blocked",
        color: "#000",
        backgroundColor: "#f08080",
        icon: "ban",
        enableAdd: true
    }
);
```

{% endtab %}
{% endtabs %}

### Work Items Dataset

The Work Items dataset expects a JSON collection with various attributes which are defined below.

{% tabs %}
{% tab title="Properties" %}

<table data-header-hidden><thead><tr><th width="236"></th><th width="150"></th><th></th></tr></thead><tbody><tr><td><strong>Attribute</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td>id</td><td>String</td><td>The unique identifier for the Work Item</td></tr><tr><td>title</td><td>String</td><td>The Title of the Work Item that appears on the card</td></tr><tr><td>description</td><td>String</td><td>The description of the Work Item that appears on the card</td></tr><tr><td>assignedTo</td><td>String</td><td>The text which will represent who the Work Item is assigned to</td></tr><tr><td>labels</td><td>String</td><td>The tags which are associated with this Work Item</td></tr><tr><td>dueDate</td><td>Date</td><td>The due date of the work item</td></tr><tr><td>icon</td><td>String</td><td>Defines the icon to represent the work item</td></tr><tr><td>iconColor</td><td>String</td><td>Defines the color of the Work Item icon</td></tr><tr><td>color</td><td>String</td><td>Sets the color of the outside border of the card</td></tr><tr><td>order</td><td>Number</td><td>Defines the position of the Work Item on the board</td></tr></tbody></table>
{% endtab %}

{% tab title="Sample" %}

```
ClearCollect(
    collWorkItems,
    {
        id: "1000",
        title: "Charts does not have label",
        boardId: "1",
        description: "<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry",
        assignedTo: "RB",
        labels: "1,2",
        date: "2021-01-01T00:00:00",
        icon: "file",
        iconColor: "green",
        color: "red",
        order: 2
    },
    {
        id: "1002",
        title: "Some enhancements",
        boardId: "2",
        description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
        assignedTo: "MC",
        labels: "1",
        date: "2021-01-01T00:00:00",
        icon: "bug",
        iconColor: "red",
        color: "green",
        order: 1
    }
)
```

{% endtab %}
{% endtabs %}

### Labels dataset

The Labels dataset expects a JSON collection with various attributes which are defined below.

{% tabs %}
{% tab title="Properties" %}

<table data-header-hidden><thead><tr><th></th><th width="175.33333333333331"></th><th></th></tr></thead><tbody><tr><td><strong>Attribute</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td>id</td><td>String</td><td>The unique identifier for label</td></tr><tr><td>title</td><td>String</td><td>The name of the label</td></tr><tr><td>color</td><td>String</td><td>The color of the text for the title</td></tr><tr><td>backgroundColor</td><td>String</td><td>The background color of the label</td></tr><tr><td>icon</td><td>String</td><td>The icon for the label</td></tr></tbody></table>
{% endtab %}

{% tab title="Sample" %}

```
ClearCollect(
    labels,
    {
        id: "1",
        title: "Bug",
        color: "white",
        backgroundColor: "maroon",
        icon: "file"
    },
    {
        id: "2",
        title: "BAU",
        color: "white",
        backgroundColor: "blue",
        icon: "archive"
    },
    {
        id: "3",
        title: "Enhancement",
        color: "white",
        backgroundColor: "green",
        icon: "arrow"
    }
);
```

{% endtab %}
{% endtabs %}

## Component Properties

&#x20;The lowcodera Kanban component has various configuration properties which are documented below.

| **Property**                    | **Description**                                      |
| ------------------------------- | ---------------------------------------------------- |
| Items Dataset                   | The Work Items dataset                               |
| Boards Data set                 | The Boards dataset                                   |
| Labels Data Set                 | The Labels dataset                                   |
| Draggable                       | Sets whether items are draggable between boards      |
| Min Width                       | Specifies the minimum width for a board              |
| Board Title Font Size           | Font size of Board title                             |
| Work Item ID Font Size          | Font size of Work Item ID                            |
| Work Item Title Font Size       | Font size of Work Item Title                         |
| Work Item Description Font Size | Font size of Work Item Title                         |
| Show Work Item Icon             | Sets visibility of Work Item icon                    |
| Show Work Item ID               | Sets visibility of Work Item ID                      |
| Show Tags                       | Sets visibility of Work Item labels                  |
| Work Item Title Clickable       | Specifies whether titles of Work Items are Clickable |
| Show Work Item Description      | Sets visibility of Work Item Description             |
| Show Work Item Assigned To      | Sets visibility of Work Item Assignee                |
| Show Work Item Due Date         | Sets visibility of Work Item Due Date                |
| Work Item Due Date Format       | Date format of due date. Default is “DD/MM/YYYY”     |

## Output Properties & Events

For handling changes and user interactivity on the Kanban, you can make use of the EventType output property. For example, when a user drags a card between boards you may wish to patch these changes to a data source. There are also other output properties which you can use in your PowerFX for handling changes in the OnChange property of the component.

| Property             | Description                                                                                                                                                                                                                                       |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| EventType            | <p>WorkItemDragged</p><p>Set when a Work Item card is dragged by a user</p><p> </p><p>AddWorkItem</p><p>Set when a user selects a Boards Add new item icon</p><p> </p><p>WorkItemSelected</p><p>Set when the user clicks on a Work Item Title</p> |
| CurrentBoardID       | Returns the board ID of the current item                                                                                                                                                                                                          |
| CurrentWorkItemOrder | Returns the position of the current item on the board                                                                                                                                                                                             |
| CurrentWorkItemID    | Returns the Work Item ID of the current board                                                                                                                                                                                                     |

&#x20;


# Swimlane

lowcodera Swimlane Component

A versatile component for creating interactive matrixes for a wide range of business scenarios e.g. SWOT Analysis, Portfolio Prioritization

![Swimlane Component](/files/NZXjEH7RZP6B4R6kfDFw)

## Configuration of Datasets

There are 6 Datasets which can be configured to operate the lowcodera Swimlane component.

**Work Items dataset** – defines the individual work items which are laid out as cards on the Swimlane

**Columns dataset** – defines the collection of columns displayed on the Swimlane

**Rows dataset -** defines the collection of rows displayed on the Swimlane

**Toolbar dataset** – defines the collection of user defined context menu options.

**Connections dataset** – defines the collection of relationships between Work Items

**Labels dataset** – defines the tags which can be added to the Work Item cards.

### Columns Dataset

&#x20;The Columns dataset expects a JSON collection with various attributes which are defined below

{% tabs %}
{% tab title="Properties" %}

<table data-header-hidden><thead><tr><th width="168.34220072551398"></th><th width="151.33333333333331"></th><th></th></tr></thead><tbody><tr><td><strong>Attribute</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td>id</td><td>String</td><td>The unique identifier for column</td></tr><tr><td>title</td><td>String</td><td>The name of the column header</td></tr><tr><td>color</td><td>String</td><td>The color of the text for the title in the column header</td></tr><tr><td>background</td><td>String</td><td>The background color of the column header</td></tr><tr><td>icon</td><td>string</td><td>Reference to <a href="https://fontawesome.com/v5/search?m=free">Font Awesome icon </a>to appear on column header</td></tr><tr><td>widthUnits</td><td>Number</td><td>The number of sub-columns available for this column </td></tr><tr><td>cellsHeaders</td><td>Array/Object</td><td>Defines the cell header titles for any rows in this column</td></tr><tr><td>cellsBackgrounds</td><td>Array/Object</td><td>Defines the background settings for all rows in this column</td></tr></tbody></table>
{% endtab %}

{% tab title="Sample" %}

```
Table(
    {
        title: "Positive",
        id: "Positive",
        background: "#353839",
        widthUnits: 3,
        color: "white",
        icon: "plus",
        cellsHeaders: [
            "Strengths",
            "Opportunities"
        ],
        cellsBackgrounds: [
            "#1fb6ff",
            "#13ce66"
        ]
    },
    {
        title: "Negative",
        id: "Negative",
        background: "#353839",
        widthUnits: 3,
        color: "white",
        icon: "minus",
        cellsHeaders: [
            "Weakness",
            "Threats"
        ],
        cellsBackgrounds: [
            "#fab900",
            "#ff7e33"
        ]
    }
)
```

{% endtab %}
{% endtabs %}

### Rows Dataset

&#x20;The Rows dataset expects a JSON collection with various attributes which are defined below

{% tabs %}
{% tab title="Properties" %}

<table data-header-hidden><thead><tr><th width="168.34220072551398"></th><th width="151.33333333333331"></th><th></th></tr></thead><tbody><tr><td><strong>Attribute</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td>id</td><td>String</td><td>The unique identifier for the row</td></tr><tr><td>title</td><td>String</td><td>The name of the row header</td></tr><tr><td>color</td><td>String</td><td>The color of the text for the title in the row header</td></tr><tr><td>background</td><td>String</td><td>The background color of the row header</td></tr><tr><td>icon</td><td>string</td><td>Reference to <a href="https://fontawesome.com/v5/search?m=free">Font Awesome icon</a> to appear on column header</td></tr></tbody></table>
{% endtab %}

{% tab title="Sample" %}

```
Table(
    {
        id: "Internal",
        title: "Internal",
        color: "white",
        background: "#353839",
        icon: "sign-in-alt"
    },
    {
        id: "External",
        title: "External",
        color: "white",
        icon: "sign-out-alt",
        background: "#353839"
    }
)
```

{% endtab %}
{% endtabs %}

### Work Items Dataset

The Work Items dataset expects a JSON collection with various attributes which are defined below.

{% tabs %}
{% tab title="Properties" %}

<table data-header-hidden><thead><tr><th width="236"></th><th width="150"></th><th></th></tr></thead><tbody><tr><td><strong>Attribute</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td>id</td><td>String</td><td>The unique identifier for the Work Item</td></tr><tr><td>cardType</td><td>String</td><td>The type of card that will get displayed. Choose from "basic card", "striped card", "image", "persona", "sticky note"</td></tr><tr><td>title</td><td>String</td><td>The Title of the Work Item that appears on the card</td></tr><tr><td>description</td><td>String</td><td>The description of the Work Item that appears on the card. Supports HTML.</td></tr><tr><td>columnId</td><td>String</td><td>reference to the id of the column this item will appear in</td></tr><tr><td>rowId</td><td>String</td><td>reference to the id of the row this item will appear in</td></tr><tr><td>areaNumber</td><td>Number</td><td>Denotes the sub-column the item appears in</td></tr><tr><td>order</td><td>Number</td><td>Denotes the order of the item within it's column/sub-column</td></tr><tr><td>background</td><td>String</td><td>Supports <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">CSS expression</a> to format the backgorund of the work item</td></tr><tr><td>stripeColor</td><td>String</td><td>When the card type is set "striped card", defines the color of the stripe</td></tr><tr><td>image</td><td>String</td><td>url for image to be displayed on the card</td></tr><tr><td>assignedTo</td><td>String</td><td>The text which will represent who the Work Item is assigned to</td></tr><tr><td>dueDate</td><td>Date</td><td>The due date of the work item</td></tr><tr><td>labels</td><td>String</td><td>The tags which are associated with this Work Item. References the ID's of items in the labels dataset</td></tr><tr><td>icon</td><td>String</td><td>The <a href="https://fontawesome.com/v5/search?m=free">Font Awesome icon</a> to represent the work item when using "basic card" and "striped card" types </td></tr></tbody></table>

{% endtab %}

{% tab title="Sample" %}

```
Table(
    {
        id: "1000",
        title: "Patented technology",
        description: "We have patents on Non-Invasive Corneal Sculpting (NICS) and two novel devices",
        columnId: "Negative",
        rowId: "External",
        areaNumber: 1,
        order: 1,
        cardType: "striped card",
        titleColor: "#000",
        stripeColor: "#e93939",
        icon: "star"
    },
    {
        id: "1001",
        title: "FDA approval",
        description: "No need to wait for FDA approval",
        columnId: "Positive",
        rowId: "Internal",
        areaNumber: 2,
        order: 1,
        cardType: "striped card",
        titleColor: "#000",
        stripeColor: "#f0f0f0",
        icon: "star"
    }
)
```

{% endtab %}
{% endtabs %}

### Toolbar dataset

The Toolbar dataset expects a JSON collection with various attributes which are defined below.

{% tabs %}
{% tab title="Properties" %}

<table data-header-hidden><thead><tr><th></th><th width="201.71610660486675"></th><th></th></tr></thead><tbody><tr><td><strong>Attribute</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td>eventName</td><td>String</td><td>The unique identifier for the item which will be used for the "OnChange" Event</td></tr><tr><td>title</td><td>String</td><td>The display name of the context menu item</td></tr><tr><td>icon</td><td>String</td><td>The <a href="https://fontawesome.com/v5/search?m=free">Font Awesome icon</a> for the context menu item</td></tr><tr><td>color</td><td>String</td><td>The color of the title and icon</td></tr><tr><td>mode</td><td>String</td><td>Used to specify if the menu item applies to work items, the column cell, or both.  Accepted values are "Item", "Cell", "Both".</td></tr></tbody></table>
{% endtab %}

{% tab title="Sample" %}

```
Table(
    {
        eventName: "AddWorkItem",
        title: "Add WorkItem",
        icon: "plus",
        color: "#2b2d42",
        mode: "Both"
    },
    {
        eventName: "DeleteWorkItem",
        title: "Delete WorkItem",
        icon: "trash",
        color: "#F0706A",
        mode: "Item"
    },
    {
        eventName: "vote",
        background: "#fff",
        title: "Vote",
        icon: "vote-yea",
        color: "#2b2d42",
        mode: "Item"
    }
)
```

{% endtab %}
{% endtabs %}

### **Connections** dataset

The Connections dataset expects a JSON collection with various attributes which are defined below.

{% tabs %}
{% tab title="Properties" %}

<table data-header-hidden><thead><tr><th></th><th width="201.71610660486675"></th><th></th></tr></thead><tbody><tr><td><strong>Attribute</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td>workItemAId</td><td>String</td><td>The WorkItem ID of the source item</td></tr><tr><td>workItemBId</td><td>String</td><td>The WorkItem ID of the destination item</td></tr><tr><td>color</td><td>String</td><td>The color of the line</td></tr><tr><td>dashWidth</td><td>Number</td><td>The width of the line endpoint </td></tr><tr><td>thickness</td><td>Number</td><td>The thickness of the line</td></tr></tbody></table>
{% endtab %}

{% tab title="Sample" %}

```
ClearCollect(
    colWorkItemConnections,
    {
        workItemAId: "1001",
        workItemBId: "1004",
        color: "red",
        dashWidth: 2,
        thickness: 1
    },
    {
        workItemAId: "1001",
        workItemBId: "1006",
        color: "red",
        dashWidth: 2,
        thickness: 1
    }
)
```

{% endtab %}
{% endtabs %}

### Labels dataset

The Labels dataset expects a JSON collection with various attributes which are defined below.

{% tabs %}
{% tab title="Properties" %}

<table data-header-hidden><thead><tr><th></th><th width="201.71610660486675"></th><th></th></tr></thead><tbody><tr><td><strong>Attribute</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td>id</td><td>String</td><td>The unique identifier for label</td></tr><tr><td>title</td><td>String</td><td>The name of the label</td></tr><tr><td>color</td><td>String</td><td>The color of the text for the title</td></tr><tr><td>backgroundColor</td><td>String</td><td>The background color of the label</td></tr><tr><td>icon</td><td>String</td><td>The <a href="https://fontawesome.com/v5/search?m=free">Font Awesome icon</a> to use on the label</td></tr></tbody></table>
{% endtab %}

{% tab title="Sample" %}

```
ClearCollect(
    labels,
    {
        id: "1",
        title: "Bug",
        color: "white",
        background: "maroon",
        icon: "file"
    },
    {
        id: "2",
        title: "BAU",
        color: "white",
        background: "blue",
        icon: "archive"
    },
    {
        id: "3",
        title: "Enhancement",
        color: "white",
        background: "green",
        icon: "arrow"
    }
);
```

{% endtab %}
{% endtabs %}

## Component Properties

The lowcodera Swimlane component has various configuration properties which are documented below.

| **Property**                    | **Description**                                                                                                                   |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| Items Dataset                   | The Work Items dataset                                                                                                            |
| Columns Dataset                 | The Columns dataset                                                                                                               |
| Rows Dataset                    | The Rows dataset                                                                                                                  |
| Toolbar Dataset                 | The Toolbar dataset                                                                                                               |
| Connections                     | The Connections dataset                                                                                                           |
| Labels Data Set                 | The Labels dataset                                                                                                                |
| Work Item ID Font Size          | Font size of Work Item ID                                                                                                         |
| Work Item Title Font Size       | Font size of Work Item Title                                                                                                      |
| Work Item Description Font Size | Font size of Work Item description                                                                                                |
| Work Item Tags Font Size        | Font size of Work Item Tags                                                                                                       |
| Work Item Footer Font Size      | Font size of Work Item footer content                                                                                             |
| Work Item Padding               | Sets the padding of overall card                                                                                                  |
| Work Item Sections Padding      | Sets the padding between sections of the card                                                                                     |
| Work Item Background            | Specifies the default background of the card. Supports [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/background)         |
| Min Work Item Height            | Sets the minimum height for the card                                                                                              |
| Show Work Item ID               | Sets visibility of Work Item ID                                                                                                   |
| Show Work Item Icon             | Sets visibility of Work Item icon                                                                                                 |
| Show Row Header                 | Sets the visibility of the row header                                                                                             |
| Show Column Header              | Sets the visibility of the column header                                                                                          |
| Show Tags                       | Sets visibility of card labels                                                                                                    |
| Work Item Title Clickable       | Specifies whether the title of the card is clickable                                                                              |
| Show Work Item Description      | Sets visibility of Description                                                                                                    |
| Show Work Item Assigned To      | Sets visibility of car Assignee                                                                                                   |
| Show Work Item Due Date         | Sets visibility of  Due Date                                                                                                      |
| Work Item Due Date Format       | Date format of due date. Default is “DD/MM/YYYY”                                                                                  |
| Row Header Title Orientation    | Horizontal or Vertical orientation for row header titles                                                                          |
| Work Item Title Align           | Sets the alignment for the title on the card \[Left, Center, Right]                                                               |
| Work Item Description Align     | Sets the alignment for the description on the card \[Left, Center, Right]                                                         |
| Background                      | Sets the overall background of the component. Supports [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/background)         |
| Cells Background                | Sets the default background of cells in the Swimlane. Supports [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| Cells Header Font Size          | Sets the font size of any cell headers if they are defined in the columns dataset                                                 |
| Cells Header Font Color         | Sets the font color of any cell headers if they are defined in the columns dataset                                                |
| Cells Header Align              | Sets the alignment of any cell headers if they are defined in the columns dataset. Left, Center, Right]                           |
| Cells Header Font Weight        | Sets the font weight of any cell headers if they are defined in the columns dataset. \[Bold, Normal]                              |
| Show Master Column              | Boolean to specify the visibility of the Swimlane master column                                                                   |
| Master Column Title             | The title of the master column                                                                                                    |
| Master Column Icon              | The [Font Awesome icon](https://fontawesome.com/v5/search?m=free) used next to the master column title                            |
| Master Column Background        | The background of the master column. Supports [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/background)                  |
| Master Column Cell Title        | The title of the master column internal cell header                                                                               |
| Master Column Cell Title Color  | The color of the title for the master column internal cell header                                                                 |
| Master Column Cell Background   | The background of the master column internal cell. Supports [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/background)    |
| Master Column Width             | Sets the width of the master column                                                                                               |
| Min Row Height                  | Specifies the minimum height of a row in the Swimlane                                                                             |

## Output Properties & Events

For handling changes and user interactivity on the Swimlane, you can make use of the EventType output property. As well as default events, custom events can be defined in the [Toolbar Dataset](#toolbar-dataset).  For example, when a user drags a card between columns you may wish to patch these changes to a data source. There are also other output properties which you can use in your PowerFX for handling changes in the OnChange property of the component.

| Property          | Description                                                                                                                                                 |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| EventType         | <p>WorkItemDragged</p><p>Triggered when a card is dragged by a user</p><p> </p><p>WorkItemSelected</p><p>Triggered when the user clicks on a card Title</p> |
| CurrentColumnID   | Returns the Column ID of the item                                                                                                                           |
| CurrentRowID      | Returns the Row ID of the item                                                                                                                              |
| CurrentWorkItemID | Returns the ID of the current item                                                                                                                          |
| CurrentAreaNumber | Returns the Area Number (sub column) of the current item                                                                                                    |

&#x20;


# Line Chart

lowcodera Line chart component

## Purpose

Line graphs are used to track changes over short and long periods of time. When smaller changes exist, line graphs are better to use than bar graphs. Line graphs can also be used to compare changes over the same period of time for more than one group.&#x20;

## Variations <a href="#chart-variations" id="chart-variations"></a>

![](/files/JM0UCJHVMGl2bOGk82IN)

‌There are several variations of Line charts which are supported through the configuration of data and component properties.

* Basic Line Chart&#x20;
* Spline Line Chart&#x20;
* Step line Line Chart&#x20;
* Dashed Line Chart
* Gradient Line Chart

## Working with Data

‌The data format for the Line chart is the same as for other Lowcodera charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint. &#x20;

{% tabs %}
{% tab title="Static Collection Example" %}
In this example, a collection with static data called `LineChartColBasics` is defined in the Power App. The **`items`** property of the line chart component is then bound to this collection.

```csharp
Table(
    {
        name: "Actual",
        data: ForAll([
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 60
            },
            {
                label: 2003,
                value: 28
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 36
            },
            {
                label: 2006,
                value: 43
            },
            {
                label: 2007,
                value: 55
            },
            {
                label: 2008,
                value: 21
            }
        ],{Value: ThisRecord})
    },
    {
        name: "Budgeted",
        data: ForAll([
            {
                label: 2001,
                value: 25
            },
            {
                label: 2002,
                value: 42
            },
            {
                label: 2003,
                value: 50
            },
            {
                label: 2004,
                value: 18
            },
            {
                label: 2005,
                value: 17
            },
            {
                label: 2006,
                value: 19
            },
            {
                label: 2007,
                value: 58
            },
            {
                label: 2008,
                value: 35
            }
        ],{Value: ThisRecord})
    }
)
```

The above code snippet will generate the following line chart.

![](/files/-Mkg-pFWsVhVf27OXySC)
{% endtab %}

{% tab title="Dyamic Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](/files/-MlKMKdWBnSBmzEjZ7So)

The below code snippet will generate dynamic collection to be consumed by component.

```csharp
Table(
    {
        name: "Actual",
        data: ForAll(
            Finances,
            {
                Value: {
                    label: ThisRecord.Year,
                    value: ThisRecord.Actual
                }
            }
        )
    },
    {
        name: "Budgeted",
        data: ForAll(
            Finances,
            {
                Value: {
                    label: ThisRecord.Year,
                    value: ThisRecord.Budget
                }
            }
        )
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](/component-properties/chart-components)&#x20;
{% endhint %}

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th>Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td>Required</td></tr><tr><td>LineType</td><td>Property to show different types of lines</td><td><p>Smooth</p><p>Stepline</p><p>Straight</p></td><td>X</td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>ShowReversed</td><td>Property to represent the Y-Axis from the right side</td><td>Boolean</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for lines.</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td><td>X</td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for lines</td><td>URL</td><td>X</td></tr></tbody></table>

## Examples

### Spline Line Chart

![](/files/-Mkg-ySK7cc66_MD1Lgy)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in [section](/line-chart#working-with-data).&#x20;
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `LineType` property is set to **Smooth**
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Stepline Line Chart

![Stepline line chart](/files/-Mkg08CfMjyMfT94EdXF)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the data collection

```
ClearCollect(
    ColStepline,
    {
        data: ForAll(
            'Malaga Weather',
            {
                Value: {
                    label: ThisRecord.Date,
                    value: ThisRecord.Temperature
                }
            }
        ),
        name: "Malaga"
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `LineType` property is set to **Stepline**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Dashed Line Chart

![](/files/-Mkg0F9Be5DnI2ZKzDd6)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the data collection.&#x20;

```csharp
ClearCollect(
    CollDashedLineChart,
    {
        name: "Population",
        dashlength: 7, // Resposible for Dashline
        data: ForAll([
            {
                label: "Cairo",
                value: 115
            },
            {
                label: "Damietta",
                value: 50
            },
            {
                label: "Alex",
                value: 80
            }
        ],{Value: ThisRecord})
    },
    {
        name: "Education",
        dashlength: 9,
        data: [
            {
                label: "Cairo",
                value: 180
            },
            {
                label: "Damietta",
                value: 50
            },
            {
                label: "Alex",
                value: 70
            }
        ]
    },
    {
        name: "Income",
        dashlength: 2,
        data: ForAll([
            {
                label: "Cairo",
                value: 100,
                isnull: false
            },
            {
                label: "Damietta",
                value: 100
            },
            {
                label: "Alex",
                value: 150
            }
        ],{Value: ThisRecord})
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `LineType` property is set to **Smooth**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Gradient Line Chart

![](/files/-Mkg0KuTa4dU6s-0AR-x)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the data collection.&#x20;

```csharp
ClearCollect(
    ColGradientLineChart,
    {
        name: "Population",
        
        data: ForAll([
            {
                label: "Cairo",
                value: 115
            },
            {
                label: "Damietta",
                value: 50
            },
            {
                label: "Alex",
                value: 80
            }
        ],{Value: ThisRecord})
    },
    {
        name: "Education",
     
        data: ForAll([
            {
                label: "Cairo",
                value: 180
            },
            {
                label: "Damietta",
                value: 50
            },
            {
                label: "Alex",
                value: 70
            }
        ],{Value: ThisRecord})
    },
    {
        name: "Income",
        dashlength: 2,
        data: ForAll([
            {
                label: "Cairo",
                value: 100,
                isnull: false
            },
            {
                label: "Damietta",
                value: 100
            },
            {
                label: "Alex",
                value: 150
            }
        ],{Value: ThisRecord})
    }
);
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `LineType` property is set to **Smooth**
* [x] `FillType` property is set to **Gradient**
* [x] `GradientShadeIntensity` property is set to **3**
* [x] `GradientOpcityFrom` property is set to **5**
* [x] `GradientOpcityTo` property is set to **10**
* [x] `GradientStop` property is set to **3**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}


# Mixed Chart

lowcodera Mixed Chart Component

## Purpose

Combination charts let you display different types of data in different ways on the same chart. You may display columns, lines, areas, and steps all on the same combination chart. Use them to visually highlight the differences between different sets of data.

## Variations

![](/files/-MkqPngOgvuV_i53ja1n)

‌There are several variations of Mixed charts which are supported through the configuration of data and component properties.

* Line and Column Chart&#x20;
* Line and Column with secondary axis
* Column and Area Chart
* Column, Line and Area Chart

## Working with Data

‌The data format for the Mixed chart is the same as for other lowcodera charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint. &#x20;

{% tabs %}
{% tab title="Static Collection Example" %}
In this example, a collection with static data called `ColColumnLineBasic` is defined in the Power App. The **`items`** property of the bar chart component is then bound to this collection.

```csharp
Table(
    {
        name: "Blogs",
        type: "column",
        data: [
            {
                label: 2001,
                value: 544
            },
            {
                label: 2002,
                value: 650
            },
            {
                label: 2003,
                value: 258
            },
            {
                label: 2004,
                value: 352
            },
            {
                label: 2005,
                value: 356
            },
            {
                label: 2006,
                value: 453
            },
            {
                label: 2007,
                value: 555
            },
            {
                label: 2008,
                value: 214
            }
        ]
    },
    {
        name: "Social Media",
        type: "Line",
        data: [
            {
                label: 2001,
                value: 670
            },
            {
                label: 2002,
                value: 880
            },
            {
                label: 2003,
                value: 450
            },
            {
                label: 2004,
                value: 460
            },
            {
                label: 2005,
                value: 620
            },
            {
                label: 2006,
                value: 470
            },
            {
                label: 2007,
                value: 583
            },
            {
                label: 2008,
                value: 357
            }
        ]
    }
)
```

The above code snippet will generate the following bar chart.

![](/files/-MkqPvRpPPy0SdrWH3ae)
{% endtab %}

{% tab title="Dynamic Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](/files/-MlKPdVPCcaO7yF1M-gi)

The below code snippet will generate dynamic collection to be consumed by component.

```csharp
Table(
    {
        name: "Blogs",
        type: "column",
        data: ForAll(
            'Social Media Trend',
            {
                Value: {
                    label: ThisRecord.Year,
                    value: ThisRecord.Blogs
                }
            }
        )
    },
    {
        name: "Social Media",
        type: "Line",
        data: ForAll(
            'Social Media Trend',
            {
                Value: {
                    label: ThisRecord.Year,
                    value: ThisRecord.Blogs
                }
            }
        )
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](/component-properties/chart-components)&#x20;
{% endhint %}

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th>Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>LineType</td><td>Property to show different types of lines</td><td><p>Smooth</p><p>Stepline</p><p>Straight</p></td><td>X</td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>ShowReversed</td><td>Property to represent the Y-Axis from the right side</td><td>Boolean</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for bars.</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td><td>X</td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for bars</td><td>URL</td><td>X</td></tr></tbody></table>

## Examples

### Line and Area chart with secondary Axis

![](/files/-MkqPzGerQLGQmhjtcD8)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```csharp
Table(
    {
        name: "Blogs",
        type: "column",
        data: [
            {
                label: 2001,
                value: 544
            },
            {
                label: 2002,
                value: 650
            },
            {
                label: 2003,
                value: 258
            },
            {
                label: 2004,
                value: 352
            },
            {
                label: 2005,
                value: 356
            },
            {
                label: 2006,
                value: 453
            },
            {
                label: 2007,
                value: 555
            },
            {
                label: 2008,
                value: 214
            }
        ]
    },
    {
        name: "Social Media",
        oppositetitle: "Social Media",
        type: "Line",
        opposite: true,
        data: [
            {
                label: 2001,
                value: 70
            },
            {
                label: 2002,
                value: 80
            },
            {
                label: 2003,
                value: 50
            },
            {
                label: 2004,
                value: 40
            },
            {
                label: 2005,
                value: 60
            },
            {
                label: 2006,
                value: 40
            },
            {
                label: 2007,
                value: 58
            },
            {
                label: 2008,
                value: 35
            }
        ]
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

### Column and Area Chart

![](/files/-MkqQ5o-pGsg6J3rR25N)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```csharp
ClearCollect(
    ColColArea,
    {
        name: "Team A",
        type: "column",
        data: [
            {
                label: 2001,
                value: 23
            },
            {
                label: 2002,
                value: 11
            },
            {
                label: 2003,
                value: 21
            },
            {
                label: 2004,
                value: 27
            },
            {
                label: 2005,
                value: 13
            },
            {
                label: 2006,
                value: 12
            },
            {
                label: 2007,
                value: 37
            },
            {
                label: 2008,
                value: 44
            }
        ]
    },
    {
        name: "Team B",
        type: "column",
        data: [
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 55
            },
            {
                label: 2003,
                value: 51
            },
            {
                label: 2004,
                value: 67
            },
            {
                label: 2005,
                value: 43
            },
            {
                label: 2006,
                value: 40
            },
            {
                label: 2007,
                value: 56
            },
            {
                label: 2008,
                value: 27
            }
        ]
    },
    {
        name: "Team C",
        type: "area",
        dashlength: 2,
        data: [
            {
                label: 2001,
                value: 30
            },
            {
                label: 2002,
                value: 25
            },
            {
                label: 2003,
                value: 26
            },
            {
                label: 2004,
                value: 30
            },
            {
                label: 2005,
                value: 45
            },
            {
                label: 2006,
                value: 35
            },
            {
                label: 2007,
                value: 67
            },
            {
                label: 2008,
                value: 42
            }
        ]
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `LineType` property is set to **Smooth**
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Column, Line and Area Chart

![](/files/-MkqQ9qeqXECB16kYQv7)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the data collection

```csharp
Table(
    {
        name: "Team A",
        type: "column",
        data: [
            {
                label: 2001,
                value: 23
            },
            {
                label: 2002,
                value: 11
            },
            {
                label: 2003,
                value: 21
            },
            {
                label: 2004,
                value: 27
            },
            {
                label: 2005,
                value: 13
            },
            {
                label: 2006,
                value: 12
            },
            {
                label: 2007,
                value: 37
            },
            {
                label: 2008,
                value: 44
            }
        ]
    },
    {
        name: "Team B",
        type: "Area",
        dashlength: 2,
        oppositetitle: "Social Media",
        data: [
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 55
            },
            {
                label: 2003,
                value: 51
            },
            {
                label: 2004,
                value: 67
            },
            {
                label: 2005,
                value: 43
            },
            {
                label: 2006,
                value: 40
            },
            {
                label: 2007,
                value: 56
            },
            {
                label: 2008,
                value: 27
            }
        ]
    },
    {
        name: "Team C",
        type: "Line",
        dashlength: 2,
        data: [
            {
                label: 2001,
                value: 30
            },
            {
                label: 2002,
                value: 25
            },
            {
                label: 2003,
                value: 26
            },
            {
                label: 2004,
                value: 30
            },
            {
                label: 2005,
                value: 45
            },
            {
                label: 2006,
                value: 35
            },
            {
                label: 2007,
                value: 67
            },
            {
                label: 2008,
                value: 42
            }
        ]
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `LineType` property is set to **Smooth**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}


# Pie Chart

lowcodera Pie Chart Component

## Purpose

Pie charts are best to use when you are trying to compare parts of a whole. They do not show changes over time.

## Variations

![](/files/-MkgDMzD7FFJ36G0lJge)

There are several variations of Pie charts which are supported through the configuration of data and component properties.

* Basic Pie Chart
* Pie Chart with Image
* Gradient Pie Chart

## Working with Data

‌The data format for the Pie chart is the same as for other Lowcodera charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint. &#x20;

{% tabs %}
{% tab title="Static Collection example" %}
In this example, a collection with static data called `ColPieChart` is defined in the Power App. The **`items`** property of the pie chart component is then bound to this collection.

```csharp
Table(
    {
        name: "Delivery",
        data: 5
    },
    {
        name: "Finance",
        data: 12
    },
    {
        name: "HR",
        data: 19
    },
    {
        name: "Planning",
        data: 25
    }
)
```

The above code snippet will generate the following Pie chart.

![](/files/-Mkg9uwL_HekXPb9A-k2)
{% endtab %}

{% tab title="Static Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](/files/-MlKjYsnrI0i0oUTA2gt)

The below code snippet will generate dynamic collection to be consumed by component.

```csharp
Table(
    ForAll(
        Projects,
        {
            name: ThisRecord.Category,
            data: Value(ThisRecord.Rate)
        }
    )
)
```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](/component-properties/chart-components)&#x20;
{% endhint %}

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th>Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for pie chart.</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td><td>X</td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for pie chart</td><td>URL</td><td>X</td></tr><tr><td>StartAngle</td><td>Property to Set the starting Angle of the <strong>Pie</strong> or <strong>Doughnut</strong> Chart in degrees.<br></td><td>Numeric (ranges 0 to 360)</td><td>X</td></tr><tr><td>EndAngle</td><td>Property to Set the ending Angle of the <strong>Pie</strong> or <strong>Doughnut</strong> Chart in degrees.Numeric (ranges 0 to 360)</td><td>Numeric (ranges 0 to 360)</td><td>X</td></tr></tbody></table>

## Examples

### Pie Chart with Image

![Pie Chart with Images](/files/-MkgBr0hkKH7VoFK6Mci)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in [section](/pie-chart#working-with-data).&#x20;
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `FillType` property is set to **Image**
* [x] `BackgroundImage` property is set to **URL** (e.g. <https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260>)
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Gradient Pie Chart&#x20;

![](/files/-MkgDiNdz5siTqwweffL)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in [section](/pie-chart#working-with-data).&#x20;
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `FillType` property is set to **Gradient**
* [x] `GradientShadeIntensity` property is set to **5**
* [x] `GradientOpcityFrom` property is set to **5**
* [x] `GradientOpcityTo` property is set to **5**
* [x] `GradientInverse` property is set to **true**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}


# Polar Chart

lowcodera Polar chart component

## Purpose

Polar charts are circular charts that use values and angles to show information as polar coordinates. Polar charts are useful for showing scientific data.

## Variations

![](/files/-MkpadtZInuqPQvFWATE)

There are several variations of Polar charts which are supported through the configuration of data and component properties.

* Basic Polar Chart
* Polar Chart with Gradient
* Polar Chart with Monochrome Fill

## Working with Data

‌The data format for the Polar chart is the same as for other Lowcodera charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint. &#x20;

{% tabs %}
{% tab title="Static Collection example" %}
In this example, a collection with static data called `colPolarChart`is defined in the Power App. The **`items`** property of the polar chart component is then bound to this collection.

```csharp
Table(
    {
        name: "Delivery",
        data: 14
    },
    {
        name: "Finance",
        data: 23
    },
    {
        name: "HR",
        data: 21
    },
    {
        name: "Planning",
        data: 17
    },
    {
        name: "Production",
        data: 10
    },
    {
        name: "Purchasing",
        data: 12
    },
    {
        name: "QA",
        data: 17
    },
    {
        name: "WareHouse",
        data: 19
    }
)

```

The above code snippet will generate the following Polar chart.

![](/files/-Mkpd1NT_mohfkE0Ohpk)
{% endtab %}

{% tab title="Dynamic Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](/files/-MlTWJluKy9V58Nhs2N2)

The below code snippet will generate dynamic collection to be consumed by component.

```
Clear(ColPolarChart);
ForAll(
    Employees,
    Collect(
        ColPolarChart,
        {
            name: ThisRecord.Department,
            data: ThisRecord.Value
        }
    )
)
```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](/component-properties/chart-components)&#x20;
{% endhint %}

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th>Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for polar chart.</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td><td>X</td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for polar</td><td>URL</td><td>X</td></tr><tr><td>StartAngle</td><td>Property to Set the starting Angle of the <strong>Polar</strong> Chart in degrees.<br></td><td>Numeric (ranges 0 to 360)</td><td>X</td></tr><tr><td>EndAngle</td><td>Property to Set the ending Angle of the <strong>Polar</strong> Chart in degrees.Numeric (ranges 0 to 360)</td><td>Numeric (ranges 0 to 360)</td><td>X</td></tr></tbody></table>

## Examples

### Polar Chart with Gradient

![](/files/-Mkpd7yQ6F-VahyGXCCR)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in [section](/polar-chart#working-with-data).
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `FillType` property is set to **Gradient**
* [x] `GradientShade`property is set to **Dark**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Gradient Chart with Monochrome Fill

![](/files/-MkpdE5JYlmmuesj3xZj)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```
ClearCollect(
    ColPolarChartMono,
    {
        name: "Delivery",
        data: 5,
        color: "#4c782f"
    },
    {
        name: "Finance",
        data: 12,
        color: "#598a37"
    },
    {
        name: "HR",
        data: 15,
        color: "#62993e"
    },
    {
        name: "Planning",
        data: 12,
        color: "#6ca744"
    },
    {
        name: "Production",
        data: 10,
        color: "#81b464"
    },
    {
        name: "Purchasing",
        data: 10,
        color: "#a1c490"
    },
    {
        name: "QA",
        data: 17,
        color: "#b8d1ad"
    },
    {
        name: "WareHouse",
        data: 19,
        color: "#cedec7"
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}


# Radar Chart

lowcodera Radar chart component

## Purpose

Radar Charts are used to compare two or more items or groups on various features or characteristics. They are used to plot one or more groups of values over multiple common variables. They do this by giving an axis for each variable, and these axes are arranged radially around a central point and spaced equally. The data from a single observation are plotted along each axis and connected to form a ***polygon***. Multiple observations can be placed in a single chart.

## Variations

![](/files/A2XrDfWwvE82RdvwF4q8)

There are several variations of Radar charts which are supported through the configuration of data and component properties.

* Basic Radar Chart
* Radar Chart with Multiple Series
* Radar Chart with Polygon fill&#x20;

## Working with Data

‌The data format for the Radar chart is the same as for other Lowcodera charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint. &#x20;

{% tabs %}
{% tab title="Static Collection example" %}
In this example, a collection with static data called `colBasicRadar`is defined in the Power App. The **`items`** property of the radar chart component is then bound to this collection.

```markup
ClearCollect(
    ColBasicRadar,
    {
        name: "Population",
        color:"#06d6a0",
        data: ForAll([
            {
                label: "Jan",
                value: 80
            },
            {
                label: "Feb",
                value: 50
            },
            {
                label: "Mar",
                value: 30
            },
            {
                label: "Apr",
                value: 80
            },
            {
                label: "May",
                value: 100
            },
            {
                label: "Jun",
                value: 20
            }
        ], {Value: ThisRecord})
    }
);

```

The above code snippet will generate the following Radar chart.

![](/files/86Adg1kzE300xafkOZ6B)
{% endtab %}
{% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](/component-properties/chart-components)&#x20;
{% endhint %}

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th width="198">Control Property</th><th width="184.21130551816958">Description</th><th>Required</th><th width="167.47471928799735">Accepted Values</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Required</strong></td><td><strong>Accepted Values</strong></td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>X</td><td>Text</td></tr><tr><td>FillType</td><td>Property to choose fill type for radar chart.</td><td>X</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for radar</td><td>X</td><td>URL</td></tr></tbody></table>

## Examples

### Radar Chart with Multiple Series

![](/files/gchX0cs0DGJTzniuSJ6i)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```
ClearCollect(
    ColMultiSeriesRadar,
    {
        name: "India",
        color:"#ffd166",
        data: ForAll([
            {
                label: "Jan",
                value: 100
            },
            {
                label: "Feb",
                value: 80
            },
            {
                label: "Mar",
                value: 30
            },
            {
                label: "Apr",
                value: 80
            },
            {
                label: "May",
                value: 95
            },
            {
                label: "Jun",
                value: 60
            }
        ], {Value: ThisRecord})
    }, 
    {
        name: "UK",
        color:"#06d6a0",
        data: ForAll([
            {
                label: "Jan",
                value: 70
            },
            {
                label: "Feb",
                value:50
            },
            {
                label: "Mar",
                value: 90
            },
            {
                label: "Apr",
                value: 50
            },
            {
                label: "May",
                value: 50
            },
            {
                label: "Jun",
                value: 90
            }
        ], {Value: ThisRecord})
    },
    {
        name: "US",
        color:"#ef476f",
        data: ForAll([
            {
                label: "Jan",
                value: 80
            },
            {
                label: "Feb",
                value: 25
            },
            {
                label: "Mar",
                value: 70
            },
            {
                label: "Apr",
                value: 36
            },
            {
                label: "May",
                value: 35
            },
            {
                label: "Jun",
                value: 45
            }
        ], {Value: ThisRecord})
    }  
);
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Radar Chart with Polygon Fill&#x20;

![](/files/EnFkOW7sXQbeipVpquT9)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```
ClearCollect(
    ColPolygonFillRadar,
    {
        name: "Days",
        color:"#ef233c",
        data: ForAll([
            {
                label: "Sun",
                value: 20
            },
            {
                label: "Mon",
                value: 100
            },
            {
                label: "Tue",
                value: 40
            },
            {
                label: "Wed",
                value: 30
            },
            {
                label: "Thu",
                value: 50
            },
            {
                label: "Fri",
                value: 80
            },
            {
                label: "Sat",
                value: 33
            }
        ], {Value: ThisRecord})
    }
);
ClearCollect(
    ColPolarChart,
    {
        name: "Delivery",
        color:"#ef476f",
        data: 14
    },
    {
        name: "Finance",
        data: 23,
        color:"#ffd166"
    },
    {
        name: "HR",
        data: 21,
        color:"#06d6a0"
    },
    {
        name: "Planning",
        data: 17,
        color:"#118ab2"
    },
    {
        name: "Production",
        data: 10,
        color:"#073b4c"
    },
    {
        name: "Purchasing",
        data: 12,
        color:"#ef233c"
    },
    {
        name: "QA",
        data: 17,
        color:"#8338ec"
    },
    {
        name: "WareHouse",
        data: 19,
        color:"#540b0e"
    }
);
ClearCollect(
    ColPolarChartMono,
    {
        name: "Delivery",
        data: 5,
        color: "#4c782f"
    },
    {
        name: "Finance",
        data: 12,
        color: "#598a37"
    },
    {
        name: "HR",
        data: 15,
        color: "#62993e"
    },
    {
        name: "Planning",
        data: 12,
        color: "#6ca744"
    },
    {
        name: "Production",
        data: 10,
        color: "#81b464"
    },
    {
        name: "Purchasing",
        data: 10,
        color: "#a1c490"
    },
    {
        name: "QA",
        data: 17,
        color: "#b8d1ad"
    },
    {
        name: "WareHouse",
        data: 19,
        color: "#cedec7"
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}


# Radial Chart

lowcodera Radial Chart Component

## Purpose

A Radial/Circular Bar Chart simply refers to a typical Bar Chart displayed on a polar coordinate system, instead of a cartesian system.It is used to show comparisons among categories by using a circular shape.

## Variations

![Radial Chart](/files/2gvsPsDriAKRGVtOoYJ6)

![](/files/AOPIPXnE7xe7KP8eRk4N)

There are several variations of Radial charts which are supported through the configuration of data and component properties.

* Basic Radial Chart
* Multiple Radial Bars
* Gradient Radial Chart
* Semi Circular Gauge

## Working with Data

‌The data format for the basic radial chart is the same as for other Lowcodera charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint. &#x20;

{% tabs %}
{% tab title="Static Collection example" %}
In this example, a collection with static data called `BasicRadial` is defined in the Power App. The **`items`** property of the radial chart component is then bound to this collection.

```csharp
Table(
    {
        name: "Percentage",
        data: 70
    }
)
```

The above code snippet will generate the following radial chart.

![](/files/JCyqgOI8hqLn14j1aHpg)
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `ShowDataLabel` property is set to **true**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](/component-properties/chart-components)&#x20;
{% endhint %}

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th>Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>StartAngle</td><td>Property to set a custom angle from which radial chart should start.</td><td>Numeric</td><td>X</td></tr><tr><td>EndAngle</td><td>Property to set a custom angle from which radial chart should end.</td><td>Numeric</td><td>X</td></tr><tr><td>TotalLabel</td><td>Property to show total label in the center</td><td>String</td><td>X</td></tr><tr><td>TotalValue</td><td>Property to show any value of the total in the center.</td><td>Numeric</td><td>X</td></tr></tbody></table>

## Examples

### Gradient Radial Chart

![](/files/s4hF33L1XXMdkhnhd4tr)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in the [section](#working-with-data).
{% endtab %}

{% tab title="Property Configuration" %}

* [x] &#x20;`ShowDataLabel` property is set to **true**
* [x] `FillType` property is set to **Gradient**
* [x] `GradientShadeIntensity` property is to set **2**
* [x] `GradientOpcityFrom` property is to set **0.5**
* [x] `GradientOpcityTo` property is to set **0.5**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Multiple Radial Bars

![](/files/2q5llsblHBHV3iLRf1SB)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```
ClearCollect(
    MultipleRadial,
    {
        name: "Veg",
        data: 44
    },
    {
        name: "Fruite",
        data: 55
    },
    {
        name: "Beans",
        data: 67
    },
    {
        name: "Spices",
        data: 83
    }
);
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `ShowTotal` property is set to **Datetime**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Semi Circular Gauge

![Semi Circular Gauge](/files/D0MTXb0sfNJ4pE6SJx2K)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in the [section](#working-with-data).
{% endtab %}

{% tab title="Property Configuration" %}

* `ShowDataLabel` property is set to **true**
* `StartAngle` property is to set as **-90**&#x20;
* `EndAngle` property is to set as **90**
* &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}


# Strategic Roadmap

lowcodera Strategic Roadmap Component

## Purpose

Our lowcodera strategic roadmap component brings stunning roadmapping capability directly into your Power Apps. The component is 100% interactive allowing you to present and make changes for your audience in real-time.

## Variations

![Yearly Strategic Roadmap](/files/hdgFaGotjb8cefyOkpJ9)

![QTY Strategic Roadmap](/files/XrB5MRVj66p7aKuQ6GgY)

There are several variations of Strategic Roadmap component which are supported through the configuration of data and component properties.

## Working with Data

‌You can bind your component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint. &#x20;

{% tabs %}
{% tab title="Dynamic Collection Example" %}
The below example SharePoint list's data in a dynamic manner. The SharePoint list structure looks like below:

![](/files/McNZgcPD27OqJXQCQcKZ)

The below code snippet will generate a dynamic collection to be consumed by the component.

```
ClearCollect(
    colRoadmapData,
    StrategicRoadmap2 // List name of SharePoint
);

```

This will generate the following component!

![](/files/f1td89VexgsH2uuWNvp2)
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `Items` property is set to **colRoadmapData**
* [x] `TimeScale` property is set to **Year**
* [x] `Draggable` property is set to **true**

For every Roadmap component, we need to configure the following properties

| Property          | Description                                            | Value                   |
| ----------------- | ------------------------------------------------------ | ----------------------- |
| ID                | Provide `ID` Column of your data source                | e.g.  ID                |
| Title             | Provide `Title` Column of your data source             | e.g  Title              |
| StartDate         | Provide `StartDate` Column of your data source         | e.g  StartDate          |
| EndDate           | Provide `EndDate` Column of your data source           | e.g. EndDate            |
| IconType          | Provide `IconType` Column of your data source          | e.g. IconType           |
| MainCategory      | Provide `MainCategory` Column of your data source      | e.g. MainCategory       |
| MainCategoryColor | Provide `MainCategoryColor` Column of your data source | e.g. MainCategoryColour |
| Subcategory       | Provide `Subcategory` Column of your data source       | e.g. Subcategory        |
| SubCategoryColor  | Provide `SubCategoryColor` Column of your data source  | e.g. SubCategoryColour  |

* [x] All **`other`** control properties can be left as **default**

{% endtab %}

{% tab title="Output Properties" %}
We can get the following properties as Output Properties when we drag the roadmap bar.

| Property Name       | Description                                    | Syntax                                 |
| ------------------- | ---------------------------------------------- | -------------------------------------- |
| CurrentID           | Return selected ID for the Roadmap             | `StrategicRoadmap.CurrentID`           |
| CurrentStartDate    | Return selected start date for the Roadmap     | `StrategicRoadmap.CurrentStartDate`    |
| CurrentEndDate      | Return selected end date for the Roadmap       | `StrategicRoadmap.CurrentEndDate`      |
| CurrentMainCategory | Return selected main category for the Roadmap  | `StrategicRoadmap.CurrentMainCategory` |
| CurrentSubCategory  | Return selected sub category for the Roadmap   | `StrategicRoadmap.CurrentSubCategory`  |
| CurrentColor        | Return selected category color for the Roadmap | `StrategicRoadmap.CurrentColor`        |
| {% endtab %}        |                                                |                                        |

{% tab title="Event Configuration" %}
We can save or update collection or data source while dragging the roadmap.

We need to configure the `onchange` property`.`

```
UpdateIf(
    colRoadmapData,
    ID = Value(StrategicRoadmap3.CurrentID),
    {
        StartDate: DateValue(StrategicRoadmap.CurrentStartDate),
        EndDate: DateValue(StrategicRoadmap.CurrentEndDate),
        MainCategory: StrategicRoadmap.CurrentMainCategory,
        SubCategory: StrategicRoadmap.CurrentSubCategory,
        SubcatColour: StrategicRoadmap.CurrentColor
    }
);

//refresh grid
UpdateContext({refreshgrid: refreshgrid + 1})


```

{% endtab %}
{% endtabs %}

## Properties

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th>Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td>Control Property</td><td>Description</td><td>Accepted Values</td><td>Required</td></tr><tr><td>Items</td><td>Property to set data source for Roadmap component</td><td>Collection/DataSource</td><td>Yes</td></tr><tr><td>TimeScale</td><td>Property to configure time scale for our Roadmap component</td><td><p>Month</p><p>Quarter</p><p>Year<br>Day<br>Hour</p></td><td>Yes</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>Draggable</td><td>Property to configure if you want to allow dragging tasks on your Roadmap component.</td><td>Boolean</td><td>X</td></tr><tr><td>Date Format</td><td>Property to configure the date format of dates on the roadmap</td><td>e.g. DD/MM/YYYY<br>MM/DD/YYYY</td><td>Yes</td></tr></tbody></table>

## Examples

### Yearly Strategic Roadmap&#x20;

{% tabs %}
{% tab title="Data Configuration" %}
We need to provide same collection defined in the [section](#working-with-data).

![](/files/ZllH8qqi1E8x21l7zjPl)
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `Timescale`property is set to **Year.**&#x20;
* [x] All other control properties can be same as [section](#working-with-data).
  {% endtab %}
  {% endtabs %}

### Quarterly Strategic Roadmap&#x20;

{% tabs %}
{% tab title="Data Configuration" %}
We need to provide same collection defined in the [section](#working-with-data).

![](/files/3nZYXZCUawkLARmwjt4S)
{% endtab %}

{% tab title="Property Configuration" %}

* [x] `Timescale`property is set to **Quarter.**&#x20;
* [x] All other control properties can be same as [section](#working-with-data).
  {% endtab %}
  {% endtabs %}


# Scatter Chart

lowcodera Scatter Chart

## Purpose

The scatter diagram graphs pairs of numerical data, with one variable on each axis, to look for a relationship between them. If the variables are correlated, the points will fall along a line or curve.

## Variations

![](/files/U9Bfth7Tb7FrfUEP7FAd)

There are several variations of scatter charts which are supported through the configuration of data and component properties.

* Basic Scatter Chart
* Scatter Chart with Multiple Series
* Scatter Chart with Dates

## Working with Data

‌The data format for the basic scatter chart is the same as for other lowcodera charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint. &#x20;

{% tabs %}
{% tab title="Static Collection example" %}
In this example, a collection with static data called `scatterChart`is defined in the Power App. The **`items`** property of the scatter chart component is then bound to this collection.

```csharp
Table(
    {
        name: "Sales",
        color: "#ec9d4c",
        data: [
            {
                label: 14.2,
                value: 215
            },
            {
                label: 16.4,
                value: 325
            },
            {
                label: 11.9,
                value: 185
            },
            {
                label: 15.2,
                value: 332
            },
            {
                label: 18.5,
                value: 406
            },
            {
                label: 19.4,
                value: 412
            }
        ]
    }
)

```

The above code snippet will generate the following scatter chart.

![](/files/msmAcrhFRl2vNp0hpOIn)
{% endtab %}

{% tab title="Dynamic Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](/files/mzsfKCRoajocjdDv8tqF)

The below code snippet will generate dynamic collection to be consumed by component.

```
ClearCollect(
    ColscatterChart,
    {
        name: "Sales",
        data: ForAll(
            'Temprature-Sales',
            {
                Value: {
                    label: ThisRecord.Temp,
                    value: ThisRecord.Sales
                }
            }
        )
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] FillOpacity property is set to **1**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](/component-properties/chart-components)&#x20;
{% endhint %}

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th>Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for radar chart.</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td><td>X</td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for radar</td><td>URL</td><td>X</td></tr></tbody></table>

## Examples

### Scatter Chart with Multiple Series

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```csharp
Table(
    {
        name: "Team A",
        color: "#008ffb",
        data: [
            {
                label: 14.2,
                value: 215
            },
            {
                label: 16.4,
                value: 325
            },
            {
                label: 11.9,
                value: 185
            },
            {
                label: 15.2,
                value: 332
            },
            {
                label: 18.5,
                value: 406
            },
            {
                label: 19.4,
                value: 412
            }
        ]
    },
    {
        name: "Team B",
        color: "#26e7a6",
        data: [
            {
                label: 14.2,
                value: 250
            },
            {
                label: 16.4,
                value: 300
            },
            {
                label: 11.9,
                value: 700
            },
            {
                label: 15.2,
                value: 345
            },
            {
                label: 18.5,
                value: 450
            },
            {
                label: 19.4,
                value: 453
            }
        ]
    },
    {
        name: "Team C",
        color: "#fbba39",
        data: [
            {
                label: 15,
                value: 189
            },
            {
                label: 17.5,
                value: 145
            },
            {
                label: 13.6,
                value: 350
            },
            {
                label: 19,
                value: 562
            },
            {
                label: 18.5,
                value: 600
            },
            {
                label: 21,
                value: 350
            }
        ]
    },
    {
        name: "Team D",
        color: "#ff575b",
        data: [
            {
                label: 9.5,
                value: 421
            },
            {
                label: 8.4,
                value: 156
            },
            {
                label: 11.9,
                value: 360
            },
            {
                label: 17.5,
                value: 400
            },
            {
                label: 18.9,
                value: 475
            },
            {
                label: 16.5,
                value: 598
            }
        ]
    }
)


```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `FillOpacity` property is set to **1**&#x20;
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Scatter Chart with Dates

![](/files/96M9lFjQe6I2k7RQmtIC)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```csharp
Table(
    {
        name: "Facebook",
        data: [
            {
                label: "2021-01-01T00:00:00",
                value: 215
            },
            {
                label: "2021-01-02T00:00:00",
                value: 325
            },
            {
                label: "2021-01-03T00:00:00",
                value: 185
            },
            {
                label: "2021-01-04T00:00:00",
                value: 332
            },
            {
                label: "2021-01-05T00:00:00",
                value: 406
            },
            {
                label: "2021-01-06T00:00:00",
                value: 412
            }
        ]
    },
    {
        name: "Instagram",
        data: [
            {
                label: "2021-01-01T00:00:00",
                value: 250
            },
            {
                label: "2021-01-021T00:00:00",
                value: 300
            },
            {
                label: "2021-01-03T00:00:00",
                value: 700
            },
            {
                label: "2021-01-04T00:00:00",
                value: 345
            },
            {
                label: "2021-01-05T00:00:00",
                value: 450
            },
            {
                label: "2021-01-06T00:00:00",
                value: 453
            }
        ]
    }
)

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `FillOpacity` property is set to **1**
* [x] `XAxisDataType` property is set to **Datetime**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}


# Timeline Chart

lowcodera Timeline chart

## Purpose

A timeline chart makes it easier to conceptualize a process or a sequence of events. It can make it easier for you to understand the intricacies of a project or why something seems to take so long to accomplish.

## Variations

![](/files/-MkunJosLV7N1dwLZteO)

There are several variations of Timeline charts which are supported through the configuration of data and component properties.

* Basic Timeline Chart
* Distributed Timeline Chart
* Advanced (Multiple Ranges Timeline Chart)
* Multiple Series - Group Rows Timeline chart

## Working with Data

‌The data format for the basic timeline chart is the same as for other Lowcodera charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint. &#x20;

{% tabs %}
{% tab title="Static Collection example" %}
In this example, a collection with static data called `ColTimeLine` is defined in the Power App. The **`items`** property of the timeline chart component is then bound to this collection.

```markup
ClearCollect(
    ColTimeLine,
    {
        name: "Planning",
        data: [
            {
                label: "Code",
                start: "2021-01-01T00:00:00",
                end: "2021-01-05T00:00:00"
            },
            {
                label: "Test",
                start: "2021-01-01T00:00:00",
                end: "2021-01-10T00:00:00"
            },
            {
                label: "Validation",
                start: "2021-01-15T00:00:00",
                end: "2021-01-20T00:00:00"
            },
            {
                label: "Deployment",
                start: "2021-02-01T00:00:00",
                end: "2021-02-05T00:00:00"
            }
        ]
    }
);

```

The above code snippet will generate the following timeline chart.

![](/files/-MkunkBGfan8koU0WHaw)
{% endtab %}

{% tab title="Dynamic Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](/files/-MlTZ0ME-IDFVKO3pCAk)

The below code snippet will generate dynamic collection to be consumed by component.

```
Clear(CategoryCol);
ForAll(
    Distinct(
        TimeLines,
        Category
    ),
    Collect(
        CategoryCol,
        {
            ProjectCategory:ThisRecord.Result
        }
    )
);

Clear(ColTimeLine);
ForAll(
    CategoryCol,
    Collect(
        ColTimeLine,
        {
            name:ThisRecord.ProjectCategory,
            data:ForAll(
                Filter(TimeLines,Category=ProjectCategory),
                {
                    Value:{
                        label: ThisRecord.Phase,
                        start: ThisRecord.'Start Date',
                        end: ThisRecord.'End Date'
                    }
                }
            )
        }
    )
);
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `XAxisDataType` property is set to **Datetime**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](/component-properties/chart-components)&#x20;
{% endhint %}

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th>Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>ShowDistributed</td><td>Property to show the distribution of a categorical variable by displaying eas its own bar. Property to give each series a unique color.</td><td>Boolean</td><td>X</td></tr><tr><td>StackedType</td><td>Property to change sack type of a bar</td><td><p>None</p><p>Stacked </p><p></p></td><td>X</td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>Show100HeightBar</td><td>Property to set 100% height of the bar</td><td>Boolean</td><td>X</td></tr><tr><td>ShowReversed</td><td>Property to represent the Y-Axis from the right side</td><td>Boolean</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for bars.</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td><td>X</td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for bars</td><td>URL</td><td>X</td></tr></tbody></table>

## Examples

### Distributed Timeline Chart

![](/files/-Mkuno3JTel_T-OhAbgQ)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in the [section](/timeline-chart#working-with-data).
{% endtab %}

{% tab title="Property Configuration" %}

* [x] &#x20;`XAxisDataType` property is set to **Datetime**
* [x] `ShowDistributed` property is set to **true**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Advanced (Multiple Ranges Timeline Chart)

![](/files/-MkunuKE7nqe1VpfL5YT)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```
ClearCollect(
    ColTimeLineMultiple,
    {
        name: "Bob",
        data: [
            {
                label: "Code",
                start: "2021-01-01T00:00:00",
                end: "2021-01-05T00:00:00"
            },
            {
                label: "Test",
                start: "2021-01-01T00:00:00",
                end: "2021-01-10T00:00:00"
            },
            {
                label: "Validation",
                start: "2021-01-15T00:00:00",
                end: "2021-01-20T00:00:00"
            },
            {
                label: "Deployment",
                start: "2021-02-01T00:00:00",
                end: "2021-02-05T00:00:00"
            }
        ]
    },
    {
        name: "Pam",
        data: [
            {
                label: "Code",
                start: "2021-01-01T00:00:00",
                end: "2021-01-07T00:00:00"
            },
            {
                label: "Test",
                start: "2021-08-01T00:00:00",
                end: "2021-01-12T00:00:00"
            },
            {
                label: "Validation",
                start: "2021-01-15T00:00:00",
                end: "2021-01-21T00:00:00"
            },
            {
                label: "Deployment",
                start: "2021-02-03T00:00:00",
                end: "2021-02-05T00:00:00"
            }
        ]
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `XAxisDataType` property is set to **Datetime**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Multiple Series - Group Rows Timeline chart

![](/files/-MkurBiPpqLJXv1XTADo)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```
ClearCollect(
    ColpresidentTL,
    {
        name: "George Washington",
        data: [
            {
                label: "President",
                start: "1789-01-01T00:00:00",
                end: "1796-01-05T00:00:00"
            },
            {
                label: "Vice President",
                start: "1797-01-01T00:00:00",
                end: "1800-01-10T00:00:00"
            },
            {
                label: "Secretary of State",
                start: "1801-01-15T00:00:00",
                end: "1804-01-20T00:00:00"
            }
        ]
    },
    {
        name: "John Adams",
        data: [
            {
                label: "President",
                start: "1797-01-01T00:00:00",
                end: "1804-01-05T00:00:00"
            },
            {
                label: "Vice President",
                start: "1805-01-01T00:00:00",
                end: "1807-01-10T00:00:00"
            }
        ]
    },
    {
        name: "Thomas Jefferson",
        data: [
            {
                label: "President",
                start: "1801-01-01T00:00:00",
                end: "1809-01-05T00:00:00"
            }
        ]
    },
    {
        name: "Aaron Burr",
        data: [
            {
                label: "President",
                start: "1801-01-01T00:00:00",
                end: "1804-01-05T00:00:00"
            },
            {
                label: "Vice President",
                start: "1805-01-01T00:00:00",
                end: "1812-01-10T00:00:00"
            }
        ]
    },
    {
        name: "George Clinton",
        data: [
            {
                label: "President",
                start: "1805-01-01T00:00:00",
                end: "1812-01-05T00:00:00"
            },
            {
                label: "Vice President",
                start: "1813-01-01T00:00:00",
                end: "1817-01-10T00:00:00"
            },
            {
                label: "Secretary of State",
                start: "1818-01-15T00:00:00",
                end: "1820-01-20T00:00:00"
            }
        ]
    },
    {
        name: "John Jay",
        data: [
            {
                label: "President",
                start: "1789-01-01T00:00:00",
                end: "1793-01-05T00:00:00"
            },
            {
                label: "Vice President",
                start: "1794-01-01T00:00:00",
                end: "1796-01-10T00:00:00"
            },
            {
                label: "Secretary of State",
                start: "1798-01-15T00:00:00",
                end: "1800-01-20T00:00:00"
            }
        ]
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `XAxisDataType` property is set to **Datetime**
* [x] `StackedType` property is set to **Stacked**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}


# UI Component Properties

Lowcodera UI Component Properties

This provides a reference for general properties which are pertinent across all  lowcodera UI components

## Properties

<table data-header-hidden><thead><tr><th width="198">Control Property</th><th>Description</th><th width="191">Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>Theme</td><td>Property to change theme of the button</td><td><p>Default</p><p>Danger</p><p>Info</p><p>Primary</p><p>Secondary</p><p>Success</p><p>Warning</p><p></p></td><td>X</td></tr><tr><td>FontSize</td><td>Property to set font size </td><td>Number</td><td>X</td></tr><tr><td>IconName</td><td>Property to icon name for header</td><td><a href="https://fontawesome.com/v5.15/icons?d=gallery&#x26;p=2&#x26;m=free">Font-awosome icon name</a></td><td>X</td></tr></tbody></table>


# Chart Component Properties

A reference for all properties available in our chart components

## Properties

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th>Accepted Values</th><th data-hidden>Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td>Required</td></tr><tr><td>Items</td><td>Property to provide data source of the chart. </td><td></td><td>Yes</td></tr><tr><td>ChartTitle</td><td>Property to provide the title of the chart</td><td>Text</td><td>X</td></tr><tr><td>ChartSubtitle</td><td>Property to provide subtitle for our chart. The subtitle will be displayed below the chart title.</td><td>Text</td><td>X</td></tr><tr><td>ChartTitleAlign</td><td>Property to align the chart title. </td><td><p>Center</p><p>Left</p><p>Right</p></td><td>X</td></tr><tr><td>ShowTooltip</td><td>Property to show tooltip on hover of the bar</td><td>Boolean</td><td>X</td></tr><tr><td>ShowDataLabel</td><td>Property to show data labels on the bar</td><td>Boolean</td><td>X</td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>ShowReversed</td><td>Property to represent the Y-Axis from the right side</td><td>Boolean</td><td>X</td></tr><tr><td>ShowLegend</td><td>Property to show legends for the graph</td><td>Boolean</td><td>X</td></tr><tr><td>LegendAlign</td><td>Property to set legend alignment</td><td><p>Center</p><p>Left</p><p>Right</p></td><td>X</td></tr><tr><td>LegendPosition</td><td>Property to set legend position</td><td><p>Top</p><p>Botton</p><p>Left </p><p>Right</p></td><td>X</td></tr><tr><td>Theme</td><td>Property to choose different Theme colors for bars.</td><td>Pallette 01 to 10</td><td>X</td></tr><tr><td>ShowDownload</td><td>Property to allow users to download graphs in CSV, SVG and PNG format</td><td>Boolean</td><td>X</td></tr><tr><td>LineType</td><td>Property to show different types of lines</td><td><p>Smooth</p><p>Stepline</p><p>Straight</p></td><td>X</td></tr><tr><td>EnableDarkMode</td><td>Property to enable dark mode for the chart</td><td>Boolean</td><td>X</td></tr><tr><td>ShowYAxisGridlines</td><td>Property to show or hide Gridlines for Y axis.</td><td>Boolean</td><td>X</td></tr><tr><td>ShowXAxisGridlines</td><td>Property to show or hide Gridlines for Y axis.</td><td>Boolean</td><td>X</td></tr><tr><td>ShowYAxisLabel</td><td>Property to show Y-Axis Lable</td><td>Boolean</td><td>X</td></tr><tr><td>YAxisLabelFontSize</td><td>Property to set Y Axis Label Font</td><td>Numeric</td><td>X</td></tr><tr><td>YAxisLabelRotate</td><td>Property to rotate y-axis text label to a specific angle from it’s center</td><td>Numeric</td><td>X</td></tr><tr><td>YAxisLabelOffsetX</td><td>Property to set the left offset for label</td><td>Numeric</td><td>X</td></tr><tr><td>YAxisLabelOffsetY</td><td>Property to sets the top offset for label</td><td>Numeric</td><td>X</td></tr><tr><td>YAxisLabelMaxWidth</td><td>Property to set maximum width for the y-axis labels</td><td>Numeric</td><td>X</td></tr><tr><td>YAxisForceNiceScale</td><td> If set to <code>true</code>, the y-axis scales are forced to generate nice looking rounded numbers even when min/max are provided. Turn this off if you manually set min/max and want it to be unchanged.</td><td>Boolean</td><td>X</td></tr><tr><td>YAxisDecimalsInFloat</td><td>Property to display number of fractions when there are floating values in y-axis.</td><td>Numeric</td><td>X</td></tr><tr><td>YAxisShowForNullSeries</td><td>When turned off, it will hide the y-axis completely for a series which has no data or a series with all null values.</td><td>Boolean</td><td>X</td></tr><tr><td>YAxisTitle</td><td>Property to show Y-Axis Title</td><td>Text</td><td>X</td></tr><tr><td>YAxisEnableMinValue</td><td>Property to set Minimum value for Y-Axis using <code>YAxisMinValue</code> property.</td><td>Boolean</td><td>X</td></tr><tr><td>YAxisMinValue</td><td> Property to set Minimum value for Y-Axis.</td><td>Numeric</td><td>X</td></tr><tr><td>YAxisEnableMaxValue</td><td>Property to set Maximum value for Y-Axis using <code>YAxisMaxValue</code> property.</td><td>Boolean</td><td>X</td></tr><tr><td>YAxisMaxValue</td><td> Property to set Maximum value for Y-Axis.</td><td>Numeric</td><td>X</td></tr><tr><td>ShowXAxisLabel</td><td>Property to show X-Axis labels</td><td>Boolean</td><td>X</td></tr><tr><td>XAxisLabelFontSize</td><td>Property to set size for X-Axis labels.</td><td>Numeric</td><td>X</td></tr><tr><td>XAxisLabelRotate</td><td>Property to rotate x-axis text label to a specific angle from it’s center</td><td>Numeric</td><td>X</td></tr><tr><td>XAxisLabelOffsetX</td><td>Property to set the left offset for label</td><td>Numeric</td><td>X</td></tr><tr><td>XAxisLabelOffsetY</td><td>Property to set the top offset for label </td><td>Numeric</td><td>X</td></tr><tr><td>XAxisLabelMaxHeight</td><td>Property to set maximum width for the y-axis labels </td><td>Numeric</td><td>X</td></tr><tr><td>XAxisTitle</td><td>Property to show X-Axis Title</td><td>Text</td><td>X</td></tr><tr><td>XAxisPosition</td><td>Property to show X-Axis position</td><td><p>Bottom</p><p>Top</p></td><td>X</td></tr><tr><td>XAxisDataType</td><td>Property to choose X-Axis data type</td><td><p>Category</p><p>Datetime</p><p>Numeric</p></td><td>X</td></tr><tr><td>XAxisDateTimeFormat</td><td>Property set datetime format</td><td><p>String </p><p>"dd/mm/yyyy"</p><p>"mm/dd/yyyy"</p><p>"yyyy/mm/dd"</p><p>"dd/mm/yyyy hh:mm:ss"</p><p>"dd-mm-yyyy"</p><p>"mm-dd-yyyy"</p><p>"yyyy-mm-dd"</p><p>"yyyy-mm-dd hh:mm:ss"</p></td><td>X</td></tr><tr><td>PlotPaddingTop</td><td>Property to provide padding from <strong>top</strong> position to render the chart.</td><td>Numeric</td><td>X</td></tr><tr><td>PlotPaddingRight</td><td>Property to provide padding from <strong>right</strong>position to render the chart.</td><td>Numeric</td><td>X</td></tr><tr><td>PlotPaddingBottom</td><td>Property to provide padding from <strong>bottom</strong> position to render the chart.</td><td>Numeric</td><td>X</td></tr><tr><td>PlotPaddingLeft</td><td>Property to provide padding from <strong>left</strong> position to render the chart.</td><td>Numeric</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for bars.</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td><td>X</td></tr><tr><td>FillOpacity</td><td>Property to choose fill Opacity</td><td><p>Numeric </p><p>0 to 1</p></td><td>X</td></tr><tr><td>ChartBackgroundColor</td><td>Property to set background color of chart.</td><td><p>String</p><p>(Hex color code)</p></td><td>X</td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for bars</td><td>URL</td><td>X</td></tr><tr><td>GradientShade</td><td>Property to change the gradient shade</td><td>Light<br>Dark</td><td><em>X</em></td></tr><tr><td>GradientShadeIntensity</td><td>Property to change the intensity of gradient shade</td><td>Numeric (Ranging from 1 to 15 )</td><td><em>X</em></td></tr><tr><td>GradientOpcityFrom</td><td>Property to change the opacity of gradient starting from</td><td>Decimal (Ranging 0 to 1 )</td><td><em>X</em></td></tr><tr><td>GradientOpcityTo</td><td>Property to the opacity of gradient starting to</td><td>Decimal (Ranging 0 to 1 )</td><td><em>X</em></td></tr><tr><td>GradientDirection</td><td>Property to change the direction of the gradient opacity. </td><td><p>Horizontal</p><p>Vertical</p></td><td>X</td></tr><tr><td>GradientInverse</td><td>Property to reverse the gradient</td><td>Boolean</td><td>X</td></tr><tr><td>GradientStop</td><td>Property to define different stop points for gradient shadesC</td><td>Comma Seperated Points ranging from 0 to 100 <br>(e.g) 0, 20, 65, 85</td><td>X</td></tr></tbody></table>

##


# Navbar Schema

lowcodera Navigation bar JSON Schema reference

## Navigation Configuration Schema

{% tabs %}
{% tab title="Column Configuration Syntax" %}
For lowcodera Navbar bar components, we need to develop a navigation configuration schema. Here's the example along with property description.

**Syntax**

```
ClearCollect(
    globalnav,
    {
        type: "DropDown",
        title: "Employee Corner",
        icon: "object-group",
        key: "ec",
        dropDown: [
            {
                type: "Action",
                title: "Log Timesheet",
                key: "logtimesheet"
            },
            {
                type: "Action",
                title: "Apply Leave",
                key: "leave"
            },
            {
                type: "Action",
                title: "My Projects",
                key: "projects"
            }
        ]
    },
    {
        type: "Action",
        icon: "cog",
        key: "settings",
    }
    
)
```

## Description of Schema

<table data-header-hidden><thead><tr><th width="185.01438371097075">Schema</th><th width="202.06111696522657">Description</th><th width="222.01524853562">Accepted Values</th><th data-hidden>Required</th></tr></thead><tbody><tr><td><strong>Attribute</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>type</td><td>Property to configure dropdown or action label for navigation bar</td><td><p>dropdown</p><p>action</p></td><td>Yes</td></tr><tr><td>title</td><td>Property to set label for navigation component</td><td>string</td><td>Yes</td></tr><tr><td>icon</td><td>Property to configure icon name for a navigation label </td><td>string</td><td>Yes</td></tr><tr><td>key</td><td>Property to configure the key for navigation element which can be useful to write onchange event</td><td>string</td><td>Yes</td></tr><tr><td>dropDown</td><td>Property to provide dropdown schema for the navigation</td><td>JSON </td><td>Yes</td></tr></tbody></table>
{% endtab %}
{% endtabs %}


# Page 1