Overview

A Column Chart in noKodr is a type of chart that displays data using vertical bars, or columns, where the height of each column represents the value of the data point. This chart is ideal for comparing different categories or showing changes over time. Column Charts are commonly used to highlight variations in data, making it easy to see which categories are higher or lower in value.

Key Features of Column Chart

Below are the key features that make up a Column Chart:

Key Feature	Description
Vertical Bars	Represents data using vertical bars, where the height of each bar correlates with the value of the data point, making it easy to compare different categories or data series.
Comparative Visualization	Ideal for comparing values across multiple categories or time periods, providing clear insights into data trends and variations.
Customizable Labels	Allows for the addition of titles, axis labels, and legends to enhance chart readability and provide context for the data being displayed.
Color Options	Provides customization of bar colors to differentiate between data series or categories, improving visual clarity and impact.

Attributes

Model

Attribute Name	Description
Model	All the Models (Salesforce Object) you have created will appear in the list. You can select a specific model from the list to save and display its field values. Note: Only one model (Record Type - Single) can be bound at a time.

Basic

Attribute Name	Description
Chart Title	It is a brief heading at the top of the chart that describes the data being visualized. You can also assign a dynamic label using merge text. Reference: Merge Text
Label Field	It is a text field that allows you to assign a name or title to a chart from the selected model object fields.
Value Field	It allows you to select a data point field from the model object to be represented in the chart, typically used to plot values on the chart's axis.
Group Field	It is used to categorize data in the chart by grouping it based on a selected field, allowing you to organize and compare data sets more effectively. Note: This field is only available in below charts, Grouped Column Chart Stacked Bar Chart Stacked Column Chart Group Bar Chart
Show X Axis Label	This checkbox allows you to display or hide the label on the X-axis of the chart. Note: This field is not available in below charts, Pie Chart Bullet List
X Axis Label	It is a text field that lets you specify a label for the X-axis of the chart, indicating what the data along the horizontal axis represents. You can also assign a dynamic label using merge text. Reference: Merge Text Note: This field is not available in below charts, Pie Chart Bullet List
Show Y Axis Label	This checkbox allows you to display or hide the label on the Y-axis of the chart. Note: This field is not available in below charts, Pie Chart Bullet List
Y Axis Label	It is a text field that lets you specify a label for the Y-axis of the chart, indicating what the data along the Vertical axis represents. You can also assign a dynamic label using merge text. Reference: Merge Text Note: This field is not available in below charts, Pie Chart Bullet List
Show Legend	This checkbox allows you to display or hide the legend on the chart, which provides a key to understanding the chart's data series or categories.
Legend Title	It is a text field that allows you to specify a title for the legend in the chart. You can also assign a dynamic title using merge text.
Background Theme	It allows you to choose between a dark or light theme for the chart's background, enhancing the visual contrast and readability of the chart based on your preference.
Chart Theme	It allows you to select the overall visual style of the chart, including color schemes and design elements, to align with your preferred aesthetic or branding.
Is Animation Enabled?	It refers to whether dynamic visual effects, like transitions or movements, are activated for a more engaging presentation of the data
Show Gradient	It enables or disables gradient shading on the chart, allowing you to add a smooth color transition effect for enhanced visual appeal.
Show Label	This Checkbox allows you to display or hide labels on the chart. Note: This field is only available in Pie Chart.
Doughnut	This Checkbox allows you to switch a chart to a doughnut format, providing a circular chart with a central hole for displaying data proportions with enhanced visual clarity. Note: This field is only available in Pie Chart.
Step Field	This displays data with stepped lines, highlighting discrete changes with horizontal and vertical segments based on the selected field. Note: This field is only available in Line Chart.
Timeline	This checkbox enables or disables the display of a timeline on the chart, providing a visual representation of data changes over time. Note: This field is only available in Line Chart.
Show X Axis	This checkbox allows you to display or hide the X-axis on the chart, controlling whether the horizontal axis is visible in the chart's presentation.
Show Y Axis	This checkbox allows you to display or hide the Y-axis on the chart, controlling whether the Vertical axis is visible in the chart's presentation.

UI

Attribute Name	Description
Padding Location	Padding Location typically refers to the configuration of spacing around elements.
Padding Size	Padding Size refers to the amount of space added inside an element, between the element's content and its border or edge.
Margin Location	Margin Location refers to the spacing around the outside edge of an element.
Margin Size	Margin Size refers to the amount of space around the outside edges of an element.
Style	It is used to apply custom styles to section, such as color, font, size, and more. It allows you to define the appearance of a component by specifying CSS properties directly within the attribute.
Classes	It is used to apply SLDS classes to component, if needed.
Flow Type	It specifies the arrangement of content within the section, allowing users to choose between different layout flows as ‘Fit to content’ or ‘Equally distributed’.
Show Border	It is used to simply add border surrounding the section. Note: Currently, noKodr supports only black borders.

Visibility and Component

Attribute Name

Description

Visibility Type

It determines whether a component is visible on the layout. It offers the following visibility types:

Always: The component will always be visible.
Conditional: The component's visibility is determined based on specific criteria, which can make it either visible or hidden as needed.
You can explore more about Visibility Type here.

Reference: Conditional Visibility

Component Label

It simply shows the name of the component.

Merge Text

Merge text is a key feature of the noKodr application, allowing users to display field values on the UI. Depending on the data type, users can perform mathematical operations on these fields.

For example, if you want to display a calculated total price based on the quantity and unit price entered by the user on a sales order form, and you wish to dynamically showcase this on the UI without saving the record in the database, you can achieve this using the UI fields in noKodr.

After selecting merge text you can you can see several options such as:

Attribute Name	Description
Source Type	In this option, you can select various sources from which you want to display values.
Value	The available options will change depending on the selected source type. For example, if you choose "Static" as the source, you can provide a fixed static value.
Merge Field Expression	The selected field from the source will be displayed in a merge format. For instance, the first name field from the contact model will appear as: {model:contact.FirstName}.
Message Body	In this option, You can add multiple values to form your final UI merge text. For example, merge fields include {model:contact.FirstName},{model:contact.LastName} will eventually display the contact's first name and last name next to each other.

Available Sources

After clicking on the Gear Icon, you can select various sources to include fields or values, such as variables, other models, static values, etc.

Source Type	Description
Static	Use this option to provide a fixed static value.
Field	Select the field from the chosen object in the model whose value you want to include.
Model	Choose the field from other models whose value you want to include.
Variable	Select from the variables created in the layout whose value you want to use.
Cookie Key	Choose the available cookie key whose value you want to include from your browser.
Local Storage Key	Select the available Local Storage Key whose value you want to include from your browser.
User	You can also select fields from the current logged-in user in your organization to include in the merge. Note: The User source refers to the currently logged-in user in your organization. This means that if you include the First Name field from the user, each time a different user logs in, they will see their own First Name displayed.

After selecting the source type, you need to choose the available options based on the selected type. For example, if you have selected "Model" as the source type, you will need to select one model from the available models.

Note: Only single record models are visible here and can be used in the merge text. Multi-record models are not supported here.

Once you select a model, the field options will become available. You can then choose the fields you want to include in your merge field expression and combine multiple fields to form your final expression in the message body.

Conditional Visibility Type:

Filter Operator:

Note: Before using the filter criteria, it's important to understand which filter operators are supported for each field type

Filters Attributes:

Filter Operators

Operator	Supported Field Types	Description
Equal	Number, Currency, Date, Text, Boolean, Picklist	The equal operator is used to compare two values or expressions. It is used to compare numbers, strings, Boolean values, variables, objects, etc. The result is TRUE if the expressions are equal otherwise it’s FALSE
Contains	Text, Picklist	The contains operator returns TRUE if the value on the left contains the value on the right, and otherwise FALSE
Starts With	Text, Picklist	It returns TRUE if a string or number starts with the specified character otherwise it returns FALSE.
Ends With	Text, Picklist	It returns TRUE if a string or number ends with the specified character otherwise it returns FALSE
In	Text, Picklist	IN operator allows you to easily test if the expression matches any value in the list of values. Determines whether the value of an expression is equal to any of several values in a specified list.

Conditional Visibility Type:

Attributes Name	Description
Destination Type	Users can select the destination type from various sources. Reference: Destination Type
Operator	Here, users can select different operators to add filters. Reference: Filter Operator
Source Type	Here, you can select the source type from various sources. Reference: Available Sources.
Value	Here user can select the value from different Source Type. Reference: Merge Text

Destination Type:

Destination Type	Description
Model	From this source, users can select a Model (Salesforce Object) field to be displayed as the destination type.
Variable	Here, users can select the destination type from variables such as Record ID, Is Disabled, Is Read only, or Is Visible.
User	Here, you can choose the label from user fields such as First Name, Last Name, Email, Name, Phone, or Session ID.
Record	It enables to choose record fields as destination type.
Device	It enables user to decide whether the action will be visible on the specific device type or not. Devices supported: Mobile Desktop Tablet