# What is Flexi Kanban? Discover the Power of Customization {% embed url="" %} FlexiKanban transforms your Salesforce platform UI with tailor-made Kanban boards, designed to adapt seamlessly to your unique workflow needs. Experience the true power of customization: * **Tailor-Made Boards**: Dive into a world where every Kanban board is an opportunity for innovation. Craft your boards to fit your specific project requirements, ensuring efficiency and clarity in your workflow. * **Unlimited Columns, Infinite Possibilities**: No matter the complexity of your process, our independently configurable columns cater to every detail. Whether it's a simple task list or a complex project flow, FlexiKanban bends to your will. * **Customizable Cards**: Each card is a blank canvas for your Salesforce objects. Design them with the information that matters most to you, presented in a way that speaks to your team's unique needs. * **Dynamic Data and Design**: With advanced formulas and functions, watch your data come to life. FlexiKanban's dynamic design capabilities ensure that the most relevant information is always at your fingertips. * **Interactive Data Display**: Click on any card to uncover a deeper layer of information. Configure what data is shown to make the most out of every interaction. * **Seamless Card Interactions**: Our robust actions engine facilitates not just card movements but also empowers you with button clicks and menu selections, enhancing your control and efficiency. * **Versatile Forms for Every Need**: From simple data entry to complex information gathering, our mighty forms module is designed to meet and exceed your expectations. * **Composite Kanbans for Comprehensive Overview**: Imagine a multi-board view where multiple Kanban boards coexist. Each board can have its own layout. Use drill-down to keep the big picture clear. # Install Flexi Kanban This guide will walk you through the process of installing the Flexi Kanban managed package from the Salesforce AppExchange into your Sandbox and Production environments. Flexi Kanban is a 100% native Salesforce application, which means it integrates seamlessly with your Salesforce data without the need for external service integrations. ### Step 1: Installing from AppExchange To begin, you will need to get the Flexi Kanban package from the Salesforce AppExchange. You have two easy ways to find our listing: * **Direct Link**: The simplest way is to use our [direct listing link](https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FMhR1UAL). * **Search on AppExchange**: Alternatively, you can: * Navigate to the[ Salesforce AppExchange](https://appexchange.salesforce.com/). * In the search bar, type "Flexi Kanban" and press Enter. * Select the "Flexi Kanban" listing from the search results. Once on the listing page, click the **Get It Now** button. You may be prompted to log in to your Trailblazer.me account if you are not already. Choose the Salesforce org where you want to install the package (either a Sandbox or Production org) and follow the on-screen prompts. ### Step 2: Select "Install for Admins Only" During the installation process, you will be asked to choose the installation type. It is crucial to select Install for Admins Only. This ensures that initially, only users with the System Administrator profile will have access to the package. This allows you to configure the necessary permissions before granting access to other users. ### Step 3: Assigning Permission Sets Once the installation is complete, you will need to assign permission sets to your users based on their roles. This step is essential for granting the appropriate level of access to Flexi Kanban's features. * **Flexi Kanban Admin**: Assign this permission set to users who will be responsible for creating, configuring, and managing Flexi Kanban boards. * **Flexi Kanban Viewer**: Assign this permission set to end-users who only need to view and interact with the Kanban boards. For detailed instructions on how to assign these permission sets, please refer to our article: \ [Assign Permission Sets](broken://pages/DoaBAxFMcxxiJLKI8Kk9) ### Step 4: Managing Licenses in Sandbox and Production The process for managing user licenses for Flexi Kanban differs between Sandbox and Production environments. #### Sandbox Environment In a Sandbox environment, Flexi Kanban comes with an org-wide unlimited license. This means you do not need to assign individual licenses to users in your Sandbox. As long as users have the appropriate permission sets, they will be able to use Flexi Kanban. #### Production Environment In your Production environment, you will need to assign a Flexi Kanban license to each user who will be using the application. After you have assigned the appropriate permission sets, you must also assign a paid seat license for those users to access Flexi Kanban. For a step-by-step guide on how to assign licenses in your Production org, please see our article: [Manage Licenses](broken://pages/Z9KQN1ebO8No5kU5WeBj) ### Next Steps: Configure Application Settings After successfully installing Flexi Kanban and assigning the necessary permissions and licenses, the final step is to configure the application's settings. This will allow you to define which Salesforce objects are available for creating Kanban boards. To learn how to configure these settings, please see our guide:[ Flexi Kanban Application Settings](https://docs.flexikanban.ai/references/application-settings#object-settings). By following these steps, you can successfully install and configure the Flexi Kanban managed package in both your Sandbox and Production Salesforce environments. Should you have any questions or encounter any issues during the installation process, please do not hesitate to contact our support team.
# Assign Licenses and Permissions Use this flow after installing Flexi Kanban. The order depends on your Salesforce org type: * **Production and Developer orgs**: assign the managed package license first, then assign a permission set. * **Sandbox orgs**: skip license assignment and assign the permission set directly. {% hint style="info" %} In Sandbox orgs, Salesforce creates an unlimited org-wide package license automatically. You do not need to assign package licenses manually. {% endhint %} ### Choose the right permission set Assign only one permission set per user: * **Flexi Kanban Admin** — full access to create and manage boards * **Flexi Kanban User** — access to owned and shared boards * **Flexi Kanban Viewer** — read-only access to shared boards ### Production and Developer orgs In Production and Developer orgs, complete these steps in order. {% stepper %} {% step %} ### Step 1: Assign the managed package license 1. Open **Setup**. 2. Enter **Installed Packages** in Quick Find. 3. Select **Installed Packages**. 4. Find **Flexi Kanban**. 5. Click **Manage Licenses**. 6. Click **Add Users**. 7. Select the users who need access. 8. Save your changes.\ \ ![](https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2Fw1Md9qTe7XmUTEjX2UEU%2Fimage.png?alt=media\&token=9f3f3189-0f5f-44c0-83ca-e8eb6cc4eba8) If all licenses are already assigned, remove unused licenses or contact for more seats. {% endstep %} {% step %} ### Step 2: Assign a permission set 1. Open **Setup**. 2. Enter **Users** in Quick Find. 3. Select **Users**. 4. Open the user record. 5. In **Permission Set Assignments**, click **Edit Assignments**. 6. Add one of these permission sets: * **Flexi Kanban Admin** * **Flexi Kanban User** * **Flexi Kanban Viewer** 7. Save your changes.\ \ ![](https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FhYIqMfJxq2K5UE54Ymx9%2Fimage.png?alt=media\&token=cd400695-945a-4d35-8b2e-2bd2adfdb71f) Do this only after the package license is assigned. {% endstep %} {% endstepper %} ### Sandbox orgs In Sandbox orgs, assign only the permission set. 1. Open **Setup**. 2. Enter **Users** in Quick Find. 3. Select **Users**. 4. Open the user record. 5. In **Permission Set Assignments**, click **Edit Assignments**. 6. Add one of these permission sets: * **Flexi Kanban Admin** * **Flexi Kanban User** * **Flexi Kanban Viewer** 7. Save your changes.\ \ ![](https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FnswfuPUxDRHlX0c1ahns%2Fimage.png?alt=media\&token=09c31287-c314-43ac-b75b-10153572e50c) No manual package license assignment is required in Sandbox. ### Quick summary * **Sandbox**: assign the permission set only. * **Production**: assign the managed package license first, then the permission set. * **Developer org**: assign the managed package license first, then the permission set. # Flexi Kanban App Overview Learn how to open the Flexi Kanban Salesforce app, understand its main tabs, and know where to start as a new admin. Flexi Kanban is a Salesforce app that includes a set of tabs for working with Kanban boards, forms, reusable automations, and application settings. This page helps you get oriented in the app and understand which tab to use first. It does not explain every feature in detail. More advanced topics, such as **Kanban Studio** and **Form Studio**, are covered in separate articles. ### Before you begin Before opening the Flexi Kanban app, make sure: * Flexi Kanban is installed in your Salesforce org * Your user has a Flexi Kanban license * Your user has the required Flexi Kanban permission set assigned ### Open the Flexi Kanban app In Salesforce: 1. Open the App Launcher. 2. Search for **Flexi Kanban**. 3. Select the **Flexi Kanban** app. Once the app opens, you will see several tabs. Each tab serves a different purpose.
### Where should a new admin start? If you are creating your first board, start from the **Kanbans** tab. To create a new Kanban: 1. Open the **Kanbans** tab. 2. Click **New**. 3. This opens the **Kanban Creation Wizard**. {% hint style="info" %} The **Kanban Creation Wizard** helps you generate a board that is immediately usable. After that, you can open the board in **Kanban Builder/Studio** and enhance it with more advanced layouts, styling, interactions, filters, forms, and automations. {% endhint %} ### Flexi Kanban Application Tabs *** ### Kanbans The **Kanbans** tab shows the list of existing Kanbans that you have access to in your Salesforce org. From this tab, you can create a new Kanban, open a Kanban in Viewer mode, or manage existing Kanbans you have access to. {% hint style="info" %} When you click **Edit**, the Kanban opens in **Kanban Studio**, where you can configure advanced board settings such as layout, columns, cards, filters, interactions, and automation. {% endhint %} ### Forms The **Forms** tab lists the Forms available in your org. Forms in Flexi Kanban enable interactive, custom experiences linked to your boards, such as displaying card details or popping up a form when a card is moved to a different column. Use this tab to create a new form or manage existing forms. ### Actions The **Actions** tab shows the list of reusable **Actions** available in your org. {% hint style="info" %} An Action is a reusable automation element that performs one backend operation. {% endhint %} Examples of actions include validating data, defining variables, creating, updating, or deleting a record, sending an email, making a callout, and executing Apex logic. Use this tab to create a new action or manage existing actions. ### Action Groups The **Action Groups** tab shows the list of reusable **Action Groups** available in your org. {% hint style="info" %} An **Action Group** is a sequence of individual Actions executed one after another. All Actions inside the group share the same runtime context and variables. Think of an **Action Group** as a reusable multi-step automation flow. {% endhint %} Use this tab to create a new Action Group or manage existing ones you have access to. ### Settings The **Settings** tab is used to manage application-level Flexi Kanban configuration for your Salesforce org. Use this tab when you need to review or update global settings that affect how Flexi Kanban works across your organization, including general application behavior, supported objects, and integration-related configuration. A detailed overview of the available settings is covered in a separate article. # Build Your First Board in 5 Minutes In this tutorial, you will create your first working **Opportunity** Kanban board using the **Kanban Creation Wizard**. You will start from the **Kanbans** tab, create a new board, choose **Opportunity** as the source object, and group records by **Stage**. By the end, you will have a fully functional board that is ready to use right away. {% hint style="info" %} This tutorial focuses on the fastest way to create a working board. You can enhance it later in **Kanban Studio** with advanced layouts, color-codings, filters, interactions, forms, and automations. {% endhint %} ### Before you begin Before starting, make sure: * Flexi Kanban is installed in your Salesforce org * your user has a [Flexi Kanban license and a permission](/get-started/assign-licenses-and-permissions) set assigned * your Salesforce org utilizes the Opportunity object, and you have some opportunity records. ### What you will build In this tutorial, you will create: * a Kanban board based on **Opportunity** records * columns grouped by **Stage** * optional stage summaries based on **Amount** * cards displaying key Opportunity fields * optional AI-assisted card color coding This is the fastest way to create a practical first board and understand the basic Flexi Kanban setup flow. ### Open the Flexi Kanban app In Salesforce: 1. Open the **App Launcher**. 2. Search for **Flexi Kanban**. 3. Select the **Flexi Kanban** app. 4. Open the **Kanbans** tab. 5. Click **New**.
This opens the **Kanban Creation Wizard**. ### Step 1: Select the Kanban Type In the first step of the **Kanban Creation Wizard**, select the **Standard Kanban** type. This is the best option for creating a basic board from a single Salesforce object such as **Opportunity**.
After selecting **Standard Kanban**, click **Next**. ### Step 2: Personalize the Board In this step, define the basic identity and visual style of your board. You can: * choose one of the predefined color themes * enter a name for the board * optionally add a description For example, you can name the board: * **Opportunities by Stage** * **Sales Pipeline** * **Opportunity Workflow Board**
After entering the required information, click **Next**. ### Step 3: Configure Data and Grouping In this step, define what records the board should display and how they should be organized. Select: * **Opportunity** as the data source * **Stage** as the field used to group records into columns You can also enable stage-level summarization by selecting the fields used for totals, such as **Amount**. This allows Flexi Kanban to show Opportunity records grouped by Stage and optionally summarized by value in each column.
After entering the required information, click **Next**. ### Step 4: Add Columns Add columns for the stages you want to include in the board. Typically, this means adding columns for all stages in your sales process. One important advantage of Flexi Kanban is that it allows you to include a column for **lost opportunities**. This helps your team track lost deals and identify patterns over time. This solves an important limitation of the standard Salesforce Kanban view, where lost opportunities are not displayed.
After selecting the columns you want to include, click **Next**. ### Step 5: Select Card Fields Choose which Opportunity fields should appear on the Kanban cards. Add the key fields your users need to see directly on the board, such as: * Opportunity Name * Account Name * Amount * Close Date * Opportunity Type * Owner's Full Name Flexi Kanban supports **unlimited field options** on cards, which provides much greater flexibility than the standard Salesforce Kanban view, which is limited to four fields.
After selecting the fields you want to display, click **Next**. ### Step 6: Apply AI-Assisted Color Coding (Optional) To help users quickly identify important records, you can apply color coding based on Opportunity data. In this step: 1. Click **Generate Color Coding Ideas** to let the integrated AI-powered assistant suggest initial color-coding rules that you can adjust later in the Kanban Studio if needed. 2. Review the generated summary and suggested mapping by clicking **View Color Legend**. 3. Select the ideas that best match your business needs.
For example, you might choose to color-code cards based on: * Opportunity Type * Amount * Close Date This helps users visually spot high-value, urgent, or strategically important opportunities.
After selecting the color-coding ideas you want to use, click **Next**. ### Step 7: Finalize the Board To generate the board, review configuration settings and click **Finish**. Before finishing, make sure to uncheck **Launch Advanced Kanban Builder.** This keeps the tutorial focused on the simplest onboarding flow. Instead of opening the board in **Kanban Builder/Studio**, Flexi Kanban will create the board and let you open it first in **Viewer mode**.
Flexi Kanban creates the initial board based on the configuration you selected in the Wizard. As a result, your Opportunity records are: * arranged into columns based on their current Stage * optionally summarized by stage totals * displayed with the card fields you selected * visually categorized using the color-coding rules you applied Your board is now ready to use.
# What to Learn Next # How to Build a Simple Kanban Using Creation Wizard Abilities In this tutorial we will create a simple, but actual working Kanban that will allow to manage Cases. Case is a standard Salesforce object that offers a set of necessary properties. {% hint style="info" %} Note: links in this article are going to other parts of this documentation, that are very useful. Read them to know more about mentioned things. {% endhint %} ### Some Terminology Standard kanban consists of the following parts: * [**Header**](/standard-kanban/configure-kanban/how-to-configure-kanban-basic-properties) (where filter selector, buttons and kanban name are shown) * [**Body**](/standard-kanban/configure-kanban/working-with-kanban-layout) (where columns and sidebars) * [**Columns**](/standard-kanban/configure-column) (that represent some conditions which cards should match) * [**Cards**](/standard-kanban/configure-card) (each card represents one record) Kanban header can contain: * [**Buttons**](/standard-kanban/configure-kanban/how-to-add-kanban-buttons-and-menus) (and menus that are buttons that show dropdown list with menu items) * [**Statistics**](/standard-kanban/configure-kanban/how-to-add-kanban-statistics) (set of cells with some information) Columns consist of: * [**Header**](/standard-kanban/configure-column/how-to-configure-column-header) (where column name and cards counter are shown) * [**Body**](/standard-kanban/configure-column/how-to-configure-column-body) (where cards are displayed) * [**Footer**](/standard-kanban/configure-column/how-to-configure-column-footer) (optional, by default it is absent) Column header and footer can contain **cells** with some information. Column footer allows to display cells in several rows. Card has the following parts: * [**Compact layout**](/standard-kanban/configure-card/how-to-configure-card-compact-layout) (actually elements that are on the card) * [**Layout**](/standard-kanban/configure-card/how-to-configure-card-layout) (information, form or something else that will be shown in the sidebar or modal popup when card is clicked) Card compact layout consists of[ **cells**](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons) with some information. ### Start Kanban Creation Let's Start with Kanban Creation Wizard and give your Kanban a name and look. * First, open a Flexi Kanban Application and go to "Kanbans" tab. Click "**New**" button to start New Kanban wizard: Select "Standard Kanban" first. Then click "Next" button: * Let's call your new Kanban "**Cases Management Dashboard**". Type this in the "**Name**" field. * Select a **Color** **Theme** (pre-defined design). Default is "**White**" and typical look of the kanban will be shown in preview. Let's leave it as is. * **Description** is not mandatory and affects nothing - it is used just to show something useful in the list of kanbans at the "**Kanbans**" tab. * Click "**Next**" button. ### Set What your Kanban will Work With * At the next step select **"Case"** in Source Object picklist. * The "Group By" picklist will be populated with fields of Case object. * Leave "Summarize By" empty (by default cases do not have any countable fiels suitable for adding totals): ### Specify what Columns do You Need in your Kanban {% hint style="info" %} * Fields you see in "Group By" picklist are properties (standard and custom) of Case object. * Only fields that are restricted with a set of values (picklists and multi-selects) are only shown here. {% endhint %} Now the main idea of your kanban should be specified: what should be done when you drag a card from one column to another. This can be made by selecting a field, which values will be represented by future columns. Card in columns will be shown matching this value, and when card is dragged to another column, the value will be automatically updated. * Let's select "**Status**" in the "Group By" picklist and click "Next" button. The next step of wizard will be shown. * An "Available Values" section (left side) contains a list of values (that are available for the field selected above). Select necessary and then click "►" button to add selected. Let's select all values. * An "Add Columns For" (right side) section will contain list of values that will be represented by future columns: * Then re-arrange future columns in desired order (first value in the list will be leftmost column, last value - rightmost one). Set order to "New, Working, Escalated, Closed": Congratulations! Columns are now configured. Your kanban will have 4 columns with column names equal to selected values. These columns will have equal widths. ### Add Dragging By default an "Allow users to move cards between columns" toggelr is turned on. This means system will automatically configure the following things: * Allow dragging cards between columns * Create an action that will triggered on drag and will update "Status" field of record represented by dragged card * "Status" field of that record will be updated to value that is represented by target column So, just leave this toggler on: ### Specify what Fields do You want to See in a Card Now click "Next" button to go to step of wizard where you can specify what should be displayed on the card. * The fields selector is shown there. * Left side of this selector contains a list of source object fields named "**Available Fields**". * Right side will contain list of fields (named "**Card Fields**") that will be shown on the card. * Select the following fields from "**Available Fields**" and add them to the "**Card Fields**" list in this order: 1. Case Number 2. Subject 3. Account ID -> Account Name 4. Created Date 5. Case type {% hint style="info" %} You must add at least one field, but no more than 12. If you want more fields to be shown at the card, you can add them in card builder later. {% endhint %} * If you want to see card with labels (in "Field name | Field value" format, e.g. "**`Case Type`**` ``Mechanical`"), leave "Display field labels on Kanban cards" toggler on. Turn it off to show only record properties (field values) on the card. * Click "Next" button. At the following wizard step you have the ability to ask AI for some card coloring. Of course, this is not mandatory. * If you interested, click "Generate Color Coding Ideas" button: * After a small time AI will suggest several (usually 3) options: * Offered ideas can touch card background, left border or some field text color: * You can select none, one, several or even all coloring ideas and Card/Card element(s) will take proper formulas in proper CSS rules. * You can not select more than one idea for the same card/card element. E.g., if AI suggests 2 ideas for a card background, system will allow you to select only one of them. * If you are not satisfied with suggested ideas, you can click "Generate Color Coding Ideas Again" button to give AI one more chance. {% hint style="warning" %} Please note that AI is not ideal and can generate (very rarely) incorrect formulas, so, if newly created kanban shows something incorrect, just temporary remove generated formulas from card CSS. We're working on prompts improvement, but sometimes AI makes us surprised. {% endhint %} * Select ideas (if you want) and click "Next" button. Congratulations! Card compact layout is now configured. ### Save Your New Kanban * At the last step of Creation Wizard you can review kanban main properties and still go back to change something: * If everything is correct, click "**Finish**" button. If you want just to see results, turn "Launch Advanced Kanban Builder After Wizard Completion" toggler off. If you leave it on (default), you will go to Kanban Builder where your new kanban will be opened: {% hint style="success" %} If you open Kanbans page now and click on a newly created kanban, you will see what you have created. This kanban will show cards in columns they corresponding to. {% endhint %} ### Look at Your New Kanban * If you have made any changes (e.g., edited a kanban description), do not forget to click "**Save**" button on the Kanban Builder: * Click "**Close**" button to go out from kanban Builder. Now go to **Kanbans** tab, find your kanban and click it's name to open it. Try to drag a card:
Congratulations! You have created your first working Kanban, that really can be used to manage Cases. Of course, this Kanban is quite simple, and some of things can be done better (but in some more complex way). We recommend you to study this documentation, especially ["howtos" and "best practices".](/standard-kanban/howtos-and-best-practices) Thank you! # Why Kanban in Salesforce? ### What Is a Kanban? A **Kanban** is a visual project management tool that organizes work into columns representing stages of a process. Each piece of work — whether a deal, a task, a support ticket, or any other record — appears as a card on the board. As work progresses, cards move from one column to the next, giving everyone on the team an immediate, at-a-glance understanding of where things stand. The concept originates from lean manufacturing and has since become a cornerstone of modern workflows across sales, service, operations, and beyond. At its core, Kanban answers three simple questions: * **What needs to be done?** * **What is currently in progress?** * **What has been completed?** Rather than digging through lists, reports, or spreadsheets, teams can see the full picture in a single view — and act on it directly. ### Salesforce Is More Than a CRM While it began with CRM use cases, today it is widely used as an application platform for building and customizing business-critical solutions. Organizations extend standard objects with custom fields, create entirely new custom objects, and assemble company-specific apps that support core operational processes. As a result, the data stored in Salesforce often goes far beyond contacts and opportunities. Depending on the business, it may include manufacturing orders, loan applications, inspection reports, project milestones, onboarding tasks, service workflows, or other domain-specific records. That data still often appears in structured, record-based interfaces such as list views and record pages. Those interfaces are effective for data entry and lookup, but as processes become more operational and multi-step, teams can lose visibility into status, bottlenecks, and next actions. This is where **Kanban becomes especially valuable**. By turning Salesforce records from either standard or custom objects into a visual board, **teams get a clearer, more actionable view of work in progress**. ### What Kanban Solves in Salesforce #### Visualize Any Business Process, Not Just Sales Whether your team manages deals, service requests, loan approvals, job orders, or any other custom workflow, a Kanban board can represent it visually. Any object with a stage or status field is a candidate — standard or custom. #### Prioritize and Triage Work at a Glance Instead of reading rows in a list view, teams see cards in columns. Bottlenecks are obvious. What needs attention today is immediately visible. No report needed. #### Take Action Directly on the Board Moving a card from one column to the next updates the underlying Salesforce record in real time. Teams act on the board rather than just reading it — which means fewer clicks, less context switching, and faster execution. #### Improve Team Coordination When everyone works off the same board, miscommunication drops. Team leads can reassign work by dragging and dropping cards. Everyone knows what is blocked, what is moving, and what needs a decision. #### Bring Clarity to Custom and Industry-Specific Apps Custom Salesforce apps built for specific industries or company workflows often have data models that don't map neatly to standard list views. Kanban cuts through that complexity, giving users a clear visual interface that reflects how their actual work flows — not just how the data is structured. ### Where Kanban Adds the Most Value in Salesforce Any object with a picklist field representing progression — standard or custom — is a candidate for a Kanban board. The table below shows just a sample of the scenarios where Kanban provides immediate value. | Use Case | Object | Kanban Columns | | --------------------------------- | ------------- | ------------------ | | Pipeline management | Opportunity | Sales Stage | | Case management | Case | Status | | Lead qualification | Lead | Lead Status | | Project tracking | Custom Object | Phase / Milestone | | Onboarding workflows | Custom Object | Step / Stage | | Loan or application processing | Custom Object | Application Status | | Field service work orders | Work Order | Work Order Status | | Manufacturing or production steps | Custom Object | Production Stage | | Inspection or audit tracking | Custom Object | Review Status | *** ### What About Salesforce Kanban View? Salesforce does include a built-in **Salesforce Kanban View** — a basic card-based interface available on standard list views. While it offers a simple visual overview, it comes with significant limitations that make it impractical for teams with more demanding or complex workflows: * Cards can display a maximum of 4 fields * Only up to 200 records can be shown at a time * Columns are locked to a one-to-one mapping with individual picklist values, with no support for merging values, using other field types, or defining columns using conditional logic — see [Rigid Column Logic](https://claude.ai/chat/a15cae4f-0f4c-437a-8ab4-dd153a21f1ca#rigid-column-logic) below * Filtering options are basic, with no support for complex or dynamic criteria * Automation triggered by card movements is limited to backend operations only — invisible to the user and disconnected from their interaction with the board — see [Workflow Automation and Interactivity](https://claude.ai/chat/a15cae4f-0f4c-437a-8ab4-dd153a21f1ca#workflow-automation-and-interactivity) below * Customization of card appearance and layout is not possible For teams running straightforward processes on standard objects, Salesforce Kanban View may be sufficient. But for organizations that have extended Salesforce into a full business platform — with custom objects, complex workflows, and higher data volumes — these constraints quickly become a bottleneck. That is the gap **Flexi Kanban** is built to fill. To learn more about how Flexi Kanban addresses these limitations, continue to [What is Flexi Kanban?](https://claude.ai/chat/02-what-is-flexi-kanban.md). *** ### Rigid Column Logic The column constraint in Salesforce Kanban View deserves a closer look, because its impact goes beyond what a brief bullet point can convey. Salesforce Kanban View columns are locked to a one-to-one mapping with individual picklist values — one value, one column, no exceptions. In practice, this creates three distinct problems. **You cannot consolidate multiple picklist values into a single column.** If you want a unified "Closed" column on an Opportunity board, you cannot have one. Closed Won and Closed Lost will always appear as separate columns, whether or not that distinction is useful for how your team works. **Columns can only be driven by a single picklist field.** No other field type can serve as the basis for grouping. If the field that best represents your workflow's progression is a formula field, a checkbox, a date, or any field other than a picklist, it cannot be used. **There is no way to define a column using conditional logic.** Consider an "Attention Needed" column — one that surfaces any opportunity missing key fields, past a certain close date, or flagged by any combination of business criteria. That kind of column, which reflects how teams actually think about prioritization, is simply not possible in Salesforce Kanban View. Flexi Kanban removes all three constraints. Columns can group any combination of picklist values, draw on different field types, and be defined using formula-based conditions — giving teams the flexibility to build boards that reflect their actual workflows rather than the shape of their data. *** ### Workflow Automation and Interactivity Salesforce Kanban View does support a narrow form of automation: when a user moves a card to a new column, the underlying picklist field updates, and admins can build record-triggered flows on top of that — creating records, sending emails, or performing other backend actions. However, everything that follows happens invisibly. The user who moved the card sees nothing. There is no visual response, no confirmation, no connection between what they did on the board and what the automation did behind the scenes. Flexi Kanban expands this in two directions. **Handlers** make individual cards and card elements interactive. Admins can configure what happens when a user clicks on a card or on any specific element within it — such as a field, a button, or a label. Actions can include opening a modal, navigating to another page, or applying an on-the-fly filter to the board. That last capability — where clicking an element like an account name instantly filters the entire board to show only cards sharing that value — is what makes drill-down workflows possible directly within a session, without leaving the board or running a separate query. **Kanban Workflow** gives admins control over how cards are allowed to move between columns. This includes defining which column transitions are permitted, requiring a user action or confirmation before a move is completed, triggering backend automation on move, and restricting which users are allowed to make which transitions. Both capabilities are covered in detail in the [Features](https://claude.ai/features/) section. # What is Flexi Kanban? ### The Problem with Salesforce Kanban View As covered in [Why Kanban in Salesforce?](/why-kanban-in-salesforce), Salesforce's built-in **Salesforce Kanban View** works for simple scenarios but breaks down quickly when teams need more — more fields on cards, more records visible at once, more flexibility in how columns and workflows are configured. {% hint style="info" %} Organizations that have extended Salesforce into a full business platform, with custom objects and industry-specific apps, need a Kanban solution that keeps pace with that complexity. {% endhint %} ### Introducing Flexi Kanban {% hint style="success" %} **Flexi Kanban** is a Salesforce-native Kanban solution built to go far beyond what Salesforce Kanban View offers — without ever leaving your Salesforce org. {% endhint %} There are no external tools to connect, no data leaving Salesforce, and no complex integrations to maintain. Flexi Kanban works directly with your existing Salesforce data: your objects, your fields, your relationships, and all the logic your org already has in place. ### How Flexi Kanban Is Different Where Salesforce Kanban View is rigid and limited, Flexi Kanban is designed to be flexible and powerful. Here is how it addresses each of the native view's key limitations: | Salesforce Kanban View | Flexi Kanban | | ----------------------------------------------- | --------------------------------------------------------------------------------- | | Maximum 4 fields per card | Display as many fields as needed, with full control over card layout | | Maximum 200 records visible | Handles large data volumes with pagination and infinite scrolling | | Static columns tied to standard picklist fields | Fully configurable columns, including headers, footers, and data loading settings | | Basic filtering only | Advanced filtering with complex, multi-criteria conditions | | No workflow automation | Automation triggered by card movements — actions, notifications, record updates | | No card styling or color coding | Dynamic color coding based on configurable formula conditions | | Single object per board | Mix records from different Salesforce objects on the same board | ### Key Capabilities #### Rich, Configurable Kanban Cards Every card on a Flexi Kanban board is fully configurable. You choose which fields appear, how they are laid out, and how the card looks for each column. Cards can be dynamically color-coded based on conditions you define — making it easy to spot at a glance which records need attention. #### Advanced Filtering and Sorting Flexi Kanban supports complex, multi-criteria filters so teams can focus on exactly the subset of data they need. Filters can be set at the board level, the column level, or dynamically by the user. Card elements can also be configured as interactive — clicking an element applies a filter to the board's columns using the value that element displays as a parameter, enabling drill-down navigation directly from the card without any additional UI. #### Column-Level Configuration Each column on a Flexi Kanban board is independently configurable. You can control how data loads into it, what is displayed in its header and footer, and how totals or statistics are shown — per column, not just per board. #### Workflow Automation on Card Movement and Card Element Clicks Flexi Kanban can trigger automated actions from two sources: moving a card from one column to another, and clicking a configured element on a card. Both support the same range of actions — updating related records, sending notifications, firing Salesforce flows, or opening forms. Card elements can each be configured independently, so different elements on the same card can trigger different actions. This turns the board from a passive visualization into an active part of your workflow. #### Multiple Salesforce Objects on One Board A single Flexi Kanban board can display records from different Salesforce objects simultaneously. This makes it possible to represent mixed or cross-functional workflows without needing separate boards for each object. #### Salesforce-Native and Secure Because Flexi Kanban runs entirely within your Salesforce org, it respects all existing security settings, sharing rules, and field-level permissions. No data ever leaves Salesforce. *** ### Three Board Types for Every Need Flexi Kanban supports three board types — **Standard**, **Child**, and **Composite** — each designed for a different deployment scenario. Together they cover the full spectrum of how teams need to visualize and act on their work in Salesforce. To understand which board type is right for your use case, continue to [Understanding Flexi Kanban Board Types](https://claude.ai/chat/03-understanding-board-types.md). # Understanding Flexi Kanban Types Flexi Kanban supports three board types: **Standard**, **Child**, and **Composite**. Choosing the right one depends on where the board will live and how it relates to your data — not on how complex your workflow is. All three types are equally powerful and share the same underlying capabilities. *** ### Standard Board #### What It Is A **Standard Board** is the most common Flexi Kanban board type. It presents records as cards organized into columns, giving your team an immediate visual overview of where work stands across your entire org — or any filtered subset of it. A Standard Board lives as a **standalone page** in your Salesforce app. It is org-wide by default, meaning it can display records from across the organization, scoped only by whatever filters you configure. A single Standard Board can surface records from **multiple Salesforce objects simultaneously** — making it flexible enough to represent mixed or cross-functional workflows in one place. #### How It Works You configure a Standard Board by selecting: * **The Salesforce object(s)** whose records should appear on the board (e.g., Opportunity, Case, Lead, or any custom object — including a mix of object types) * **The columns** — each column is independently configurable, including its header, footer, data loading settings, and the criteria that determine which records it displays * **The fields to display** on each card, along with card layout and optional dynamic color coding based on conditions you define * **Filters** to control which records appear on the board, supporting complex, multi-criteria conditions Once configured, users see a live board. Moving a card from one column to another immediately updates the underlying Salesforce record — and can trigger automated actions such as field updates, notifications, or Salesforce flows. #### When to Use a Standard Board A Standard Board is the right choice when: * You want a **standalone, org-wide view** of a workflow or process * Your team needs a fast, actionable overview they can work from directly **Common examples:** * Sales pipeline (Opportunities by Stage) * Support queue (Cases by Status) * Lead nurturing board (Leads by Lead Status) * Project tracker (Custom Object by Phase) * Staffing triage board (Job Openings and Candidates as separate columns on one board) * Real estate listings board (Properties and Deals as separate columns on one board) {% hint style="info" %} **Note:** Boards that display records from multiple objects — like the staffing and real estate examples above — are still a single Standard Board. This is a native capability of any Flexi Kanban board, not a reason to use a Composite Board. A Composite Board is for placing multiple independent boards side by side on one screen — not for mixing object types. {% endhint %} *** ### Child Board #### What It Is A **Child Board** is technically the same board type as a Standard Board — it uses the same engine, the same configuration options, and works in exactly the same way. The difference is purely in **where it is placed** and **how its filters are set up**. A Child Board is embedded directly on a **Salesforce record page** as a Lightning component. Its filters are pre-configured to automatically show only the records related to the parent record it is placed on. When a user opens that parent record, the board loads instantly and displays only the relevant child records — no manual filtering required. This makes it ideal for managing work within the context of a single record, without navigating away from it. #### How It Works A Child Board is placed on a parent record page using Salesforce's Lightning App Builder. During configuration, you set hidden filters that scope the board to records related to that specific parent — using the relationship field that connects them. When a user opens the parent record, the board reads the current record's ID, applies the pre-configured filters automatically, and displays only the related child records grouped by their stage or status. Everything else — card layout, column configuration, automation, color coding — works identically to a Standard Board. #### When to Use a Child Board A Child Board is the right choice when: * You want to manage related records **in the context of a specific parent record** * Your team works record-by-record and needs all related work visible without navigating away * Different parent records have different sets of child records that need independent tracking **Common examples:** * **Account → Opportunities**: All open deals for a specific account, visible directly on the Account record page * **Opportunity → Tasks**: All follow-up tasks for a deal, managed without leaving the Opportunity * **Project → Milestones**: All milestones for a project, tracked directly on the Project record * **Case → Child Cases**: All sub-cases linked to a parent case, visible in context * **Contact → Activities**: All pending activities for a contact, triaged without leaving the Contact record #### Standard Board vs. Child Board at a Glance | | Standard Board | Child Board | | --------------------- | -------------------------------------- | ------------------------------------------------------- | | Underlying board type | Same | Same | | Where it lives | Standalone page in a Salesforce app | Embedded on a parent record page | | Scope | Org-wide, controlled by manual filters | Automatically scoped to the parent record | | Filter setup | Configured by the user or admin | Pre-configured hidden filters tied to the parent record | | Best for | Org-wide process and pipeline views | Contextual, record-level work management | | Multi-object support | Yes | Yes | *** ### Composite Board #### What It Is A **Composite Board** is a workspace that **combines multiple independent Standard Boards into a single screen**. Think of it as a mashup — instead of one board with one purpose, you assemble several standalone Flexi Kanban boards and place them together side by side.
Each board within a Composite Board remains fully independent: it has its own object configuration, its own columns, its own filters, and its own set of records. But placing them together gives teams a broader, unified view of work that spans different processes or domains at once. What makes Composite Boards especially powerful is the ability to **set up communication between the individual boards** — so that selecting or acting on a record in one board can filter or trigger a reaction in another. This turns a simple side-by-side layout into a coordinated, multi-board workspace. {% hint style="info" %} **Note:** Composite Boards are an advanced capability designed for specific use cases. Most teams will find that Standard and Child Boards cover the vast majority of their needs. Composite Boards are less commonly used and typically require more deliberate planning to configure well. {% endhint %} #### When to Use a Composite Board A Composite Board becomes relevant when: * You need to **monitor multiple independent workflows simultaneously**, side by side, in one place * Different teams or processes each have their own board, but you want a single consolidated view * You want boards that are **aware of each other** — where an action on one board influences another * A single Standard Board is not enough to represent the full breadth of what a role or team needs to see at once **Example:** A sales operations manager might assemble a pipeline board (Opportunities by Stage), a support board (Cases by Priority), and a renewals board (Contracts by Renewal Status) into a single Composite Board — giving a full picture of the business without switching between separate apps or views. *** ### Choosing the Right Board Type ``` Do you need a standalone board for an org-wide process or workflow? └─ YES → Standard Board Do you need a board embedded on a parent record page, showing only that record's related work? └─ YES → Child Board Do you need to place multiple independent boards together in a single workspace, with optional coordination between them? └─ YES → Composite Board ``` For most teams getting started with Flexi Kanban, a **Standard Board** is the natural first step — fast to configure and immediately useful for any process. As needs grow, a **Child Board** brings contextual, record-level visibility directly onto parent record pages. A **Composite Board** is the right choice when multiple standalone boards need to live together and, optionally, interact with each other. # Flexi Kanban Board Anatomy Before diving into configuration and features, it helps to know what you are looking at. This page walks through every visual element of a Flexi Kanban board — what it is, where it lives, and what it does. All elements described here are shared across Standard, Child, and Composite board types.
*** ### Kanban Header The Kanban Header runs across the top of the board and serves as the primary control bar. It gives users access to board-level actions, navigation, and optionally displays Quick Filters and Statistics directly inline. The header contains the following elements: #### View Selector A dropdown that lets users switch between saved Views — pre-configured filter combinations that scope the board to a specific subset of records. Selecting a View instantly reloads the board with that View's filters applied. Learn more in [Views](https://docs.flexikanban.ai/standard-kanban/using-kanban/how-to-work-with-filters-and-orders#manage-filters-and-orders). #### Open / Hide Filter Side Panel Button A toggle button that opens or closes the Filter Side Panel on the right side of the board. Use it to access advanced filtering options without leaving the board. Learn more in [Filter Side Panel](/standard-kanban/using-kanban/how-to-work-with-filters-and-orders). #### Refresh Button Reloads the board data from Salesforce without requiring a full page refresh. Useful for teams working in real time who need to pull in the latest record updates. #### Standard Actions Menu A dropdown menu that provides access to board-level administrative and utility actions: * **Edit Kanban** — opens Kanban Studio to modify the board configuration. This option is only visible to the board creator or users who have been granted edit access permissions by an admin * **Enable / Disable Fullscreen Mode** — expands the board to fill the entire screen, hiding Salesforce navigation chrome * **Show Debug Console** — opens a diagnostic panel for troubleshooting board configuration and data loading issues #### Custom Buttons Admins can configure additional buttons in the header to perform specific actions — for example, opening a form, navigating to a different Flexi Kanban board or Lightning Page, or executing a background action. Custom Buttons are optional and will only appear if configured. Learn more in [Custom Buttons](/standard-kanban/configure-kanban/how-to-add-kanban-buttons-and-menus). #### Swimlane Selector Appears in the header only when at least one Swimlane has been configured for the board. Lets users switch between available Swimlane groupings to reorganize how cards are displayed horizontally across the board. Learn more in **Swimlanes**. #### Quick Filters An optional set of predefined filter shortcuts configured by the board admin. When enabled, Quick Filters appear inline in the Kanban Header and let users instantly narrow the board to a specific subset of records with a single click — without opening the Filter Side Panel. Quick Filters can alternatively be positioned in the **Sub-Header** — a dedicated row that renders directly below the Kanban Header. This is configured via the **Position** property in Kanban Studio. Learn more in Quick Filters. #### Statistics An optional set of metrics and aggregate values configured by the board admin. When enabled, Statistics appear in the Kanban Header between the View Selector and other header elements, giving users an at-a-glance summary of board-level data. Statistics can alternatively be positioned in the **Sub-Header** — a dedicated row that renders directly below the Kanban Header. This is configured via the **Position** property in Kanban Studio. Learn more in [Statistics](/standard-kanban/configure-kanban/how-to-add-kanban-statistics). *** ### Sub-Header The Sub-Header is a structural zone that renders as a dedicated row directly below the Kanban Header. It serves as an alternative position for **Quick Filters** and **Statistics** — independent board components that can each be placed either inside the Kanban Header or in the Sub-Header, controlled via the **Position** property in Kanban Studio. The Sub-Header appears automatically when at least one component is configured to use it, and is hidden when neither component is positioned there. Use it to keep the Kanban Header lean, or when Quick Filters or Statistics warrant more visual space and prominence. Learn more in Sub-Header. *** ### Kanban Column Columns are the vertical sections of the board. Each column represents a stage or status value drawn from one or more grouping fields configured on the board. Unlike Salesforce Kanban View, which ties columns rigidly to a single standard picklist field, Flexi Kanban gives admins full control over column definition — including the ability to use multiple fields to drive column structure when a single field is not sufficient to represent the workflow. Cards sit inside columns and move between them as work progresses. Each column is made up of the following parts: #### Column Header Group An optional visual element that groups two or more adjacent columns under a shared parent label. Useful for organizing related stages into logical clusters — for example, grouping `Prospecting` and `Qualification` under an `Early Stage` parent header. Learn more in [Column Header Group](/standard-kanban/configure-column/how-to-set-column-groups). #### Column Header Displayed at the top of each column. The content of the column header is fully configurable by the admin — it can include the column name, record count, aggregate values, custom labels, or other elements. Learn more in [Column Header](/standard-kanban/configure-column/how-to-configure-column-header). #### Column Body The main area of the column where Kanban Cards are displayed. Cards stack vertically within the column body and can be dragged to other columns to update the underlying Salesforce record. Learn more in [Column Body](/standard-kanban/configure-column/how-to-configure-column-body). #### Column Footer Displayed at the bottom of each column. Like the Column Header, its content is fully configurable and can include totals, aggregate values, or other summary information. Learn more in [Column Footer](/standard-kanban/configure-column/how-to-configure-column-footer). *** ### Kanban Card A Kanban Card represents a single Salesforce record on the board. Each card displays a set of configured fields and elements that give users the information they need at a glance — without opening the full record. #### Kanban Card Elements Each card is made up of one or more **Card Elements** — individual building blocks that display specific information. A Card Element can be: * **Text** — displays a field value or label * **Icon** — displays a visual indicator * **Menu** — displays a dropdown of available actions Each Card Element is individually configurable. Admins control what it displays — a static text value, a merge field pulled from the record, or a formula expression for more dynamic output. Each element also has its own design attributes — including color, font size, and other styling properties — making it possible to turn any element into a color-coded visual indicator that changes appearance based on record data or conditions. Any Card Element can also be made interactive by attaching a **Handler** — a configured interaction that defines what happens when the user clicks that element (e.g., opening a form, navigating to a record, or executing a background action). Learn more in **Kanban Card** and **Handlers**. *** ### Card Group Within a column, cards can be further organized into **Card Groups** — collapsible sections that group cards sharing a common field value. For example, within a `Prospecting` column, Opportunities can be grouped by `Account Name` — so all deals for the same account are visually clustered together and can be expanded or collapsed as needed. Learn more in [Card Groups](/standard-kanban/groups-of-cards/how-to-configure-card-grouping). *** ### Swimlane A Swimlane is a horizontal band that spans across all columns of the board, grouping cards by a configurable condition. Where columns represent progression (what stage is this record in?), Swimlanes add a second dimension of organization (which group does this record belong to?). For example, a sales pipeline board might use Swimlanes to separate Opportunities by owner or by region — so each rep or territory has its own horizontal band, and stages remain visible as columns across all bands. Swimlanes are optional and only appear when configured. If multiple Swimlanes are set up, users can switch between them using the [Swimlane Selector](https://claude.ai/chat/3ff2e1a4-8052-48a2-8c2f-8ff0fe64eda1#swimlane-selector) in the Kanban Header. Learn more in [Swimlanes](https://claude.ai/chat/3ff2e1a4-8052-48a2-8c2f-8ff0fe64eda1#). *** ### Detail Panel The Detail Panel is a side panel that opens when a user clicks on a Kanban Card. It displays the full details of the selected record without navigating away from the board, allowing users to review and edit record information in context. The content and layout of the Detail Panel is defined by the **Card Layout** configuration in Kanban Studio. Card Layout controls which fields and sections are displayed, how they are arranged, and whether the panel uses vertical tabs to organize content into multiple views. Learn more in [Detail Panel](https://claude.ai/chat/3ff2e1a4-8052-48a2-8c2f-8ff0fe64eda1#) and [Card Layout](https://claude.ai/chat/3ff2e1a4-8052-48a2-8c2f-8ff0fe64eda1#). *** ### Filter Side Panel The Filter Side Panel slides in from the right side of the board when the user clicks the [Open / Hide Filter Side Panel Button](https://claude.ai/chat/3ff2e1a4-8052-48a2-8c2f-8ff0fe64eda1#open--hide-filter-side-panel-button) in the Kanban Header. It provides access to advanced filtering options, allowing users to build complex, multi-criteria filters to narrow the records displayed on the board. Filters applied through the Filter Side Panel can be saved as a **View** for quick access in future sessions. Learn more in [Filter Side Panel](https://claude.ai/chat/3ff2e1a4-8052-48a2-8c2f-8ff0fe64eda1#) and [Views](https://claude.ai/chat/3ff2e1a4-8052-48a2-8c2f-8ff0fe64eda1#). # Key Components Flexi Kanban is built around a set of dedicated tools and components that work together to give admins full control over board configuration, user interactions, dynamic forms, and backend automation. Understanding what each component does and how they relate to each other is essential before diving into configuration. {% hint style="success" %} Together, these components make it possible to build Kanban boards that are not just visual tools, but active, automated parts of your team's Salesforce workflow. {% endhint %} *** ### Configuration Tools These are the tools admins use to build and configure Flexi Kanban boards and forms. **Kanban Wizard** — A guided setup flow that creates a working Flexi Kanban board from a minimal set of inputs. The fastest way to get a board up and running, and the natural starting point before deeper configuration in Kanban Studio. **Kanban Studio** — The dedicated configuration environment for Flexi Kanban boards. Kanban Studio gives admins full control over every aspect of a board — column structure, card layout and styling, dynamic color coding, workflow automation, user interaction behavior, and more. This is where the majority of board configuration work happens. **Form Studio** — The dedicated tool for building dynamic interactive forms that can be surfaced directly on the Kanban board. Forms built in Form Studio can respond to user input, apply conditional logic, interact with Salesforce data, and trigger backend operations — making them a powerful extension of any board's workflow. **Actions and Action Groups** — Reusable backend operations that execute in Salesforce in response to events on the board. A single Action performs a specific task — updating a record, sending a notification, calling a Flow. An Action Group chains multiple Actions into a sequence, sharing the same runtime context. Actions can be triggered by user interactions, card movements, form submissions, schedules, or external API calls. *** ### How These Components Work Together The building process follows a natural progression, with each tool playing a distinct role as a board grows in sophistication. **Step 1 — Kanban Wizard** gets you a working board in minutes. You provide a handful of inputs — the Salesforce object, the grouping field, and a basic set of fields to display — and the Wizard generates a functional board skeleton. Think of it as scaffolding: it gives you something real to look at and work from immediately, without requiring any deep configuration knowledge upfront. **Step 2 — Kanban Studio** is where the board gains its character and logic. Once the skeleton exists, admins open Kanban Studio to build out everything that makes the board actually useful: the card layout and visual design, column structure and display settings, dynamic color coding, and the Handlers that define what happens when users interact with cards and buttons. Most boards are fully complete at this stage. **Step 3 — Form Studio** enters the picture when interactions need to collect structured input from users. If a card movement or button click should open a form — to capture a reason for a status change, gather additional details, or present a decision checkpoint — that form is built in Form Studio and connected back to the board through a Handler in Kanban Studio. **Step 4 — Actions and Action Groups** are added when the board or its forms need to drive backend operations: updating records, calling Salesforce Flows, sending notifications, or chaining multiple operations together in sequence. An Action is attached as the last link in the chain — triggered by a Handler on the board or by a form submission in Form Studio. {% hint style="info" %} Not every board needs all four components. A simple pipeline board might be complete after Kanban Studio. Form Studio and Actions become relevant only when the workflow demands them — and both can be added at any point, as requirements grow. {% endhint %} # Kanban Wizard ### What It Is The **Kanban Wizard** is the fastest way to get a working Flexi Kanban board up and running. It walks admins through a short, guided setup flow that collects the essential configuration needed to create a functional board — no deep product knowledge required. Think of it as a bootstrap tool. The Wizard handles the foundational decisions — which object to display, which field to group by, which columns to include, which fields to show on cards — and produces a ready-to-use board in minutes. From there, admins can leave the board as-is or open it in **Kanban Studio** for deeper customization. *** ### How to Open the Wizard To launch the Kanban Creation Wizard: 1. Open the **App Launcher** in Salesforce. 2. Search for **Flexi Kanban** and select the app. 3. Open the **Kanbans** tab. 4. Click **New**. This opens the Kanban Creation Wizard. *** ### What the Wizard Does The Kanban Creation Wizard guides you through seven steps to create a working board: 1. **Board type** — choose the type of board to create (Standard Board is the most common starting point) 2. **Board identity** — give the board a name, optional description, and color theme 3. **Data and grouping** — select the Salesforce object whose records will appear on the board, the field used to group records into columns, and optional column-level summarization fields (such as Amount totals per stage) 4. **Columns** — choose which field values become columns on the board (for example, which Opportunity stages to include) 5. **Card fields** — select the fields to display on each Kanban Card 6. **Color coding** *(optional)* — apply AI-assisted color-coding rules to help users visually identify important records at a glance; the integrated assistant suggests an initial set of rules that can be reviewed and adjusted later in Kanban Studio 7. **Finalize** — review your configuration and generate the board Once completed, the Wizard generates a fully functional Flexi Kanban board with sensible defaults applied. The board is immediately usable by your team. {% hint style="info" %} **Note:** The Finalize step includes a **Launch Advanced Kanban Builder** option. This opens the board directly in Kanban Studio after creation. If you want to view the board first before making further changes, uncheck this option before clicking Finish. The tool referred to as "Kanban Builder" in the app is **Kanban Studio** — the name is being updated in a future release. {% endhint %} *** ### When to Use the Kanban Creation Wizard The Kanban Creation Wizard is the right starting point when: * You are creating a Flexi Kanban board for the first time * You need a working board quickly, without configuring every detail upfront * You want a solid baseline to refine further in Kanban Studio {% hint style="warning" %} It is not a replacement for Kanban Studio — it is the entry point before it. For boards that require custom column configuration, dynamic card styling, workflow automation, or any of Flexi Kanban's advanced capabilities, Kanban Studio is where that work happens. {% endhint %} *** ### What Comes Next After the Wizard creates your board, you have two paths: * **Use it as-is** — the board is immediately functional and ready for your team * **Open in Kanban Studio** — continue configuring the board with the full range of Flexi Kanban's capabilities For a step-by-step walkthrough of the Wizard using a real Opportunity board as an example, see [Build Your First Board in 5 Minutes](/get-started/build-your-first-board-in-5-minutes). To learn what you can do after the Wizard, see [Kanban Studio](broken://pages/FmqDJGurbkprN6L8UoYx). # Kanban Studio ### What It Is **Kanban Studio** is the dedicated configuration environment for Flexi Kanban boards. It gives admins full control over every aspect of a board — from how columns are structured and what cards display, to workflow automation, dynamic styling, and user interaction behavior. Where the Kanban Wizard gets you to a working board quickly, Kanban Studio is where you shape that board into something precisely tailored to your team's workflow and data. *** ### What You Can Configure in Kanban Studio Kanban Studio covers configuration at every level of the board: #### Board-Level Configuration * Board type (Standard or Child) and source object(s) * Grouping field(s) that define the column structure * Global filters and data loading settings * Views (saved filter combinations available to users) * Quick Filters and Statistics — and whether they appear in the Kanban Header or Highlights Panel * Custom Buttons in the Kanban Header * Swimlanes #### Column Configuration Each column is independently configurable: * Which values map to this column * Column Header and Footer content — including record counts, aggregate totals, and custom labels * Column-level data loading settings #### Card Configuration * Which fields and elements appear on each Kanban Card * Layout and arrangement of Card Elements * Dynamic color coding and styling based on formula conditions * **Handlers** — the interactions that fire when a user clicks a Card Element or Custom Button A Handler defines what happens when a user interacts with a UI element on the board. Flexi Kanban supports multiple Handler types, including opening a Form, navigating to a record or page, showing an email composer or dial pad, firing an event, or executing an Action or Action Group. Learn more in [Handlers](https://claude.ai/chat/3ff2e1a4-8052-48a2-8c2f-8ff0fe64eda1#). #### Card Layout (Detail Panel) Card Layout controls what is displayed in the **Detail Panel** — the side panel that opens when a user clicks on a Kanban Card to view its full details. Admins configure which fields and sections appear in the Detail Panel, how they are arranged, and whether the panel uses vertical tabs to organize content into multiple views. #### Automation * Actions and Action Groups triggered by card movement between columns * Conditions that control when automation fires *** ### Compact Card Layout Builder The **Compact Card Layout Builder** is a specialized mode within Kanban Studio focused specifically on designing the visual layout of Kanban Cards. It provides a dedicated workspace for configuring Card Elements — what each element displays, how it is styled, and what interaction it triggers. In an upcoming release, the Compact Card Layout Builder will also be accessible directly from the Kanban board via a context menu, available to users who are creators or editors of that board. Learn more in [Compact Card Layout Builder](https://claude.ai/chat/3ff2e1a4-8052-48a2-8c2f-8ff0fe64eda1#). *** ### Who Can Access Kanban Studio Kanban Studio is accessible to the creator of a board and any users who have been granted edit access permissions by an admin. This is the same permission that controls visibility of the **Edit Kanban** option in the Standard Actions Menu on the board. Learn more in [Permissions](https://claude.ai/chat/3ff2e1a4-8052-48a2-8c2f-8ff0fe64eda1#). *** ### When to Use Kanban Studio Use Kanban Studio when: * You want to go beyond the baseline configuration created by the Kanban Wizard * You need to configure column headers and footers, card styling, or dynamic color coding * You are setting up workflow automation triggered by card movements * You want to add Custom Buttons, Quick Filters, Statistics, or Swimlanes to a board * You are configuring Handlers to make card elements and buttons interactive Learn more in [Configuring a Board in Kanban Studio](https://claude.ai/chat/3ff2e1a4-8052-48a2-8c2f-8ff0fe64eda1#). # Form Studio ### What It Is **Form Studio** is the dedicated tool for building dynamic interactive forms in Flexi Kanban. Forms created in Form Studio can be surfaced directly on the Kanban board — opened by a Handler when a user clicks a card element or button — giving teams a way to capture input, update records, and trigger backend operations without ever leaving the board. Forms in Flexi Kanban are not simple data entry screens. They are fully dynamic interfaces that can respond to user input, apply conditional logic, interact with Salesforce data, and trigger Actions — making them a powerful extension of your board's workflow. *** ### What You Can Build with Form Studio Form Studio gives admins full control over form structure, behavior, and logic: #### Form Layout and Fields * Add fields from any Salesforce source object * Arrange fields into sections and layouts * Configure field labels, defaults, validation, and visibility conditions #### Dynamic Behavior * **Conditions** — show or hide fields, sections, or entire form elements based on user input or record data * **Conditional Styles** — change the appearance of form elements dynamically based on configured rules * **Variables** — define reusable values that can be referenced across the form * **Additional Fields** — virtual fields that exist only within the form context, not mapped to a Salesforce field #### Form Actions and Events Forms in Flexi Kanban support **Handlers** — the same interaction model used on the Kanban board. A Handler on a form element can execute an Action or Action Group, fire an event back to the board, or trigger other configured behavior. This allows forms to interact with the board they are opened from — for example, refreshing a column, updating a card, or moving a record to a new stage after the form is submitted. #### Sharing and Permissions * Configure which users or profiles can access a given form * Form Sharing Rules control visibility independently from board-level permissions *** ### How Forms Connect to the Board Forms are not standalone screens — they are components that get attached to board interactions through Handlers. A typical flow looks like this: 1. An admin builds a form in Form Studio 2. The form is attached to a card element or Custom Button via a Handler in Kanban Studio 3. When a user clicks that element or button on the board, the form opens 4. The user fills in the form and submits 5. The form executes its configured Actions — updating records, triggering automation, or interacting with the board This makes Form Studio one of the key tools for building interactive, workflow-driven Kanban boards that go beyond simple card movement. *** ### When to Use Form Studio Use Form Studio when: * You need users to provide input before or after a board action * You want to guide users through a structured data entry process without leaving the board * You need conditional logic that adapts the form based on what the user selects * You want form submission to trigger backend operations via Actions or Action Groups Learn more in [Building Forms in Form Studio](https://claude.ai/chat/3ff2e1a4-8052-48a2-8c2f-8ff0fe64eda1#). # Actions and Action Groups ### What They Are **Actions** and **Action Groups** are the backend operation layer of Flexi Kanban. They define the logic that runs in response to events on the board — whether triggered by a user interaction, a card movement, a form submission, a scheduled job, or an external API call. Where Handlers define *what should happen* when a user interacts with the board, Actions define *how it happens* — the actual operations that execute in Salesforce behind the scenes. *** ### Actions An **Action** is a reusable backend operation that performs a specific task in Salesforce. Actions are configured independently and can be referenced from multiple places across your Flexi Kanban setup. A single Action might: * Update one or more fields on a Salesforce record * Create or delete a record * Send a notification or email * Call a Salesforce Flow or Apex class * Interact with other Salesforce platform capabilities Because Actions are reusable, the same Action can be triggered from a card element Handler, a Custom Button, a card movement rule, a form submission, or a scheduled job — without duplicating configuration. *** ### Action Groups An **Action Group** is a sequence of Actions executed in a defined order. All Actions within a group share the same runtime context and Variables, which means data and values can be passed between them as they execute in sequence. Action Groups are useful when a single event needs to trigger a coordinated series of operations — for example, updating a record, sending a notification, and logging an activity, all as one atomic workflow triggered by a card moving to a new column. *** ### How Actions Are Triggered Actions and Action Groups can be triggered in several ways: * **By a Handler** — when a user clicks a card element, Custom Button, or form element configured with an Execute Action handler type * **By card movement** — automatically when a card is dragged from one column to another * **Manually** — invoked directly by a user from the board * **In batch** — run across a set of records at once * **On schedule** — executed automatically at a configured time or interval * **Via API** — triggered externally by another system or integration This flexibility makes Actions a central part of building automated, event-driven workflows on top of your Flexi Kanban boards. *** ### A Practical Example A sales team uses a Flexi Kanban board to manage their opportunity pipeline. When a rep moves an Opportunity card from **Proposal Sent** to **Negotiation**, an Action Group fires automatically: 1. **Action 1** — updates the Opportunity's `Stage` and `Last Stage Change Date` fields 2. **Action 2** — creates a follow-up Task assigned to the opportunity owner 3. **Action 3** — sends an internal Slack notification to the sales manager All three operations execute in sequence, triggered by the single card movement, with no manual steps required from the rep. *** ### When to Use Actions and Action Groups Use Actions when: * You need a reusable backend operation that can be triggered from multiple places * You want card movement to automatically update records or trigger Salesforce automation * You need to connect board interactions to broader Salesforce platform capabilities Use Action Groups when: * A single trigger needs to execute multiple operations in a defined sequence * You need to pass data and context between operations as they run Learn more in [Actions and Action Groups](https://claude.ai/chat/3ff2e1a4-8052-48a2-8c2f-8ff0fe64eda1#). # User's Guide to the Kanban Boards ### What is a Kanban? Kanban is a visual process management system which helps to make decisions about what and when should be done. A Kanban Board is one of the tools that can be used to implement kanban to manage work. In generic, kanban board visually displays stages of a process (or several processes) using cards to represent work items and columns to represent each stage. Cards can be moved between columns to indicate progress, update statuses and to help coordinate users performing the work.

Picture by Jeff.lasovski. Licensed under CC BY-SA 3.0.

We will call Kanban Board "Kanban" for the future - this word means a board in the Flexi Kanban application context. Ah, "Dashboard" means the same as "Kanban" :) Now, let's proceed with several steps of this guide. ### Step 1. What Kanban Consists of? {% hint style="info" %} Let's assume you have already [created a simple kanban board](/get-started/how-to-build-a-simple-kanban-using-creation-wizard-abilities) using Kanban Creation Wizard with default settings and got a Kanban for Cases as a result. {% endhint %} Kanban Board has the following main elements: * **Kanban header** (it contains kanban main control elements) * **Kanban body** (it contains columns and sidebars) * **Columns** * **Cards** By default columns consist of: * **Header** (it contains column name and records counter) * **Body** (it contains Cards) Card contains **Cells**, that represent some values of record which card correspond to. In our default example these cells contain values of Case object records: Number, Subject, Account Name, Created Date and Case type, but you can add there almost anything. Kanban header contains the following elements by default: * **Views selector** (allows to select and apply [saved filters](/standard-kanban/using-kanban/how-to-work-with-filters-and-orders#manage-filters-and-orders)) * "**Make View default**" button (allows to "pin" a current View to make it applied by default when Kanban is opened) * "**Filters**" button (shows a Filters Sidebar that allows to configure and apply filters) * "**Refresh Kanban**" button (allows to re-load kanban data) * Kanban **system menu** button (it allows to edit and debug kanban, as far as expand it to fullscreen view) Of course, Kanban can contain more elements, but they are optional and are a subject of your needs. ### Step 2. How Kanban Works in General? #### Drag: The main idea of kanban board is to place cards representing some things, into columns representing some properties of these things and have an easy visual chart of the whole situation. To change this situation and indicate these changes cards can be moved between columns. Just drag card with mouse and drop it into proper column:
Card will disappear from the one column and appear in another. {% hint style="info" %} Technically this means that Card will stop matching conditions of source column and begin matching conditions of target one. And this means that some properties of the record (which is represented by this card) will be updated. {% endhint %} #### Show: Click on Card opens a sidebar with record details. This sidebar in Flexi Kanban app is called a [Layout](/standard-kanban/configure-card/how-to-configure-card-layout): By default card Layout just displays record data. But you can display a lot of other things instead, see below. {% hint style="info" %} Default card Layout data correspond to Page Layout configured for the proper Object records in your Salesforce settings. {% endhint %} #### Filter: Click on Filters button shows **Filters Sidebar**, where you can add some filter criteria: Filters allow you to limit Kanban with cards matching your criteria. Read [this section](/standard-kanban/using-kanban/how-to-work-with-filters-and-orders) to know more. ### Step 3. How About Some More Visualization? In some situations you may need more easy way to represent your data in the Kanban. E.g.: * Case priority (importnant property) will be more quickly recognizable with the aid of color sygnals than by reading words * Case type will be more visible with icons than with letters * If case has been created earlier than a week ago, card will indicate this with light red background There are [lot of ways](/standard-kanban/howtos-and-best-practices/how-to-design-kanban-for-your-needs/how-to-colorize-cards) to do similar things: ### Step 4. How to See Some More About the Record Represented by a Card? Default card Layout displays record details, that are read-only. Sometimes this is quite enough, but you can significantly improve your kanban by modifying this. You can show there: * SObject - read-only record details (we have already seen this, yes?) * Form (Flexi Kanban offers powerful [Forms](/components/forms) that allows to do a lot of useful things) * Visualforce page (admin have created some special page in your org? Integrate it into your kanban easily) * Lightning Component. Re-use any available part of Lightning. Wanna insert Kanban into Kanban? You can (but we recommend try our mighty [Composite Dashboards](/composite-kanban/introduction)) * URL - integrate any page from yout organization (external sites are not allowed due to Salesforce security reasons) Want to have several Layouts? No problem! Let's select "Standard" Layout - this is a container for several subtabs that can be easily switched. And even shown or hidden depending on necessary conditions. Read [this article](/standard-kanban/configure-card/how-to-configure-card-layout) to know more. ### Step 5. Want to Add Some More Elements? Before this step you have seen default elements in the Kanban. Let's have a brief tour on other. You can add: * [Kanban Statistics](/standard-kanban/configure-kanban/how-to-add-kanban-statistics) - some content in the middle of Kanban header. * [Kanban Buttons](/standard-kanban/configure-kanban/how-to-add-kanban-buttons-and-menus) - extend default Kanban buttons with your own buttons and menus. * Search bar - for quick highlight of necessary text in the whole kanban. [Add it just with one click](/standard-kanban/configure-kanban/how-to-configure-kanban-basic-properties)! * [Column groups](/standard-kanban/configure-column/how-to-set-column-groups) - combine columns into groups that have own headers and settings. * [Column footers](/standard-kanban/configure-column/how-to-configure-column-footer) - for those who need more in columns. * Elements ([cells](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons#cells)) in column group headers, column headers and footers. ### Step 6. How About Improve Interactivity and Automation? All cells, buttons, menus and card components can be used not only for displaying something. One of most poweful abilities of Flexi Kanban is [Actions](/components/actions-action-groups). Actions allow you to do a lot of useful things: * Show forms and lightning components (in same browser tab, new tab or modal popup) * Display Visualforce and Web pages * Execute form actions and trigger events * Control Kanban behavior with a set of Kanban API methods * Create, update and delete records * Send emails (text, HTML and from templates) * Validate everything with properly set rules * Call Apex Classes methods * Execute Web requests * And even execute chains of actions as Action Groups Actions can be triggered by Card dragging. Our default-made Case kanban triggers "Record update" action that changes Case statuses, but you can configure your own necessities. You can set Actions as on generic card dragging, as on dragging at specific directions (we call them [Junctions](/standard-kanban/configure-card/configuring-card-movement-and-column-junctions)). For example, when you drag Case card from "New" to "Working" column, a generic "Record Update" action will change proper Case status; but if somebody moves a Card from "Working" back to "New", a form that asks for the reason of such change will pop up. And when you submit this form, an email notification about this change will be sent to responsible person... Of course, if you have configured these actions. # What are Kanbans? As a team deeply embedded in the Salesforce ecosystem, we know the pain of trying to manage a workflow from a static List View. It requires mental gymnastics to see pipeline health or identify stalled projects. The core principle of Kanban—visualizing work as it moves through stages to reveal bottlenecks and clarify progress—is the perfect antidote. Salesforce's native Kanban view was a great first step, proving that a visual, drag-and-drop board is far superior to a static list. However, users quickly discover its rigid limitations. You’re locked into using a single picklist for columns and have minimal control over card layouts or summary data. This one-size-fits-all approach forces complex business processes into an overly simple box, leaving significant potential untapped. This is precisely why we built **Flexi Kanban**. We believe a Kanban board should adapt to your business, not the other way around. We designed it to elevate the experience far beyond the basics, giving you the power to customize everything. Imagine defining columns by owner, date range, or even a formula field. Picture cards with rich text, dynamic icons, and progress bars — letting your team make decisions without ever leaving the board. With Flexi Kanban, you move from a basic view to a fully configurable command center that truly reflects your unique process. In the **Flexi Kanban** application, you can create these types of kanbans: ### Standard Standard kanban is one that consists of several columns where some records are shown in cards. By default Standard kanban operates with one Data Source (an object which records are represented with cards), but you can change it in the Kanban Builder to make it work with different objects in very complex ways. ### Child Child kanban is a standard one that has additional properties suitable for integrating it into your record pages as Lightning Component, and gets automatically applied filtering to show cards related to current record only. ### Composite Composite is a special parent kanban that has own header, filter panel and sidebar, has customizable layout with several containers in it's body, and contains several standard/child kanbans in these containers. It offers more advanced features in comparison to a standard kanban. # Getting started
How to Build a Simple Kanban Using Creation Wizard AbilitiesHow to Build a Simple Kanban Using Creation Wizard Abilities

Demo Example:

Tasks Kanban

Demo Example: Tasks Kanban

Demo Example:

Events Kanban

Demo Example: Events Kanban
Demo Example: Opportunities KanbanDemo Example: Opportunities Kanban

Demo Example:

Gantt Kanban

Demo Example: Gantt Kanban

Demo Example:

Cases Kanban

Demo Example: Cases Dashboard
# Demo Example: Tasks Kanban This Tasks kanban board helps you manage tasks and visualize their status. Here is how this kanban can look like: This kanban shows tasks in 5 columns. Similar statuses share a column. Drag the task card to change its status. To build this kanban, an admin should do the steps below: ### Create a new kanban * Go to the [Kanban creation wizard](/standard-kanban/basics/how-to-create-a-standard-kanban) and create a new standard kanban. * Give it a name and description. * Select "White" theme. * Save the kanban and go to Kanban builder. ### Create Task Form * Create new form with these properties: | Property | Value | | --------------------- | ------------------------------------------------------------------------------- | | Name | Task Form | | Data Source Object | Task | | Multi Page Form? | false | | Show navigation panel | true | | Buttons configuration | Check "Save" button for "Edit" mode only. Uncheck other. | | Header configuration |

Edit mode: Edit Task

View mode: View Task

New mode: New Task

| * Add these elements to the form:
TypeNameTitleProperties
ButtonButtonClose
  • Show on Edit page: true
  • Show on View Page: true

  • Conditional Style:

    • type = hide

    • conditions:

      • object = Task (Form Object)
      • field = Activity ID
      • operator = is not null

  • Event:

    • type = onClick
    • conditions not set
    • handler "Close" action without parameters (creation of it see in next table)
Sectionsection
  • Columns: 2
  • Show on Edit page: true
  • Show on View Page: true
  • Scrollable: false
Sectionsection 1
  • Columns: 2
  • Show on Edit page: true
  • Show on View Page: true
  • Scrollable: false
SectionattachmentsAttachments
  • Columns: 2
  • Show on Edit page: true
  • Show on View Page: true
  • Scrollable: false
**The following elements have these default properties (that can be overridden by specific properties):** * Required: false * Read Only: false * Show on Edit page: true * Show on View Page: true * Instructions: not set * Conditional Styles: not set * Events: not set * View Type (for picklists): Single list * Hide 'None' (for picklists): false * Options Groups (for picklists): not set
Section nameFieldNameTitleSpecific properties
SectionSubjectSubjectSubject
DescriptionDescriptionDescription
StatusStatusStatus

Read Only = true
Condition Style:

  • type = hide

  • conditions:

    • object = Task (Form Object)
    • field = Activity ID
    • operator = is null
Section 1Assigned To IDOwnerIdAssignee
PriorityPriorityPriority
Due Date OnlyActivityDateDue Date
Related To IDWhatIdRelated To ID
AttachmentsFile (Options)file1Source type = Conditions
Source: Title = 'file1'
Fields: [{"label":"Title","localName":"Title","type":"Text","value":"file1","visible":false,"disabled":false}]
File (Options)file2Source type = Conditions
Source: Title = 'file2'
Fields: [{"label":"Title","localName":"Title","type":"Text","value":"file2","visible":false,"disabled":false}]
File (Options)file3Source type = Conditions
Source: Title = 'file3'
Fields: [{"label":"Title","localName":"Title","type":"Text","value":"file3","visible":false,"disabled":false}]
File (Options)file4Source type = Conditions
Source: Title = 'file4'
Fields: [{"label":"Title","localName":"Title","type":"Text","value":"file4","visible":false,"disabled":false}]
* Add the following Form Action as handler on the "Close" button: | Action Name and Title | Property | Value | | --------------------- | --------------------- | --------------- | | Close | Type | **Navigate** | | | Navigate to | **Return back** | | | Browser history steps | **1** | | | Has Conditions | **false** | ### Configure the kanban Go to [Basic Configuration](/standard-kanban/basics/how-to-create-a-standard-kanban) and set [CSS Styles](/standard-kanban/tools/configuring-css-styles) to: * Header CSS Styles = background: #f7f7f7 * Title CSS Styles = color: #333 Then open [Buttons Configuration](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons) and add 2 buttons: Configure button "New Task": Configure [handler](/standard-kanban/tools/configuring-handlers) of this button: * Type = **Form** * Value = **Task Form** (form that was created before) * Parameters = **{"mode":"edit"}** Configure button "Print Kanban": Configure handler of this button: * Type = **KanBan API** * Value = **Print KanBan** * Parameters = **{"kanbanId":"{$KanBan.Id}"}** ### Configure columns * [Add 5 columns](/standard-kanban/configure-kanban/working-with-kanban-layout) to the kanban. * Name columns and give them descriptions respectively to task status (see table below) * Leave columns widths default ("auto") * Leave columns "Is Active" checkboxes default (checked) * [Set these properties](/standard-kanban/configure-column/how-to-configure-column-data-source) to all columns: * Data Source Type = **SObject** * Data Source = **Task** * Set the following conditions to the columns: | Column name | Description | Conditions | | ----------- | ----------------------- | --------------------------------------- | | New | Not Started | Status equals "Not Started" | | In Progress | In Progress | Status equals "In Progress" | | QA Ready | Waiting on someone else | Status equals "Waiting on someone else" | | Completed | Completed | Status equals "Completed" | | On Hold | Deferred | Status equals "Deferred" | * Set the following styles for column header on Header Configuration tab: ``` background: #e5eeff; ``` * Select amount of cards for column body on Body Configuration tab: Cards in Row = 1 * Add a row with 2 [cells](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons#cells) of "Text" type into column footer on Footer Configuration tab:
ValueCSS Styles
Totals:
font-weight: bold;

FORMULA[COLUMNTOTAL()]

color: #333;
text-align: right;
### Configure Card * Add 1 card to the kanban * Set Data Source Type to **Task** * Set [card layout](/standard-kanban/configure-card/how-to-configure-card-layout): Go to Basic configuration tab: * Layout body type = **Form** (Task Form was created above) with parameters (see in image) * Position = **right** * Checked "Hide Footer" checkbox Set card layout header to show name of active task: Open [Card Compact Layout editor](/standard-kanban/configure-card/how-to-configure-card-compact-layout): * add CSS Styles to the card settings: ```css border-left: 3px solid FORMULA[IF({Task.Type} = 'Bug', '#ff0000', '#3fba3f')]; background-color: FORMULA[IF({Task.Type} = 'Bug', '#ffeded', '#e5ffeb')]; ``` * By default Card Compact Layout contains one component of text type; this component contains Record ID. Click on it (1) and change its Type to **link** and Value to {**Task.Subject**} * Set its width to **100** (leave default) * Expand "Handler" section and add a [handler](/standard-kanban/tools/configuring-handlers) with Type = **SObject** and Value = **{Task.Id}** * Expand "Styles" section and set the following CSS style: `color: #045cea` * Add text component (2) below the previous * Set its Value to **{Task.Owner.Name}** * Leave its width default (**100**) * Set CSS styles for it: `font-weight: bold` * Add text component (3) below * Set its value to **{Task.ActivityDate}** * Set its Title to **Due Dat**e * Leave its width default (**100**) * Expend "Styles" section and set the following: ```css display: FORMULA[IF(ISBLANK({Task.ActivityDate}), 'none','')] ``` * Add text component (4) below * Set its value to **{Task.Who.Name}** * Set its width to **90** * Add text component (5) to the right of text component #4 * Set its Title to **{Task.Priority}** * Set it's width to **10** * Expend "Styles" section and set the following: ```css width: 16px; height: 16px; border-radius: 10px; background-color: FORMULA[CASE({Task.Priority}, 'Low', '#65D872', 'High', '#BA1100', '#F2CE00')]; flex: initial; ``` ### Configure column junctions Set [column junctions](/standard-kanban/configure-card/configuring-card-movement-and-column-junctions) for card on each column: * Drop behavior for source column: Remove card * Drop behavior for target column: Refresh Set allowed drag-n-drop directions:
Column to drag FromNewin ProgressQA ReadyCompletedOn Hold
New+++
In progress++++
QA Ready+++
Completed+
On Hold++
### Configure Card Actions To add a sense to Cards dragging some [actions](/standard-kanban/configure-card/configuring-card-actions) are necessary. Create a new action with these properties and add it to card in each column for each allowed target column: * Name = **Update Task Status Action** * Type = **Field Update** * Execute = **Always** * Status = **Active** * Context Object Type = **Task** In the Field Update Settings section configure this: * Object Name = **Task** * Fields: * Name = **Status** * Value = **{$TargetColumn.Description}** * Conditions: * Name: **Activity ID** * Operator: **equals** * Value: **{task.id}** # Demo Example: Events Kanban This Events kanban board shows events on a schedule and lets users manage them. Here is how this kanban can look like: To build this kanban, an admin should do the steps below: ### Create Actions and Actions Group Create the following [Actions](/components/actions-action-groups/basics/working-with-actions) of "Define Variable" type. Set Variable Type to Text in all actions: 1. Action name = `Get Previous Month`\ Variable name = `currentDate`\ Variable value = `FORMULA[FORMAT(ADDMONTHS(DATEVALUE({$Variables.currentDate}), -1), 'yyyy-MM-dd')]` 2. Action name = `Get Next Month`\ Variable name = `currentDate`\ Variable value = `FORMULA[FORMAT(ADDMONTHS(DATEVALUE({$Variables.currentDate}), 1), 'yyyy-MM-dd')]` 3. Action name = `Update Week 1 Start Variable`\ Variable name = `week1Start`\ Variable value = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01')))]` 4. Action name = `Update Week 2 Start Variable`\ Variable name = `week2Start`\ Variable value = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 7]` 5. Action name = `Update Week 3 Start Variable`\ Variable name = `week3Start`\ Variable value = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 14]` 6. Action name = `Update Week 4 Start Variable`\ Variable name = `week4Start`\ Variable value = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 21]` 7. Action name = `Update Week 1 Variable`\ Variable name = `week1`\ Variable value = `FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))), 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 6, 'dd/MM/yyyy')]` 8. Action name = `Update Week 2 Variable`\ Variable name = `week2`\ Variable value = `FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 7, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 13, 'dd/MM/yyyy')]` 9. Action name = `Update Week 3 Variable`\ Variable name = `week3`\ Variable value = `FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 14, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 20, 'dd/MM/yyyy')]` 10. Action name = `Update Week 4 Variable`\ Variable name = `week4`\ Variable value = `FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 21, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 27, 'dd/MM/yyyy')]` Create 2 [Action Groups](/components/actions-action-groups/basics/working-with-action-groups#switch_to_actions_subtab) and add actions from configured above to them (in the order specified below): 1. name = **Get Previous Month Action Group** * actions: 1. Get Previous Month 2. Update Week 1 Start Variable 3. Update Week 2 Start Variable 4. Update Week 3 Start Variable 5. Update Week 4 Start Variable 6. Update Week 1 Variable 7. Update Week 2 Variable 8. Update Week 3 Variable 9. Update Week 4 Variable 2. name = **Get Next Month Action Group** * actions: 1. Get Next Month 2. Update Week 1 Start Variable 3. Update Week 2 Start Variable 4. Update Week 3 Start Variable 5. Update Week 4 Start Variable 6. Update Week 1 Variable 7. Update Week 2 Variable 8. Update Week 3 Variable 9. Update Week 4 Variable ### Create a new kanban * Go to the [Kanban creation wizard](/standard-kanban/basics/how-to-create-a-standard-kanban) and create a new standard kanban. * Give it a name and description. * Select default "White" theme. * Save the kanban and go to Kanban builder. ### Configure the kanban Go to [Basic Configuration](/standard-kanban/configure-kanban/how-to-configure-kanban-basic-properties) and set icon: Go to [Statistics Configuration](/standard-kanban/configure-kanban/how-to-add-kanban-statistics). * Add the cell and set these properties to it: * Type = **Text** * Value = `FORMULA[FORMAT({$Variables.currentDate}, 'MMMM, yyyy')]` * Set CSS Styles to this cell: ```css font-size: 24px ``` Go to [Buttons Configuration](/standard-kanban/configure-kanban/how-to-add-kanban-buttons-and-menus) and add 3 buttons: Button "**Previous Month**": Configure [handler](/standard-kanban/tools/configuring-handlers#old-view-configurator) of this button: * Type = **Action Group** * Value = **Get Previous Month Action Group** (that was created before) * Parameters = not set * Success handler: * Type = **KanBan API** * Value = **Refresh Kanbans** * Parameters = not set Button "**Next Month**": Configure handler of this button: * Type = **Action Group** * Value = **Get Next Month Action Group** (that was created before) * Parameters = not set * Success handler: * Type = **KanBan API** * Value = **Refresh Kanbans** * Parameters = not set Button "**New Event**": Configure handler of this button: * Type = **SObject** * Value = **Event** * Parameters = not set Go to [Variables Configuration](/standard-kanban/configure-kanban/how-to-configure-variables) and add these variables: 1. currentDate = `{$System.Date}` 2. week1 = `FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))), 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 6, 'dd/MM/yyyy')]` 3. week1Start = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01')))]` 4. week1End = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 6]` 5. week2 = `FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 7, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 13, 'dd/MM/yyyy')]` 6. week2Start = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 7]` 7. week2End = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 13]` 8. week3 = `FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 14, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 20, 'dd/MM/yyyy')]` 9. week3Start = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 14]` 10. week3End = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 14]` 11. week4 = `FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 21, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 27, 'dd/MM/yyyy')]` 12. week4Start = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 21]` 13. week4End = `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 27]` ### Configure Columns * Add [4 columns](/standard-kanban/configure-kanban/working-with-kanban-layout) to the kanban. * Name them (see table below) * Leave column width default ("auto") * Leave column "Is Active" checkbox default (checked) * Set these properties to [Data Source Configuration](/standard-kanban/configure-column/how-to-configure-column-data-source#sobject-data-source): * Data Source Type = **SObject** * Data Source = **Event** * Set the following **conditions** to the proper columns (select Type = "Formula" in all): 1. Column name = `{$Variables.week1}`\ Condition 1:\ Start Date Time > `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01')))]T00:00:00Z`\ Condition 2:\ Start Date Time < `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 7]T00:00:00Z` 2. Column name = `{$Variables.week2}`\ Condition 1:\ Start Date Time > `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 7]T00:00:00Z`\ Condition 2:\ Start Date Time < `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 14]T00:00:00Z` 3. Column name = `{$Variables.week3}`\ Condition 1:\ Start Date Time > `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 14]T00:00:00Z`\ Condition 2:\ Start Date Time < `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 21]T00:00:00Z` 4. Column name = `{$Variables.week4}`\ Condition 1:\ Start Date Time > `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 21]T00:00:00Z`\ Condition 2:\ Start Date Time < `FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 28]T00:00:00Z` * Open [Body Configuration](/standard-kanban/configure-column/how-to-configure-column-body) tab: * Select Cards in Row = **1** * Configure CSS Styles: {% code fullWidth="false" %} ```css background-color: FORMULA[IF(STARTOFWEEK({$Variables.week1start}) = STARTOFWEEK({$System.Date}), '#feffea', '#ffffff')] ``` {% endcode %} ### Configure Card * [Add 1 card](/standard-kanban/configure-kanban/working-with-kanban-layout) to the kanban * Set Data Source Type to **"Event"** * Set [card layout](/standard-kanban/configure-card/how-to-configure-card-layout): Basic configuration: * Layout body type = **Standard** * Position = **right** * All checkboxes = **false** Header configuration: * Title settings: * Text = **{Event.Subject}** Footer configuration: * Add button "**Open Event**": Configure handler of this button: * Type = **SObject** * Value = **{Event.Id}** * Parameters = not set Add tab to Tabs configuration: * Label = **Details** * Title = **Details** * Icon = **standard:lead\_list** * Layout = **Standard** with 5 rows:
#LabelValue
1TypeType
2Assigned ToAccount ID:Account Name
3Start Date TimeStart Date Time
4DurationDuration
5LocationLocation
Open [Card Compact Layout](/standard-kanban/configure-card/how-to-configure-card-compact-layout) editor : * add CSS Styles to the card settings (1): ```css background-color: #ffffff border-left: 3px solid #15db00 ``` * Change the Value of default existing Card Component to **{Event.Subject}** (2). * Set its width to **100** (leave default) * Expend "Styles" section and set the following: ```css text-decoration: underline color: #006dcc display: contents flex: initial ``` * Add text component (3) below the previous * Set its Value and Title to **{Event.Who.Name}** * Leave its width default (**100**) * Add text component (4) below * Set its value to **FORMULA\[FORMAT({Event.StartDateTime})]** * Set its Title to **{Event.StartDateTime}** * Leave its width default (**100**) # Demo Example: Opportunities Kanban This Opportunities kanban board helps you manage opportunities. It visualizes key fields and makes comparisons easy. Here is how this kanban can look like:
This kanban shows opportunities in 7 columns. Similar stages share a column. Drag cards to change stage. If needed, edit the record in the form. To build this kanban, an admin should do the steps below: ### Create a new kanban * Go to the [Kanban creation wizard](/standard-kanban/basics/how-to-create-a-standard-kanban) and create a new standard kanban. * Give it a name and description. * Select "Polo Blue" theme. * Save the kanban and go to Kanban Builder. ### Configure the kanban Go to [Statistics Configuration](/standard-kanban/configure-kanban/how-to-add-kanban-statistics). Add [the cell](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons#cells) which will overlay unnecessary views selector: * Type = Text * Value = Opportunities Set [CSS Styles](/standard-kanban/tools/configuring-css-styles) to this cell: ```css position: absolute; background-color: #AEC0D7; top: 0; left: 0; bottom: 0; padding: 0 1.5em; z-index: 1; font-size: 1.5rem; display: flex; align-items: center; font-weight: bold; ``` Go to [Variables Configuration](/standard-kanban/configure-kanban/how-to-configure-variables) tab. Add these variables. They store colors for opportunity stages. This lets you re-style the whole kanban from one place:
#Variable NameVariable Value
1StageColor_Default#AAAAAA
2StageColor_Prospecting#e08f68
3StageColor_Qualification#e0bb68
4StageColor_NeedsAnalysis#8BAEBC
5StageColor_PerceptionAnalysis#6882e0
6StageColor_ValueProposition#b581ab
7StageColor_ProposalPriceQuote#8b619c
8StageColor_IdDecisionMakers#8fa96a
9StageColor_NegotiationReview#70c2aa
10StageColor_ClosedWon#2f8638
11StageColor_ClosedLost#af1e1e
### Configure columns * [Add 7 columns](/standard-kanban/configure-column/how-to-sonfigure-column-properties) to the kanban. * Name columns respectively to opportunity stages (see table below) * Leave columns widths default ("auto") * Leave columns "Is Active" checkboxes default (checked) * [Set these properties](/standard-kanban/configure-column/how-to-configure-column-data-source) to all columns: * Data Source Type = **SObject** * Data Source = **Opportunity** * Order = **Expected Amount, desc** (set Order = "**Amount, desc**" for column named "Closed" ) * Set the following conditions to the columns:
* Add the [custom attribute](/standard-kanban/configure-column/how-to-set-and-use-column-custom-attributes) to all columns:
#ColumnCustom attribute nameCustom attribute value
1Prospecting and othersetStageToProspecting
2QualificationsetStageToQualification
3AnalysissetStageToNeeds Analysis
4PropositionssetStageToValue Proposition
5Id. Desision MakerssetStageToId. Decision Makers
6Negotiation/ReviewsetStageToNegotiation/Review
7ClosedsetStageTolosed Won
* Set the following styles for column bodies on [Body Configuration](/standard-kanban/configure-column/how-to-configure-column-body) tab: ```css padding-top: 0; background: transparent; border: 0px none; ``` * Set these styles to column headers on the [Header Configuration](/standard-kanban/configure-column/how-to-configure-column-header) tab:
#ColumnColumn Header CSS styles
1Prospecting and other
text-shadow: 1px 1px 2px #000;
color: #fff;
background: {$Variables.stagecolor_prospecting};
padding: 0.35rem 0.75rem;
border: 0px none;
2Qualification
text-shadow: 1px 1px 2px #000;
color: #fff;
background: {$Variables.stagecolor_qualification};
padding: 0.35rem 0.75rem;
border: 0px none;
3Analysis
text-shadow: 1px 1px 2px #000;
color: #fff;
background: linear-gradient(120deg, {$Variables.stagecolor_needsanalysis} 30%, {$Variables.stagecolor_perceptionanalysis} 70%);
padding: 0.35rem 0.75rem;
border: 0px none;
4Propositions
text-shadow: 1px 1px 2px #000;
color: #fff;
background: linear-gradient(120deg, {$Variables.stagecolor_valueproposition} 30%, {$Variables.stagecolor_proposalpricequote} 70%);
padding: 0.35rem 0.75rem;
border: 0px none;
5Id. Decision Makers
text-shadow: 1px 1px 2px #000;
color: #fff;
background: {$Variables.stagecolor_iddecisionmakers};
padding: 0.35rem 0.75rem;
border: 0px none;
6Negotiation/Review
text-shadow: 1px 1px 2px #000;
color: #fff;
background: {$Variables.stagecolor_negotiationreview};
padding: 0.35rem 0.75rem;
border: 0px none;
7Closed
text-shadow: 1px 1px 2px #000;
color: #fff;
background: linear-gradient(120deg, {$Variables.stagecolor_closedwon} 30%, {$Variables.stagecolor_closedlost} 70%);
padding: 0.35rem 0.75rem;
border: 0px none;
### Configure card * [Add 1 card](/standard-kanban/configure-kanban/working-with-kanban-layout) to the kanban * Set Data Source Type to "**Opportunity**" * Set [card layout](/standard-kanban/configure-card/how-to-configure-card-layout#basic-configuration) to necessary type. In this example it is set to **SObject** and Record ID is set to **{Opportunity.Id}**:
* Set [card layout header](/standard-kanban/configure-card/how-to-configure-card-layout#header-configuration) to show name of active Opportunity record:
* Open [Card Compact Layout](/standard-kanban/configure-card/how-to-configure-card-compact-layout) editor and add these styles to the Card settings: ```css border-radius: 2px; padding: 0.5rem; position: relative; ``` * By default Card Compact Layout contains one component of text type; this component contains Record ID. Click on it and change its Value to **{Opportunity.Name}** * Set its Title to **Opportunity name** * Set its width to 100 (leave default) * Expand "Handler" section and [add a handler](/standard-kanban/tools/configuring-handlers) with Type = **SObject** and Value = **{Opportunity.Id}** * Expand "Styles" section and set the following [CSS style](/standard-kanban/tools/configuring-css-styles): ```css font-weight: bold; ``` * Add text component # 2 below the previous * Set its Value to **By: {Opportunity.Account.Name}** * Set its Title to **Account** * Leave its width default (100) * Set CSS styles for it: ```css font-size: 11px; ``` * Add text component # 3 below * Set its value to **Stage: {Opportunity.StageName}** * Set its Title to **Stage** Now, you need to create a bar chart from several text components by wide use of dynamic CSS styles (see the next chapter). ### Create a bar chart from the card components * Add a text component # 4 to Card under component # 2 (above the last "Stage" one) * Leave its Value and Title empty * Leave its Width default (100) * Set following CSS styles to it: ```css height: 110px; border-bottom: 1px solid gray; ``` {% hint style="info" %} This component will be used as background with fixed height to place chart bars onto. {% endhint %} #### "Opportunity amount" chart bar * Add a text component # 5 below the # 4 * Leave its Value empty * Set its Title to **Opportunity amount: {Opportunity.Amount}** * Leave its Width default * Set the following CSS styles to it: ```css position: absolute; color: transparent; overflow: hidden; width: calc((100% - 1rem) /4); ``` * Add the **Height** rule to CSS Styles and set it to this formula: ```clike FORMULA[{Opportunity.Amount} / (COLUMNTOTAL({$Column.Id}, null, 'MAX', 'Amount')/ 100)]px ``` {% hint style="info" %} This formula calculates total amount of all opportunities in the column where card is shown, and sets height of the current component as a fraction of 100 pixels. This fraction is proportional to current opportunity amount. Thus, the component will work as chart bar, which height represents an opportunity amount related to total amount of all opportunities in the current column. {% endhint %} * Add the **Margin-top** rule to CSS Styles and set it to this formula: ```clike FORMULA[0 - (({Opportunity.Amount} / (COLUMNTOTAL({$Column.Id}, null, 'MAX', 'Amount')/ 100)) + 1)]px ``` {% hint style="info" %} This formula acts in the same way as previous, but calculates the negative value which will be used as top margin to shift the chart bar upward. {% endhint %} * Add the **Background-color** rule to CSS Styles and set it to this formula: ```clike FORMULA[ CASE( {Opportunity.StageName}, 'Prospecting', {$Variables.stagecolor_prospecting}, 'Qualification', {$Variables.stagecolor_qualification}, 'Needs Analysis', {$Variables.stagecolor_needsanalysis}, 'Value Proposition', {$Variables.stagecolor_valueproposition}, 'Id. Decision Makers', {$Variables.stagecolor_iddecisionmakers}, 'Perception Analysis', {$Variables.stagecolor_perceptionanalysis}, 'Proposal/Price Quote', {$Variables.stagecolor_proposalpricequote}, 'Negotiation/Review', {$Variables.stagecolor_negotiationreview}, 'Closed Won', {$Variables.stagecolor_closedwon}, 'Closed Lost', {$Variables.stagecolor_closedlost}, {$Variables.stagecolor_default} ) ] ``` {% hint style="info" %} This formula sets different background colors to the Card component depending on current opportunity Stage. Colors are got from the Kanban variables. {% endhint %} * Add the **Min-height** rule to CSS Styles and set it to this formula: ```clike FORMULA[ IF( OR( {Opportunity.Amount} = null, {Opportunity.Amount} = "", {Opportunity.Amount} <= 0 ), 0, 1 ) ]px ``` {% hint style="info" %} This formula sets the minimal height of the chart bar to 1 pixel if opportunity amount is set and more than 0. For zero, absent or undefined amounts this value will be "0px" and no chart bar will be shown. {% endhint %} #### "Opportunity Expected Revenue" chart bar * Add a text component # 6 below the # 5 * Leave its Value empty * Set its Title to **Expected amount: {Opportunity.ExpectedRevenue}** * Leave its Width default * Set the following CSS styles to it: ```css position: absolute; color: transparent; overflow: hidden; width: calc((100% - 1rem) /4); left: calc((100% - 1rem) * 3 / 8); opacity: 0.75; max-height: 100px; background-color: FORMULA[ CASE( {Opportunity.StageName}, 'Prospecting', {$Variables.stagecolor_prospecting}, 'Qualification', {$Variables.stagecolor_qualification}, 'Needs Analysis', {$Variables.stagecolor_needsanalysis}, 'Value Proposition', {$Variables.stagecolor_valueproposition}, 'Id. Decision Makers', {$Variables.stagecolor_iddecisionmakers}, 'Perception Analysis', {$Variables.stagecolor_perceptionanalysis}, 'Proposal/Price Quote', {$Variables.stagecolor_proposalpricequote}, 'Negotiation/Review', {$Variables.stagecolor_negotiationreview}, 'Closed Won', {$Variables.stagecolor_closedwon}, 'Closed Lost', {$Variables.stagecolor_closedlost}, {$Variables.stagecolor_default} ) ] height: FORMULA[{Opportunity.ExpectedRevenue} / (COLUMNTOTAL({$Column.Id}, null, 'MAX', 'Amount')/ 100)]px margin-top: FORMULA[0 - (({Opportunity.ExpectedRevenue} / (COLUMNTOTAL({$Column.Id}, null, 'MAX', 'Amount') / 100)) + 1)]px min-height: FORMULA[ IF( OR( {Opportunity.ExpectedRevenue} = null, {Opportunity.ExpectedRevenue} = "", {Opportunity.ExpectedRevenue} <= 0 ), 0, 1 ) ]px ``` {% hint style="info" %} Formulas in the code above are the same as for "Opportunity Amount" chart bar, but they are based on **{Opportunity.ExpectedRevenue}** field instead of **{Opportunity.Amount}**. Also, "opacity" property is used to make chart bar have more light shade of background color. {% endhint %} #### "Opportunity probability" data cell * Add a text component # 7 below the # 6 * Set its Value to **{Opportunity.Probability}%** * Set its Title to **Probability** * Leave its Width default * Set the following CSS styles to it: ```css position: absolute; right: 0; margin-top: calc(0px - 2rem - 1px); font-size: 1.25rem; overflow: hidden; font-weight: bold; padding-right: 0.5rem; text-align: right; left: auto; max-height: 100px; width: 100%; ``` * Add the **Color** rule to CSS Styles and set it to this formula: ```clike FORMULA[ IF( {Opportunity.Probability} > 80, green, IF( {Opportunity.Probability} > 60, olive, IF( {Opportunity.Probability} > 40, gold, IF( {Opportunity.Probability} > 20, orange, red ) ) ) ) ] ``` {% hint style="info" %} This formula will set different colors from red to green depending on probability percentage of the opportunity. Discreteness is 20%. {% endhint %} #### "Opportunity Amount" legend entry * Add a text component # 8 below the # 7 * Set its Value to the following formula: ```clike FORMULA[ IF( OR({Opportunity.Amount} = null, {Opportunity.Amount} = ""), '0', IF( {Opportunity.Amount} > 999999, TEXT(ROUND({Opportunity.Amount} / 1000000),CEILING) + 'M', IF( {Opportunity.Amount} > 9999, TEXT(ROUND({Opportunity.Amount} / 1000),CEILING)+'k', INTNUMBER({Opportunity.Amount}) ) ) ) ] ``` {% hint style="info" %} This formula will show rounded amount in millions ("M") or thousands ("k") of currency units. To know the exact value hover mouse on the amount. {% endhint %} * Set its Title to **Opportunity amount: {Opportunity.Amount}** * Leave its Width default * Set the following CSS styles to it: ```css width: calc((100% - 1rem) / 4); font-size: 11px; color: #000; text-align: center; position: absolute; ``` #### "Opportunity Expected Revenue" legend entry * Add a text component # 9 **to the right** of the # 8 * Set its Value to the following formula (it will show the Expected revenue in millions or thousands): ```css FORMULA[ IF( OR({Opportunity.ExpectedRevenue} = null, {Opportunity.ExpectedRevenue} = ""), '0', IF( {Opportunity.ExpectedRevenue} > 999999, TEXT(ROUND({Opportunity.ExpectedRevenue} / 1000000),CEILING) + 'M', IF( {Opportunity.ExpectedRevenue} > 9999, TEXT(ROUND({Opportunity.ExpectedRevenue} / 1000),CEILING)+'k', INTNUMBER({Opportunity.ExpectedRevenue}) ) ) ) ] ``` * Set its Title to **Expected Revenue: {Opportunity.ExpectedRevenue}** * Leave its Width default * Set the following CSS styles to it: ```css width: calc((100% - 1rem) / 4); font-size: 11px; color: #000; text-align: center; position: absolute; left: calc((100% - 1rem) * 3 / 8); ``` #### Assistive block * Add a text component # 10 **to the right** of the # 9 * Set its Value to **Amount** * Leave its Title empty * Leave its Width default * Set the following CSS styles to it: ```css overflow: hidden; max-width: 0px; color: transparent; width: calc((100% - 1rem) * 3 / 8); ``` {% hint style="info" %} This element is used to prevent legend entries mess with lowest component. {% endhint %} ### Configure column junctions * Set [column junctions](/standard-kanban/configure-card/configuring-card-movement-and-column-junctions) for card on each column: * Drag-n-drop allowed to ALL columns * Drop behavior for source column: Remove card * Drop behavior for target column: Refresh ### Configure Card Actions To add a sense to Cards dragging [some actions are necessary](/standard-kanban/configure-card/configuring-card-actions). In this example action will be the same for all columns, so, no need to configure them separately. Click on card and add a new action with these properties: * Name = **Update opportunity stage** * Type = **Field Update** * Execute = **Always** * Status = **Active** * Context Object Type = **Opportunity** In the Field Update Settings section configure this: * Object Name = Opportunity * Fields: * Name = **Stage** * Value = **{$TargetColumn.a\_\_setStageTo}** * Conditions: * **Opportunity ID eqials {opportunity.id}** # Demo Example: Gantt Kanban The Gantt Dashboard represents events as classic Gantt chart. It allows dashboard user to view a project or events schedule on the timeline, and manage them. Here is how such dashboard can look like:
To make this dashboard administrator should do actions listed below: ### Create new dashboard * Go to [dashboard creation wizard](/standard-kanban/basics/how-to-create-a-standard-kanban) and create new standard dashboard. * Give it a name and description. * Select default "White" theme. * Save dashboard and go to Kanban builder. ### Configure dashboard Go to [Variables Configuration](/standard-kanban/configure-kanban/how-to-configure-variables) tab. Add these variables: 1. from = `FORMULA[STARTOFWEEK({$System.Date})]` 2. to = `FORMULA[ADDDAYS(STARTOFWEEK({$System.Date}),7,false)]` 3. range = `week` 4. columnName = `FORMULA[FORMAT(STARTOFWEEK({$System.Date}),'d MMM yyyy') + ' - ' + FORMAT(ADDDAYS(STARTOFWEEK({$System.Date}),6,false),'d MMM yyyy')]` 5. dayOfWeek = `FORMULA[{$System.Date} - STARTOFWEEK({$System.Date})]` Go to Statistics Configuration. * Add the cell which will overlay unnecessary views selector. Set these properties to it: * Type = **Text** * Value = **Gantt Dashboard** * Set CSS Styles to this cell: ```css font-weight: bold; background-color: #F7F7F7; font-size: 1.5em; position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; padding: 0 1.5em 0 1.5em; display: flex; align-items: center; ``` * Add another cell with these properties: * Type = **Text** * Set Value to the following formula: ```css FORMULA[ IF( {$Variables.range} = 'week', '', IF( {$Variables.range} = 'month', FORMAT({$Variables.from},'MMMM yyyy'), IF( {$Variables.range} = 'quarter', FORMAT(ADDDAYS({$Variables.from},1,false), 'yyyy') + ', Quarter ' + CASE(FORMAT(ADDDAYS({$Variables.to}, -1, false), 'M'),'3','I','6','II','9','III','IV'), FORMAT({$Variables.from}, 'yyyy') ) ) ) ] ``` {% hint style="info" %} This formula sets the text at the middle of Kanban header to represent currently selected date range. {% endhint %} ### Configure column * Add 1 column to the dashboard. * Name it **{$Variables.columnName}** * Leave column width default ("auto") * Leave column "Is Active" checkbox default (checked) * Set these properties to the column: * Data Source Type = **SObject** * Data Source = **Event** * Order = **Start Date Time, asc** * Page size = **20** * Set the following conditions to the column (set type to "Formula" to all): 1. End Date Time >= `FORMULA[FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]` 2. Start Date Time < `FORMULA[FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]` 3. End Date Time < `FORMULA[FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]` 4. Start Date Time >= `FORMULA[FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]` 5. Start Date Time < `FORMULA[FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]` 6. End Date Time >= `FORMULA[FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]` * Set this logic to column conditions: ``` ({1} AND {3}) OR ({2} AND {4}) OR ({5} AND {6}) ``` * Set this [CSS style](/standard-kanban/tools/configuring-css-styles) to column header in [Header Configuration tab](/standard-kanban/configure-column/how-to-configure-column-header): ```css display: none; ``` * Set these CSS styles to column body in [Body configuration tab](/standard-kanban/configure-column/how-to-configure-column-body): ```css padding-top: 2.5rem; background-color: #fff; padding-right: 0; padding-left: 0; ``` * Add a **background-image** property to column body CSS styles. Set its value to this code (don't think about formatting - the code below will lose it after being inserted into CSS Rule Value input field): ```css repeating-linear-gradient( 90deg, transparent calc( (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)]) * (6 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})]) ), rgba(150,150,255,0.1) calc( (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)]) * (6 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})]) ), rgba(150,150,255,0.1) calc( (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)]) * (8 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})]) ), transparent calc( (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)]) * (8 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})]) ), transparent calc( (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)]) * (13 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})]) ) ), repeating-linear-gradient( 90deg, transparent calc( (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)]) * (7 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})]) - 1px ), RGBA(187,187,187,0.56) calc( (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)]) * (7 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})]) - 1px ), RGBA(187,187,187,0.56) calc( (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)]) * (7 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})]) ), transparent calc( (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)]) * (7 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})]) ), transparent calc( (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)]) * (14 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})]) - 1px ) ) FORMULA[ IF( {$Variables.range} = 'year', '', ', repeating-linear-gradient( 90deg, #fff 0px, #fff calc( 100% / ' + TEXT(DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)) + ' - 1px ), #eee calc( 100% / ' + TEXT(DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)) + ' - 1px ), #eee calc( 100% / ' + TEXT(DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)) + ' ) )' ) ] ``` {% hint style="info" %} This big formula is used to make column background depending on date range selected: * First background gradient draws weekends * Second gradient draws borders between weeks * Third gradient draws days borders (except when date range = **year**, because only weeks are drawn due too small days widths) {% endhint %} * Set these CSS styles to column footer on [Footer Configuration tab](/standard-kanban/configure-column/how-to-configure-column-footer): ```css padding: 0.4rem 0 0.25rem 0; top: 0px; background: transparent; width: 100%; position: absolute; border-bottom: 2px solid #ddd; ``` {% hint style="info" %} We're moving column footer to the top in order to have a header where we can use [Rows](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons) {% endhint %} * Set the following Rows with Cells on them (all cells should have Type = **Text**): ### Row 1 (for Quarter date range)
#Cell ValueCell CSS styles
1
FORMULA[FORMAT({$Variables.from},'MMMM')]

box-shadow: 0 -0.4rem 0 rgba(150,150,255,0.25), 0 0.25rem 0 rgba(150,150,255,0.25);
background-color: rgba(150,150,255,0.25);
display: FORMULA[IF({$Variables.range} = 'quarter',block,none)];
text-align: center;
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), false)] * FORMULA[IF(         FORMAT(ADDDAYS({$Variables.from},15,false),'M') = '4',         30,         31     ) ] );
2
FORMULA[FORMAT(ADDDAYS({$Variables.from},45,false),'MMMM')]

box-shadow: 0 -0.4rem 0 rgba(150,255,150,0.25), 0 0.25rem 0 rgba(150,255,150,0.25);
background-color: rgba(150, 255, 150, 0.25);
display: FORMULA[IF({$Variables.range} = 'quarter',block,none)];
text-align: center;
width: calc(100% /  FORMULA[     DAYSBETWEEN(         DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),         DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),         false     ) ]  *  FORMULA[     CASE(         FORMAT(ADDDAYS({$Variables.from},45,false),'M'),         '5',31,         '8',31,         '11',30,         IF(             DAYSBETWEEN(                 DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),                 DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),                 false             ) = 91,             29,             28         )     ) ] );
3
FORMULA[FORMAT(ADDDAYS({$Variables.from},75,false),'MMMM')]

box-shadow: 0 -0.4rem 0 rgba(255, 150, 150, 0.25), 0 0.25rem 0 rgba(255, 150, 150, 0.25);
background-color: rgba(255, 150, 150, 0.25);
display: FORMULA[IF({$Variables.range} = 'quarter',block,none)];
text-align: center;
width: calc(100% /  FORMULA[     DAYSBETWEEN(         DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),         DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),         false     ) ]  *  FORMULA[     CASE(         FORMAT(ADDDAYS({$Variables.from},75,false),'M'),         '3',31,         '12',31,         30     ) ] );
### Row 2 (for Year date range)
#Cell ValueCell TitleCell CSS Styles
1JanJanuary
box-shadow: 0 -0.4rem 0 rgba(150,150,255,0.25), 0 0.25rem 0 rgba(150,150,255,0.25);
background-color: rgba(150,150,255,0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 31);
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
text-align: center;
2FebFebruary
box-shadow: 0 -0.4rem 0 rgba(150,255,150,0.25), 0 0.25rem 0 rgba(150,255,150,0.25);
background-color: rgba(150, 255, 150, 0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * FORMULA[     IF(         DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false) = 366,         29,         28) ]);
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
text-align: center;
3MarMarch
box-shadow: 0 -0.4rem 0 rgba(255, 150, 150, 0.25), 0 0.25rem 0 rgba(255, 150, 150, 0.25);
background-color: rgba(255, 150, 150, 0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
4AprApril
box-shadow: 0 -0.4rem 0 rgba(150,150,255,0.25), 0 0.25rem 0 rgba(150,150,255,0.25);
background-color: rgba(150,150,255,0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 30);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
5MayMay
box-shadow: 0 -0.4rem 0 rgba(150,255,150,0.25), 0 0.25rem 0 rgba(150,255,150,0.25);
background-color: rgba(150, 255, 150, 0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
6JunJune
box-shadow: 0 -0.4rem 0 rgba(255, 150, 150, 0.25), 0 0.25rem 0 rgba(255, 150, 150, 0.25);
background-color: rgba(255, 150, 150, 0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 30);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
7JulJuly
box-shadow: 0 -0.4rem 0 rgba(150,150,255,0.25), 0 0.25rem 0 rgba(150,150,255,0.25);
background-color: rgba(150,150,255,0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
8AugAugust
box-shadow: 0 -0.4rem 0 rgba(150,255,150,0.25), 0 0.25rem 0 rgba(150,255,150,0.25);
background-color: rgba(150, 255, 150, 0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
9SepSeptember
box-shadow: 0 -0.4rem 0 rgba(255, 150, 150, 0.25), 0 0.25rem 0 rgba(255, 150, 150, 0.25);
background-color: rgba(255, 150, 150, 0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 30);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
10OctOctober
box-shadow: 0 -0.4rem 0 rgba(150,150,255,0.25), 0 0.25rem 0 rgba(150,150,255,0.25);
background-color: rgba(150,150,255,0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
11NovNovember
box-shadow: 0 -0.4rem 0 rgba(150,255,150,0.25), 0 0.25rem 0 rgba(150,255,150,0.25);
background-color: rgba(150, 255, 150, 0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 30);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
12DecDecember
box-shadow: 0 -0.4rem 0 rgba(255, 150, 150, 0.25), 0 0.25rem 0 rgba(255, 150, 150, 0.25);
background-color: rgba(255, 150, 150, 0.25);
width: calc(100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
### Row 3 (for Month date range) * Add 31 [cells.](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons) * Set names from **1** to **31** to them * Set these [CSS Styles](/standard-kanban/tools/configuring-css-styles) to them:
#Cell ValueCell CSS Styles
1...28From 1 to 28
display: FORMULA[IF({$Variables.range} = 'month',block,none)];
text-align: center;
width: calc(100% / FORMULA[CASE(DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false),28,'28',29,'29',30,'30','31')]);
2929
width: calc(100% / FORMULA[CASE(DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false),28,'28',29,'29',30,'30','31')]);
text-align: center;
display: FORMULA[IF(AND({$Variables.range} = 'month',DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false) > 28),block,none)];
3030
width: calc(100% / FORMULA[CASE(DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false),28,'28',29,'29',30,'30','31')]);
text-align: center;
display: FORMULA[IF(AND({$Variables.range} = 'month',DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false) > 29),block,none)];
3131
width: calc(100% / FORMULA[CASE(DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false),28,'28',29,'29',30,'30','31')]);
text-align: center;
display: FORMULA[IF(AND({$Variables.range} = 'month',DAYSBETWEEN(DATETIMEVALUE(FORMAT({$Variables.to},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from},'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),false) > 30),block,none)];
{% hint style="info" %} Days from 1 to 28 are shown for each month. Days from 29 to 31 are shown depending on specific month length. {% endhint %} ### Row 4 (for Week date range) * Add 7 cells * Set CSS Styles to all of them to the following: ```css text-align: center; width: calc(100% / 7); display: FORMULA[IF({$Variables.range} = 'week',block,none)]; ``` * Set their Values to these:
#Cell Value
1
Sun, FORMULA[FORMAT({$Variables.from}, 'dd MMM yyyy')]
2
Mon, FORMULA[FORMAT(ADDDAYS({$Variables.from}, 1, false), 'dd MMM yyyy')]
3
Tue, FORMULA[FORMAT(ADDDAYS({$Variables.from}, 2, false), 'dd MMM yyyy')]
4
Wed, FORMULA[FORMAT(ADDDAYS({$Variables.from}, 3, false), 'dd MMM yyyy')]
5
Thu, FORMULA[FORMAT(ADDDAYS({$Variables.from}, 4, false), 'dd MMM yyyy')]
6
Fri, FORMULA[FORMAT(ADDDAYS({$Variables.from}, 5, false), 'dd MMM yyyy')]
7
Sat, FORMULA[FORMAT({$Variables.to}, 'dd MMM yyyy')]
### Configure card {% hint style="success" %} This card does not require configuring [Junction Settings](/standard-kanban/configure-card/configuring-card-movement-and-column-junctions) in the one existing column. Just leave "Visible in this column" checkbox checked. {% endhint %} * [Add one card](/standard-kanban/configure-kanban/working-with-kanban-layout) to dashboard. * Set Data Source Type to "**Event**". ### Configure Card Layout * [Set Card Layout](/standard-kanban/configure-card/how-to-configure-card-layout) to "Form". * Click "+" button to add new Form. Create [new form](/components/forms/basics/form-building-overview) with these properties: | Property | Value | | --------------------- | ------------------------------------------------------------ | | Name | **Event form** | | Data Source Object | **Event** | | Multi Page Form? | false | | Show navigation panel | true | | Buttons configuration | Check "Save" button for "Edit" mode only. Uncheck other. | | Header configuration |

{$Event.Subject} (for all modes)

| * Add these elements to the form: 1. Type = `Section`\ Name = `section`\ Title = `''` (leave empty)\ *Properties:*\ Columns = `2`\ Show on Edit page = `true`\ Show on View page = `true`\ Scrollable = `false` 2. Type = `Button`\ Name = `button`\ Title = `Close`\ *Properties:*\ Show on Edit page = `true`\ Show on View page = `true` **The following elements all should be added into section configured above.** \ **All these elements should be Data Source Fields:** 1. Data Source Field = `Subject`\ Name = `Subject`\ Title = `Subject` 2. Data Source Field = `Type`\ Name = `Type`\ Title = `Type` 3. Data Source Field = `EventSubtype`\ Name = `EventSubtype`\ Title = `Subtype` 4. Data Source Field = `StartDateTime`\ Name = `StartDateTime`\ Title = `Start Date Time` 5. Data Source Field = `EndDateTime`\ Name = `EndDateTime`\ Title = `End Date Time` 6. Data Source Field = `Description`\ Name = `Description`\ Title = `Description` Set properties of all Data Source Fields above to: * Required = `false` * Read Only = `false` * Show on Edit page = `true` * Show on View page = `true` * Instructions = (not set) * Conditional Styles = (not set) * Events = (not set) * View Type (for picklists) = `Single list` * Hide 'None' (for picklists) = `false` * Option groups (for picklists) = (not set) * Add these [Form Actions](/components/forms/tools/form-action): 1. Action name and Title = `Close Panel`\ Type = `Form API`\ Form Action Type = `Fire Event`\ Name = `e.c.:ApplicationEvent`\ Parameters = Name: `data`; Value Type: `Object`; Value: `{"componentType":"c:KanBanPanelComponent","method":"hideCard"}`\ Has Conditions = `false` 2. Action name and Title = `Refresh Column`\ Type = `Form API`\ Form Action Type = `Fire Event`\ Name = `e.c.:ApplicationEvent`\ Parameters = **Name**: `data`; **Value Type**: `Object`; **Value**: `{"componentType":"c:KanBanColumnComponent","method":"refresh","params":{"kanbans":"{$FormParameters.kanban}"}}`\ Has Conditions = `true`\ Conditions = **1**: `Form.StartDateTime not equal to {$Event.StartDateTime}`; **2**: `Form.EndDateTime not equal to {$Event.EndDateTime}`\ Conditions logic = `{1} OR {2}` * Add the following events to the form:
#Element what event is added toEvent propertiesEvent Handler
1FormType: onAfterSave
Enabled: true		"Refresh Column" action without parameters
2"Close" buttonType: onClick
Enabled: true		"Close Panel" action without parameters
* Set these parameters for the Card Layout body: * id = **{Event.Id}** * mode = **edit** * Set other Card Layout properties: * Position = **Modal** * Hide Header = **false** * Hide Footer = **true** * Go to "Header Configuration" tab and set Text in Title Settings to "**{event.Subject}**". {% hint style="info" %} The Layout described above will show the form with basic Event properties that can be edited. {% endhint %} ### Configure Card Compact Layout * Set the following CSS Styles to the whole Card: ```css color: #ffffff; border: 0px none; padding: 0; box-shadow: 1px 1px 4px rgba(0,0,0,0.3) inset; ``` * Add a **background-color** property to Card CSS Styles and set its value to the following formula: ```css FORMULA[ IF( CONTAINS(LOWER({Event.Subject}), 'meeting'), #75c769, IF( OR( CONTAINS(LOWER({Event.Subject}), 'send'), CONTAINS(LOWER({Event.Subject}), 'letter'), CONTAINS(LOWER({Event.Subject}), 'email') ), #DE5449, IF( CONTAINS(LOWER({Event.Subject}), 'call'), #71afd0, #d6b37a ) ) ) ] ``` {% hint style="info" %} This formula sets the Card background color depending on keywords the subject of Event can contain: * Event with "meeting" word in subject is light green * Event with "send", "letter" or "email" word is red * Event with "call" word is blue * Other events are yellow brown {% endhint %} * Add a **border-radius** CSS property and set its value to the following formula: ```css FORMULA[ IF( {Event.StartDateTime} < DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), '0 ', '5px ' ) + IF( {Event.EndDateTime} > DATETIMEVALUE(FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), '0 0 ', '5px 5px ' ) + IF( {Event.StartDateTime} < DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), '0', '5px' ) ] ``` {% hint style="info" %} This formula sets the border radius of Cards (that are Gantt Chart Lines) corners to represent if the current Gantt line is started or ended in the shown date range or not. If the start (or end) date is out of range, both left (or right) corners will not be rounded, otherwise they will be rounded. {% endhint %} * Add a **left** CSS property and set its value to the following formula: ```css FORMULA[ SCALE( IF( {Event.StartDateTime} < DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), 0, ({Event.StartDateTime} - DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}'))) * 100 / ( DAYSBETWEEN( DATETIMEVALUE(FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), false ) ) ), 8 ) ]% ``` {% hint style="info" %} This formula calculates position of the Card left side that should represent the Start Date of Event. The SCALE(\*\*\*,8) function truncates the result to 8 digits in order to avoid long decimal fractions. {% endhint %} * Add a **width** CSS property and set its value to the following formula: ```css FORMULA[ SCALE( ( ( IF( {Event.EndDateTime} > DATETIMEVALUE(FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')) , 100 , ( ({Event.EndDateTime} - DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}'))) * 100 / ( DAYSBETWEEN( DATETIMEVALUE(FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), false ) ) ) ) ) - ( IF( {Event.StartDateTime} < DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')) , 0 , ( ({Event.StartDateTime} - DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}'))) * 100 / ( DAYSBETWEEN( DATETIMEVALUE(FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')), false ) ) ) ) ) ), 8 ) ]% ``` {% hint style="info" %} This formula calculates the width of the Card. Position of Card right side after applying **left** and **width** CSS properties will represent the End Date of Event. Width of the card, thus, represents its duration. {% endhint %} * Change the Value of default existing Card Component to **{Event.Subject}**. * Set its Title to the same value. * Set its CSS Styles to these: ```css width: calc(100% - 24px); padding: 0.25rem 0.5rem 0 0.5rem; font-size: 1.1em; ``` * Add [one more Card Component](/standard-kanban/configure-card/how-to-configure-card-compact-layout#adding-components) of "Icon" type to the left of the previous. * Set its Value to the following formula: ```css utility:FORMULA[ IF( CONTAINS(LOWER({Event.Subject}), 'meeting'), 'groups', IF( OR( CONTAINS(LOWER({Event.Subject}), 'send'), CONTAINS(LOWER({Event.Subject}), 'letter'), CONTAINS(LOWER({Event.Subject}), 'email') ), 'email', IF( CONTAINS(LOWER({Event.Subject}), 'call'), 'call', 'note' ) ) ) ] ``` {% hint style="info" %} This formula sets the icon depending on keywords the subject of Event can contain: * Event with "meeting" word in subject has **utility:groups** icon * Event with "send", "letter" or "email" word has **utility:email** icon * Event with "call" word has **utility:call** icon * Other events have **utility:note** icon {% endhint %} * Set its Title to **{Event.Subject}** * Set its CSS Styles to these: ```css width: 16px; padding: 0.25rem 0 0 0.5rem; box-sizing: content-box; ``` * Add [one more Card Component](/standard-kanban/configure-card/how-to-configure-card-compact-layout#adding-components) of "Text" type below the two previous. * Set its Value to this formula: ``` ◄ FORMULA[FORMAT({Event.StartDateTime},'dd MMM yyyy, HH:mm')] ─ FORMULA[FORMAT({Event.EndDateTime},'dd MMM yyyy, HH:mm')] ► ``` * Set its Title to this formula: ```css Start date: FORMULA[FORMAT({Event.StartDateTime},'dd MMM yyyy, HH:mm')]; end date: FORMULA[FORMAT({Event.EndDateTime},'dd MMM yyyy, HH:mm')] ``` * Set its Handler to this one: * Type = **SObject** * Value = **{$Object.Id}** * Parameters: **id** = **{Event.Id}** * Set its CSS Styles to these: ```css font-size: 0.9em; padding: 0 0.5rem 0.25rem 0.5rem; ``` ### Configure dashboard actions and action groups There are several action groups needed to be created. These groups are listed below with actions they contain. Order of actions in groups is determined by actions indexes: the action with lowest index will be executed first. Refer to proper articles to know how to work with [actions](/components/actions-action-groups/basics/working-with-actions) and [action groups](/components/actions-action-groups/basics/working-with-action-groups). #### "Get Previous Dates" action group * Create Action Group named "Get Previous Dates" and add following actions to it:
IndexNameProperties
1Get Prev Quarter Dates

Type = Define Variable
Execute = With Conditions
Conditions type = Formula
Formula Expression =

AND({$Variables.button} = 'prev', {$Variables.range} = 'quarter')

Variable Type = JSON
Variables JSON =

{
  "from":"FORMULA[ADDMONTHS({$Variables.from}, -3)]",
  "to":"FORMULA[ADDMONTHS({$Variables.to}, -3)]"
}
2Get Prev Year Dates

Type = Define Variable
Execute = With Conditions
Conditions type = Formula
Formula Expression =

AND({$Variables.button} = 'prev', {$Variables.range} = 'year')

Variable Type = JSON
Variables JSON =

{
  "from":"FORMULA[ADDYEARS({$Variables.from}, -1)]",
  "to":"FORMULA[ADDYEARS({$Variables.to}, -1)]"
}
3Get Prev Month Dates

Type = Define Variable
Execute = With Conditions
Conditions type = Formula
Formula Expression =

AND({$Variables.range} = 'month', {$Variables.button} = 'prev')

Variable Type = JSON
Variables JSON =

{
  "from":"FORMULA[ADDMONTHS({$Variables.from}, -1)]",
  "to":"FORMULA[ADDMONTHS({$Variables.to}, -1)]"
}
4Get Prev Week Dates

Type = Define Variable
Execute = With Conditions
Conditions type = Formula
Formula Expression =

AND({$Variables.range} = 'week', {$Variables.button} = 'prev')

Variable Type = JSON
Variables JSON =

{
  "from":"FORMULA[ADDDAYS({$Variables.from}, -7, false)]",
  "to":"FORMULA[ADDDAYS({$Variables.to}, -7, false)]"
}
5Define Column Name

Type = Define Variable
Execute = Always
Variable Type = Text
Variable Name = columnName
Variable Value =

FORMULA[FORMAT({$Variables.from}, 'd MMM yyyy') + ' - ' + FORMATGMT({$Variables.to}-1, 'd MMM yyyy')]
6

Define Day of Week

Type = Define Variable
Execute = Always
Variable Type = Text
Variable Name = dayOfWeek
Variable Value =

FORMULA[INTNUMBER({$Variables.from} - STARTOFWEEK({$Variables.from}))]
#### "Get Next Dates" action group * Create Action Group named "Get Next Dates" and add following actions to it:
IndexNameProperties
1

Get Next Week Dates

Type = Define Variable
Execute = With Conditions
Conditions type = Formula
Formula Expression =

AND({$Variables.range} = 'week', {$Variables.button} = 'next')

Variable Type = JSON
Variables JSON =

{
  "from":"FORMULA[ADDDAYS({$Variables.from}, 7, false)]",
  "to":"FORMULA[ADDDAYS({$Variables.to}, 7, false)]"
}
2

Get Next Quarter Dates

Type = Define Variable
Execute = With Conditions
Conditions type = Formula
Formula Expression =

AND({$Variables.range} = 'quarter', {$Variables.button} = 'next')

Variable Type = JSON
Variables JSON =

{
  "from":"FORMULA[ADDMONTHS({$Variables.from}, 3)]",
  "to":"FORMULA[ADDMONTHS({$Variables.to}, 3)]"
}
3

Get Next Year Dates

Type = Define Variable
Execute = With Conditions
Conditions type = Formula
Formula Expression =

AND({$Variables.range} = 'year', {$Variables.button} = 'next')

Variable Type = JSON
Variables JSON =

{
  "from":"FORMULA[ADDYEARS({$Variables.from},1)]",
  "to":"FORMULA[ADDYEARS({$Variables.to},1)]"
}
4

Get Next Month Dates

Type = Define Variable
Execute = With Conditions
Conditions type = Formula
Formula Expression =

AND({$Variables.range} = 'month', {$Variables.button} = 'next')

Variable Type = JSON
Variables JSON =

{
  "from":"FORMULA[ADDMONTHS({$Variables.from}, 1)]",
  "to":"FORMULA[ADDMONTHS({$Variables.to}, 1)]"
}
5Define Column Name
(this is the same action that was already created for the "Get Previous Dates" action group)
6Define Day of Week
(this is the same action that was already created for the "Get Previous Dates" action group)
#### "Get Date Ranges" action group * Create Action Group named "Get Date Ranges" and add following actions to it:
IndexNameProperties
1

Get Week Dates

Type = Define Variable
Execute = With Conditions
Conditions type = Formula
Formula Expression =

{$Variables.range} = 'week'

Variable Type = JSON
Variables JSON =

{
  "from":"FORMULA[STARTOFWEEK({$System.Date})]",
  "to":"FORMULA[ADDDAYS(STARTOFWEEK({$System.Date}), 7, false)]"
}
2

Get Year Dates

Type = Define Variable
Execute = With Conditions
Conditions type = Formula
Formula Expression =

{$Variables.range} = 'year'

Variable Type = JSON
Variables JSON =

{
  "from":"FORMULA[DATE(YEAR({$System.Date}), 1, 1)]",
  "to":"FORMULA[ADDYEARS(DATE(YEAR({$System.Date}), 1, 1), 1)]"
}
3

Get Month Dates

Type = Define Variable
Execute = With Conditions
Conditions type = Formula
Formula Expression =

{$Variables.range} = 'month'

Variable Type = JSON
Variables JSON =

{
  "from":"FORMULA[DATE(YEAR({$System.Date}), MONTH({$System.Date}), 1)]",
  "to":"FORMULA[ADDMONTHS(DATE(YEAR({$System.Date}), MONTH({$System.Date}), 1), 1)]"
}
4Get Quarter Dates

Type = Define Variable
Execute = With Conditions
Conditions type = Formula
Formula Expression =

{$Variables.range} = 'quarter'

Variable Type = JSON
Variables JSON =

{
  "from":"FORMULA[DATE(YEAR({$System.Date}), IF(MONTH({$System.Date}) >=10, 10, IF(MONTH({$System.Date}) <=3, 1, IF(MONTH({$System.Date}) <=6, 4, 7))), 1)]",
  "to":"FORMULA[ADDMONTHS(DATE(YEAR({$System.Date}), IF(MONTH({$System.Date}) >=10, 10, IF(MONTH({$System.Date}) <=3, 1, IF(MONTH({$System.Date}) <=6, 4, 7))), 1), 3)]"
}
5

Define Column Name

(this is the same action that was already created for the "Get Previous Dates" action group)
6

Define Day of Week

(this is the same action that was already created for the "Get Previous Dates" action group)
#### Configure dashboard buttons and menus * [Add buttons and menu](/standard-kanban/configure-kanban/how-to-add-kanban-buttons-and-menus) to the dashboard: 1. Button\ **Basic configuration:**\ Type = `Icon`\ Title = `Previous {$Variables.range}`\ Icon = `utility:left`\ **Handler configuration:**\ Type = `Action Group`\ Value = `Get Previous Dates`\ Parameters = `variables = {"button":"prev"}`\ Success Handler = `Kanban API -> Refresh Kanbans` 2. Menu\ **Basic configuration:**\ Type = `Button`\ Label = `FORMULA[REPLACE({$Variables.range},SUBSTR(,0,1),UPPER(SUBSTR({$Variables.range},0,1)))]`\ Title = `{$Variables.range}`\ Position = `Right and Top` 3. Button\ **Basic configuration:**\ Type = `Icon`\ Title = `Next {$Variables.range}`\ Icon = `utility:right`\ **Handler configuration:**\ Type = `Action Group`\ Value = `Get Next Dates`\ Parameters = `variables = {"button":"next"}`\ Success Handler = `Kanban API -> Refresh Kanbans` * Add Menu Buttons to the Menu created above and set these properties for them: 1. **Basic Configuration:**\ Type = `Standard`\ Label = `Quarter`\ Title = `Quarter`\ Conditions = `FORMULA[{$Variables.range != 'quarter']`\ **Handler configuration:**\ Type = `Action Group`\ Value = `Get Date Ranges`\ Parameters = `variables = {"range":"quarter"}`\ Success Handler = `Kanban API -> Refresh Kanbans` 2. **Basic Configuration:**\ Type = `Standard`\ Label = `Month`\ Title = `Month`\ Conditions = `FORMULA[{$Variables.range != 'month']`\ **Handler configuration:**\ Type = `Action Group`\ Value = `Get Date Ranges`\ Parameters = `variables = {"range":"month"}`\ Success Handler = `Kanban API -> Refresh Kanbans` 3. **Basic Configuration:**\ Type = `Standard`\ Label = `Year`\ Title = `Year`\ Conditions = `FORMULA[{$Variables.range != 'year']`\ **Handler configuration:**\ Type = `Action Group`\ Value = `Get Date Ranges`\ Parameters = `variables = {"range":"year"}`\ Success Handler = `Kanban API -> Refresh Kanbans` 4. **Basic Configuration:**\ Type = `Standard`\ Label = `Week`\ Title = `Week`\ Conditions = `FORMULA[{$Variables.range != 'week']`\ **Handler configuration:**\ Type = `Action Group`\ Value = `Get Date Ranges`\ Parameters = `variables = {"range":"week"}`\ Success Handler = `Kanban API -> Refresh Kanbans` #### # Demo Example: Cases Dashboard The given Cases Dashboard represents a way to show cases by their reasons, manage them and change their statuses. Here is how this dashboard can look like:
This dashboard shows cases in 5 columns; each column corresponds to one of case statuses. By dragging the case card from one column to another user can easily change its status.\ Left tab bar allows user to display cases corresponding to different reasons. Click on them to apply selected reason to all columns - this acts like tabs or filter. To make a such dashboard administrator should do actions listed below: ### Create new dashboard * Go to [dashboard creation wizard](/standard-kanban/basics/how-to-create-a-standard-kanban) and create new standard dashboard. * Give it a name and description. * Select "White" theme. * Save dashboard and go to Kanban Builder. ### Configure dashboard Set these CSS Styles to Dashboard on Basics Configuration Tab: ```css background-position: bottom center; background-repeat: no-repeat; background-size: 100% auto; background-color: #E6EBE5; ``` Add the **background-image** CSS property and set it to: `url('data:image/jpeg;base64,...')`, where URL is a proper image encoded in base64 format (to embed image into dashboard and to avoid loading it from another source). In this example this image is used:

This image is taken by author of this example and can be used by any person for any purpose, commercial or not, without any restrictions.

Go to [Statistics Configuration](/standard-kanban/configure-kanban/how-to-add-kanban-statistics). Add [the cell](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons#cells) which will overlay unnecessary views selector: * Type = Text * Value = ```clike FORMULA[ IF( OR( ISBLANK({$Variables.SelectedCaseReason}), {$Variables.SelectedCaseReason} = '' ), 'Cases without reason', {$Variables.SelectedCaseReason} cases ) ] ``` Set CSS Styles to this cell: ```css z-index: 1; align-items: center; justify-content: center; display: flex; background-color: #F7F7F7; position: absolute; font-size: 1.5rem; top: 0; left: 0; height: 100%; padding: 0 1.25em; ``` Go to [Variables Configuration](/standard-kanban/using-kanban/how-to-work-with-variables) tab. Add these variables: | # | Variable Name | Variable Value | | - | ------------------ | -------------- | | 1 | SelectedCaseReason | Installation | | 2 | CurrentKanbanId | {$KanBan.Id} | ### Configure columns * Add 5 [columns](/standard-kanban/configure-kanban/working-with-kanban-layout) to the dashboard * Name columns accordingly to the table below * Leave columns widths default ("**auto**") except the column with "**New**" name (set it width to **24%**) * Leave columns "Is Active" checkboxes default (checked) * [Set these properties](/standard-kanban/configure-column/how-to-configure-column-data-source) to all columns: * Data Source Type = **SObject** * Data Source = **Case** * Order = **Case ID, asc** * Set conditions to the columns accordingly to the table below (leave conditions logic empty in all columns):
ColumnField NameOperatorTypeValue
NewCase Reason
Status
Status
Status
Status		equals
not equal to
not equal to
not equal to
not equal to		Formula
Value
Value
Value
Formula		{$Variables.SelectedCaseReason}
Working
Escalated
Closed
Active
ActiveCase Reason
Status		equals
equals		Formula
Formula		{$Variables.SelectedCaseReason}
Active
EscalatedCase Reason
Status		equals
equals		Formula
Value		{$Variables.SelectedCaseReason}
Escalated
WorkingCase Reason
Status		equals
equals		Formula
Value		{$Variables.SelectedCaseReason}
Working
ClosedCase Reason
Status		equals
equals		Formula
Value		{$Variables.SelectedCaseReason}
Closed
* Add [custom attribute](/standard-kanban/configure-column/how-to-set-and-use-column-custom-attributes) to each column with name = **Status** and value equal to column name * Set the following styles for column bodies on Body Configuration tab:
#ColumnColumn Body CSS styles
1New
height: calc(100% - (28px + 39px + 20px));
left: 64px;
width: calc(100% - 94px);
top: calc(28px + 39px);
position: absolute;
margin: 0 10px 20px 20px;
border-right: 0px none;
background: rgba(255,255,255,0.3);
border-radius: 0 0 4px 4px;
2Active
border-radius: 0 0 4px 4px;
background: rgba(255,255,255,0.3);
border-right: 0px none;
margin: 0 10px 20px 10px;
3Escalated
4Working
5Closed
border-radius: 0 0 4px 4px;
background: rgba(255,255,255,0.3);
border-right: 0px none;
margin: 0 20px 20px 10px;
* Set these styles to column headers on the Header Configuration tab:
#ColumnColumn Header CSS styles
1New
height: 100%;
max-width: 64px;
width: 64px;
padding: 0;
border-bottom: 0;
cursor: pointer;
2Active
border-radius: 4px 4px 0 0;
border-right: 0px none;
background-color: rgba(255,255,255,0.3);
border-bottom: 0px none;
margin: 20px 10px 0 10px;
border-top: 8px solid #7799DD;
padding: 0.5rem 0.75rem 0.5rem;
3Escalated
border-radius: 4px 4px 0 0;
border-right: 0px none;
background-color: rgba(255,255,255,0.3);
border-bottom: 0px none;
margin: 20px 10px 0 10px;
border-top: 8px solid #F73B00;
padding: 0.5rem 0.75rem 0.5rem;
4Working
border-radius: 4px 4px 0 0;
border-right: 0px none;
background-color: rgba(255,255,255,0.3);
border-bottom: 0px none;
margin: 20px 10px 0 10px;
border-top: 8px solid #F88D00;
padding: 0.5rem 0.75rem 0.5rem;
5Closed
border-radius: 4px 4px 0 0;
border-right: 0px none;
background-color: rgba(255,255,255,0.3);
border-bottom: 0px none;
margin: 20px 20px 0 10px;
border-top: 8px solid #04A300;
padding: 0.5rem 0.75rem 0.5rem;
* Set these styles to the footer of "New" column on the Footer Configuration tab: ```css position: absolute; top: 20px; left: 84px; width: calc(100% - 94px); height: 47px; border-radius: 4px 4px 0 0; border-right: 0px none; background-color: rgba(255,255,255,0.3); border-bottom: 0px none; border-top: 8px solid #CCCCCC; padding: 0.5rem 0.75rem 0.5rem; ``` * Add [one row with one cell](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons#rows) to the footer of "New" column. Set these properties to the cell: * Type = **Text** * CSS Styles = **Font-size: 1rem;** * Set the cell Value to the following formula: ```clike New FORMULA[ IF( OR( ISBLANK({$Variables.SelectedCaseReason}), {$Variables.SelectedCaseReason} = '' ), 'Cases without reason', {$Variables.SelectedCaseReason} cases ) ] ``` * Add the following cells with Type = **Icon** to the header of "New" column. Set these properties to them:
#ValueTitleCSS StylesHandlers
1utility:setupCases with "Installation" reason.
top: 0;
color: FORMULA[IF({$Variables.SelectedCaseReason} = 'Installation',#FFFFFF,#7799DD)];
border-bottom: 0.125px solid #DDDBDA;
transform-origin: top left;
transform: scale(2);
align-items: center;
justify-content: center;
display: flex;
height: 32px;
width: 32px;
position: absolute;
background: FORMULA[IF({$Variables.SelectedCaseReason} = 'Installation',#7799DD,#FFFFFF)];
margin-left: -1px;

Cell handler:

  • Type = Kanban API
  • Value = Update Variables

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}
    • variables = {"SelectedCaseReason":"Installation"}

Success handler:

  • Type = Kanban API
  • Value = Refresh Kanbans

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}
2utility:custom_appsCases with "Equipment Complexity" reason.
margin-left: -1px;
background: FORMULA[IF({$Variables.SelectedCaseReason} = 'Equipment Complexity',#7799DD,#FFFFFF)];
position: absolute;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
transform: scale(2);
transform-origin: top left;
border-bottom: 0.125px solid #DDDBDA;
color: FORMULA[IF({$Variables.SelectedCaseReason} = 'Equipment Complexity',#FFFFFF,#7799DD)];
top: 63px;

Cell handler:

  • Type = Kanban API
  • Value = Update Variables

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}
    • variables = {"SelectedCaseReason":"Equipment Complexity"}

Success handler:

  • Type = Kanban API
  • Value = Refresh Kanbans

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}
3utility:graphCases with "Performance" reason.
position: absolute;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
transform: scale(2);
transform-origin: top left;
border-bottom: 0.125px solid #DDDBDA;
color: FORMULA[IF({$Variables.SelectedCaseReason} = 'Performance',#FFFFFF,#7799DD)];
top: 126px;
background: FORMULA[IF({$Variables.SelectedCaseReason} = 'Performance',#7799DD,#FFFFFF)];
margin-left: -1px;

Cell handler:

  • Type = Kanban API
  • Value = Update Variables

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}
    • variables = {"SelectedCaseReason":"Performance"}

Success handler:

  • Type = Kanban API
  • Value = Refresh Kanbans

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}
4utility:warningCases with "Breakdown" reason.
margin-left: -1px;
background: FORMULA[IF({$Variables.SelectedCaseReason} = 'Breakdown',#7799DD,#FFFFFF)];
top: 189px;
color: FORMULA[IF({$Variables.SelectedCaseReason} = 'Breakdown',#FFFFFF,#7799DD)];
border-bottom: 0.125px solid #DDDBDA;
transform-origin: top left;
transform: scale(2);
align-items: center;
justify-content: center;
display: flex;
height: 32px;
width: 32px;
position: absolute;

Cell handler:

  • Type = Kanban API
  • Value = Update Variables

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}
    • variables = {"SelectedCaseReason":"Breakdown"}

Success handler:

  • Type = Kanban API
  • Value = Refresh Kanbans

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}
5utility:paletteCases with "Equipment Design" reason.
margin-left: -1px;
background: FORMULA[IF({$Variables.SelectedCaseReason} = 'Equipment Design',#7799DD,#FFFFFF)];
top: 252px;
color: FORMULA[IF({$Variables.SelectedCaseReason} = 'Equipment Design',#FFFFFF,#7799DD)];
border-bottom: 0.125px solid #DDDBDA;
transform-origin: top left;
transform: scale(2);
align-items: center;
justify-content: center;
display: flex;
height: 32px;
width: 32px;
position: absolute;

Cell handler:

  • Type = Kanban API
  • Value = Update Variables

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}
    • variables = {"SelectedCaseReason":"Equipment Design"}

Success handler:

  • Type = Kanban API
  • Value = Refresh Kanbans

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}
6utility:commentsCases with "Feedback" reason.
margin-left: -1px;
background: FORMULA[IF({$Variables.SelectedCaseReason} = 'Feedback',#7799DD,#FFFFFF)];
top: 315px;
color: FORMULA[IF({$Variables.SelectedCaseReason} = 'Feedback',#FFFFFF,#7799DD)];
border-bottom: 0.125px solid #DDDBDA;
transform-origin: top left;
transform: scale(2);
align-items: center;
justify-content: center;
display: flex;
height: 32px;
width: 32px;
position: absolute;

Cell handler:

  • Type = Kanban API
  • Value = Update Variables

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}
    • variables = {"SelectedCaseReason":"Feedback"}

Success handler:

  • Type = Kanban API
  • Value = Refresh Kanbans

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}
7utility:worldCases with "Other" reason.
margin-left: -1px;
background: FORMULA[IF({$Variables.SelectedCaseReason} = 'Other',#7799DD,#FFFFFF)];
top: 378px;
color: FORMULA[IF({$Variables.SelectedCaseReason} = 'Other',#FFFFFF,#7799DD)];
border-bottom: 0.125px solid #DDDBDA;
transform-origin: top left;
transform: scale(2);
align-items: center;
justify-content: center;
display: flex;
height: 32px;
width: 32px;
position: absolute;

Cell handler:

  • Type = Kanban API
  • Value = Update Variables

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}
    • variables = {"SelectedCaseReason":"Other"}

Success handler:

  • Type = Kanban API
  • Value = Refresh Kanbans

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}
8utility:errorCases without reason set.
margin-left: -1px;
background: FORMULA[IF(OR(ISBLANK({$Variables.SelectedCaseReason}), {$Variables.SelectedCaseReason} = ''),#7799DD,#FFFFFF)];
top: 441px;
position: absolute;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
transform: scale(2);
transform-origin: top left;
border-bottom: 0.125px solid #DDDBDA;
color: FORMULA[IF(OR(ISBLANK({$Variables.SelectedCaseReason}), {$Variables.SelectedCaseReason} = ''),#FFFFFF,#7799DD)];

Cell handler:

  • Type = Kanban API
  • Value = Update Variables

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}
    • variables = {"SelectedCaseReason":null}

Success handler:

  • Type = Kanban API
  • Value = Refresh Kanbans

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}
### Configure Card * [Add 1 card](/standard-kanban/configure-kanban/working-with-kanban-layout) to dashboard * Set Data Source Type to "**Case**" * Set [card layout](/standard-kanban/configure-card/how-to-configure-card-layout) to necessary type. In this example it is set to **SObject** and Record ID is set to **{**Case.Id}:
* Set card layout header to show the number of active Case record:
* Open [Card Compact Layout editor](/standard-kanban/configure-card/how-to-configure-card-compact-layout) and add these styles to the Card settings: ```css padding-left: 44px; ``` * By default Card Compact Layout contains one component of text type; this component contains Record ID. Click on it and change its Value to **{Case.CaseNumber} - {Case.SuppliedName}** * Leave its Title empty * Set its width to **100** (leave default) * Leave Handler and Styles empty * Add Icon component #2 at the left of the previous * Set its Value to the following formula (it will dynamically set icon depending on case priority): ```clike FORMULA[ CASE( {Case.Priority}, low, 'utility:like', medium, 'utility:touch_action', high, 'utility:dislike', 'utility:waits' ) ] ``` * Set its Title to the following formula (it will dynamically change the icon tooltip depending on case priority): ```clike Priority FORMULA[CASE({Case.Priority}, low, ': low', medium, ': medium', high, ': high', 'not set')] ``` * Do not set handlers * Set CSS Styles to these: ```css width:24px; background-color:FORMULA[CASE({Case.Priority}, low, #04A300, medium, #F88D00, high, #F73B00, #7799DD)]; color:#FFFFFF; border-radius:24px; height:24px; display:flex; justify-content:center; align-items:center; top:50%; position:absolute; margin-top:-12px; left:10px; ``` * Add text component #3 below * Set its value to **Reason: {Case.Reason}** * Do not set its Title, handlers and styles
* Add text component #4 below * Set its value to **Type: {Case.Type}** * Do not set its Title, handlers and styles\ * Add text component #5 below * Set its value to **Origin: {Case.Origin}** * Do not set its Title, handlers and styles\ * Add text component #6 below * Set its value to `FORMULA[IF(ISBLANK({Case.ClosedDate}), '',Closed: {Case.ClosedDate})]` * Do not set its Title, handlers and styles ### Configure Column Junctions * Set [column junctions](/standard-kanban/configure-card/configuring-card-movement-and-column-junctions) for card on each column: * Drag-n-drop allowed to ALL columns * Drop behavior for source column: Remove card * Drop behavior for target column: Refresh ### Configure Card Actions To add a sense to Cards dragging [some actions](/standard-kanban/configure-card/configuring-card-actions) are necessary. In this example action will be the same for all columns, so, no need to configure them separately. Click on card and add a new action with these properties: * Name = **Update Case Status** * Type = **Field Update** * Execute = **Always** * Status = **Active** * Context Object Type = **Case** In the Field Update Settings section configure this: * Object Name = **Case** * Fields: * Name = **Status** * Value = **{$TargetColumn.a\_\_Status}** * Conditions: * **Case ID eqials {case.id}** # Basics
How to create a standard KanbanHow to Create a Standard Kanban
How to open (edit) a Kanban in BuilderHow to Open a Kanban in Builder (Edit)
How to share a KanbanHow to Share a Kanban
How to clone a KanbanHow to Clone a Kanban
# How to Create a Standard Kanban Open "Kanbans" tab and click “New” button in the upper right corner of the page to open Kanban creation wizard: At the first step select Standard kanban type. * Click "Next" button to go to second step of wizard * Select Kanban Color Theme * Enter Kanban name * Populate description (if it is necessary): * Click "Next" button and go to step 3. At the next step you can set up initial Kanban configuration. **For Standard Kanban:** * Select a Source Object * Then select a field which values will be represented by columns and updated by card dragging (if you use default actions) in "Group By" picklist * Optionally select a field in "Summarize by" if you want kanban to show totals calculated for proper values in the footer of each column: * Click "Next" button. * At the next step select necessary values of "Group By" field in the "Available Values" section and click "►" button to add them to the "Add columns for" section. Select all of them, or those which should be represented in columns: * Rearrange them as you wish with "▲" and "▼" buttons. Note: topmost selected value will correspond to leftmost column: * Leave "Allow users to move cards between columns" toggler on if you want to turn on card dragging and pre-configure kanban with standard action that will allow cards to be updated correspondingly to columns. * Click "Next" button * Select fields to be shown on card compact layout and rearrange them, if necessary. {% hint style="info" %} Note: topmost field will be used as card header, that will be always visible on card layout (actual for collapsible cards) {% endhint %} {% hint style="warning" %} Note: you should select at least one field, and not more than 12. But you can add more when [configure card](/standard-kanban/configure-card) manually later. {% endhint %} * If you want to show field names as labels in the card, leave "Display field labels on Kanban cards" toggler on, otherwise turn it off to show only field values. * Click "Next" button * At the following step you can ask AI to generate color ideas. See [example page](/get-started/how-to-build-a-simple-kanban-using-creation-wizard-abilities) to know more. * At the last step you can review your Kanban brief summary information * Click "Save" or "Back" button (if you want to correct options): * If you do not want to open new kanban in the advanced editor, you can turn "Launch Advanced Kanban Builder After Wizard Completion" toggler off - in this case you will go to kanbans tab after saving. * If you leave toggler on, after clicking "Save" you will go to standard Kanban editor: Columns with conditions will be set correspondingly to the creation wizard: Card will have elements added correspondingly to the creation wizard. First (topmost) of them will be used as card header and has no label by default. Other fields will be added (with or without labels) corresponding to field name: Card also will have main layout set with **body**, header **title**, and **footer button** with standard "View record" handler: {% hint style="warning" %} Note: [card dragging](/standard-kanban/configure-card/configuring-card-movement-and-column-junctions) will not be automatically set, if you turn off "Allow users to move cards between columns" toggler. {% endhint %} # How to Create a Child Kanban Open "Kanbans" tab and click “New” button in the upper right corner of the page to open Kanban creation wizard: At the first step select kanban type. If you want to insert a kanban into some record page and filter cards by this record (e.g., show only cases related for an Account you look at), select a Child Kanban. {% hint style="info" %} The difference between Standard and Child kanban is that Child kanban offers to add some code in column conditions that allow this kanban to automatically display records related to some other record only - this is good for integrating Kanban into some object's Record page. {% endhint %} * Click "Next" button to go to second step of wizard * Select Kanban Color Theme * Enter Kanban name * Populate description (if it is necessary): * Click "Next" button and go to step 3. At the next step you can set up initial Kanban configuration. * Select a Parent Object (which record page kanban will be added into) * Then select a Child Object (which records will be represented by kanban cards) * Then select a field which values will be represented by columns and updated by card dragging (if you use default actions) in "Group By" picklist * Optionally select a field in "Summarize by" if you want kanban to show totals calculated for proper values in the footer of each column: * Click "Next" button. * At the next step select necessary values of "Group By" field in the "Available Values" section and click "►" button to add them to the "Add columns for" section. Select all of them, or those which should be represented in columns: * Rearrange them as you wish with "▲" and "▼" buttons. Note: topmost selected value will correspond to leftmost column: * Leave "Allow users to move cards between columns" toggler on if you want to turn on card dragging and pre-configure kanban with standard action that will allow cards to be updated correspondingly to columns. * Click "Next" button * Select fields to be shown on card compact layout and rearrange them, if necessary. {% hint style="info" %} Note: topmost field will be used as card header, that will be always visible on card layout (actual for collapsible cards) {% endhint %} {% hint style="warning" %} Note: you should select at least one field, and not more than 12. But you can add more when [configure card](/standard-kanban/configure-card) manually later. {% endhint %} * If you want to show field names as labels in the card, leave "Display field labels on Kanban cards" toggler on, otherwise turn it off to show only field values. * Click "Next" button * At the following step you can ask AI to generate color ideas. See [example page](/get-started/how-to-build-a-simple-kanban-using-creation-wizard-abilities) to know more. * At the last step you can review your Kanban brief summary information * Click "Save" or "Back" button (if you want to correct options): {% hint style="info" %} To make child kanban working as needed, you need to incorporate it into the Lightning Page of Parent Object record. See [proper article](/standard-kanban/basics/how-to-incorporate-a-child-kanban-into-a-lightning-page) to know how to do this. {% endhint %} * If you do not want to open new kanban in the advanced editor, you can turn "Launch Advanced Kanban Builder After Wizard Completion" toggler off - in this case you will go to kanbans tab after saving. * If you leave toggler on, after clicking "Save" you will go to standard Kanban editor: Columns with conditions will be set correspondingly to the creation wizard: Card will have elements added correspondingly to the creation wizard. First (topmost) of them will be used as card header and has no label by default. Other fields will be added (with or without labels) corresponding to field name: Card also will have main layout set with **body**, header **title**, and **footer button** with standard "View record" handler: {% hint style="warning" %} Note: [card dragging](/standard-kanban/configure-card/configuring-card-movement-and-column-junctions) will not be automatically set, if you turn off "Allow users to move cards between columns" toggler. {% endhint %} # How to Incorporate a Child Kanban into a Lightning Page * Go to proper Lightning Page (e.g., some object Record page) and open Builder (in order to create or edit page layout): 1. Open any Account record in Salesforce. 2. Click the Setup icon (![](https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FusH0Iipf0pkyDT2AI0dZ%2Fimage.png?alt=media\&token=d7fc1246-f7e0-436b-add1-501a80c5d931)) and select "Edit Page" to open the Lightning App Builder. * Find "FlexiKanban" component in the Components list at the left sidebar and drag it to desired available placeholder: * After dragging select the added component (it may become selected automatically) * Select necessary **Kanban** in the respective field * Enter variables in **JSON** format, if necessary * Set **CSS Styles**, if needed * Set **filters** to manage component visibility, if needed * Click "**Save**" button # How to Open a Kanban in Builder (Edit) There are two ways to edit created kanban: * At the kanbans list page: click button to open submenu, and select "Edit" option: * At the top of the opened kanban: click button to open submenu, and select "Edit" option: # How to Share a Kanban Open Kanban builder of the required kanban: * Open "Actions" menu at the top of builder. * Click on "Open Sharing Rules" item. * New page "Sharing Detail" for current kanban will be opened. * Click "Add" button. * "New Sharing" page will be opened where user (administrator) can specify **new sharing** and **access level:** {% hint style="success" %} Administrator can add different types of users, groups, roles, etc. at the same time to "Share With" list. {% endhint %} * Save new sharing rules then save current kanban. # How to Clone a Kanban Go to Kanban editor, open "Actions" menu and click "Clone" item. Dialog popup will be opened. You can change the name of the cloned kanban. Click "Clone" button. New dialog popup will be opened:
* Click on "Cancel" button and continue to work with current kanban. * Click on "Open Cloned KanBan" button and start to work with cloned kanban: # Configure Kanban
Working with Kanban layoutWorking with Kanban Layout
How to configure Kanban basic propertiesHow to Configure Kanban Basic Properties
How to configure Kanban custom filtersHow to Configure Kanban Custom Filters
How to configure Kanban quick filtersHow to Configure Kanban Quick Filters
How to add Kanban statisticsHow to Add Kanban Statistics
How to configure variablesHow to Configure Variables
How to add Kanban buttons and menusHow to add Kanban Buttons and Menus
# Working with Kanban Layout Open Kanban editor, drag "Column" element to "KanBan Columns" area and drag "Card" element to "KanBan Cards" area. Click on Card to open "Card properties" in the right sidebar. There are several obligatory properties for card: Name (1), Data source type (2), Compact Layout (3). See these articles to know how to configure cards. Click on Column to open "Column properties" and complete obligatory ones: Name (4), Data Source Type (5), Config (6). Location of column can be changed by clicking arrows (7) on the top column. See these articles to know how to configure other column properties. Configure necessary [Column Junctions](/standard-kanban/configure-card/configuring-card-movement-and-column-junctions) (8) and [Actions](/standard-kanban/configure-card/configuring-card-actions) (9). #### On a kanban, cards and columns can be cloned or deleted in different ways: 1. Select proper card (column) and click button at the top of kanban builder. 2. Click on icon at right corner of column header. 3. Click the right mouse button to open the context menu of the selected column or card. Select proper option: # How to Configure Kanban Basic Properties Go to "**KanBan Properties**" by clicking anywhere out of column header, group header or cards. Click "**Edit**" link next to "**Config**" label at the right sidebar. Kanban config dialog popup will open. Go to "Basic Configuration" tab here. * Populate "**Title**" field (1, optional) and "**Icon"** (2, optional). After saving, icon and title will be shown in top left corner of kanban (see image below). * Configure **Kanban**, **Header** and **Title CSS styles** (5). * Specify **"Inline CSS Styles"** (6) - there you can add any custom CSS if necessary. Moreover, merge fields and formulas are supported there! * Check **"Track History"** (3) if you want to see history of changes on the kanban view (in [debug console](/standard-kanban/using-kanban/how-to-debug-a-kanban)). * Turn on "**Synchronous Scrolling"** (4) if you want to have columns be scrolled together. Useful, e.g., if you try to make something table-like. * Turn on "**Show** **Search Input"** (7). If shown, it allows user to search a part of text through all displayed kanban elements. {% hint style="success" %} * "**Icons Library**" link can help you find an appropriate icon. * Icon name should be typed with icon category and a colon (e.g. action:edit). * If you don't populate title, kanban name will be shown instead. {% endhint %} Apply (8) changes in the Kanban config. Popup will be closed. Then save whole Kanban to get all changes applied: Close kanban builder to see applied title and icon: # How to Configure Kanban Custom Filters Custom filters are suitable for situations when data source object contains a lot of fields and they obstruct users to work with necessary ones. Kanban admin can add some custom filters which will contain only fields that are necessary for users. This is only one difference from main filters. Open **Kanban** **Config** and go to "**Filters Panel Configuration**" tab. Here you can see some useful options: * "**Hide Filters Panel**" will allow you to prevent "Filters" button and panel (see picture at the end of this article) from being shown on kanban at all. Useful sometimes if you do not want to allow users do something with filters. * "**Hide Templates Men**u" will allow you to hide "Filter Templates" button and proper feature if you do not want users to work with it. * ```
``` Expand "Custom Filters Configurations (Optional)" section. Click "+ Add filter" button to display a filter form. Set the filter properties: * **Label** - required, will be shown to user in Custom Filters. * **Source Object** - Contains list of Data Source objects used in the current kanban. If there is only one Source Object, it will be pre-selected. * **Custom Filter Fields** - will be displayed after Source Object is selected. By default it contains no fields. Click Search button ("Lens" icon) to select and add field(s):
Leave "Apply to all columns" checkbox checked to let filter be applicable to all columns that have the same Source Object. Uncheck it to select which columns will be filtered by this filter (other will be shown without filtration):
* Click "**Apply**" button in the "Add filter" form to keep selection. Filter will be displayed as a small card:
* This card will show a filter label, selected fields and columns. This filter can be edited (a pencil icon) or deleted (recycle bin icon). * Click "Apply" button in the configuration popup bottom to save filters and other changes in kanban config. Do not forget also click "Save" button for the whole kanban builder. Custom filters will be selectable in the ["Filters" panel](/standard-kanban/using-kanban/how-to-work-with-filters-and-orders) when adding conditions:
And only fields that were configured will be available to select:
# How to Configure Kanban Quick Filters Quick Filters are pre-set filters that are displayed to user directly in the kanban and are available without interacting with Filters sidebar. Quick Filters have the following features: * they always work together with each other, joined by logical "AND". This means when user applies two or more Quick Filters, all of them will be applied and cards matching all of them will be shown. * they work together with main and custom Filters (which are shown in the Filters Panel), joined with them by logical "AND". * they have no "is null / is not null" operators available to configure. They have "include empty" checkbox instead. This checkbox allows to filter by empty values at the same time as by set ones, and empty values will be searched together with specified joined by logical "OR". {% hint style="info" %} E.g., filtering by "Amount < 1000" with "include empty" checked will find cards for records where field "Amount" is less than 1000 or is blank at all Note: Quick Filters for checkboxes (boolean type fields) have no "include empty" checkbox. {% endhint %} Open **Kanban** **Config** and go to "**Quick Filters Configuration**" tab. Here you can see some options:
**Position**\ There are two control layout options available:\ \&#xNAN;*Heade*r: Filters are displayed in the top panel of the kanban (in the same panel where the control buttons and search bar are displayed).\ \&#xNAN;*Highlights panel*: The panel is located below the header, directly above the working columns. This option is selected by default. **Use Apply Button** checkbox\ The system supports two filter activation types:\ \&#xNAN;*Instant*: data is updated automatically whenever filter values are changed.\ \&#xNAN;*Manual*: filtering is activated only after user confirms it by clicking "Apply" button. This mode is recommended when there is a lot of cards shown to reduce the system load and avoid unnecessary reloads. **Quick Filters Fields.**\ Select field which kanban should be filtered by when use quick filters: * Click Add Filter button and fill in the appropriate fields in the proposed form:
* Select a source object which the filter applies to. If the Kanban columns are based on the one object, it will be pre-selected. * Select **Source Field** which filtering will be performed by. * **Custom Label** - specify the text to be displayed in the filter interface. * Select proper **operator.** * Checkbox "**Apply to all columns**" is checked by default . If you need to customize individual columns (exclude some from the filter), uncheck it before saving and select necessary columns:
Click "**Apply**" to add the filter to the list of active filters. Finally click "**Apply**" button of the whole popup to save all changes in kanban configuration:
Quick Filters on the kanban:
# How to Add Kanban Statistics Kanban statistics is the content shown in the middle of the Kanban top bar: It consists of elements (called "cells") that can have "icon", "text", "link" or "menu" type. By default statistics cells look like simple parts of text or icons. * To configure the statistics go to Kanban Properties and click "Edit" link next to "Statistics" label. * To add a cell click on "+" button. To know how to work with cells, see [Configuring cells](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons#cells) article. Populate necessary properties of the cells and click "Apply" button to save changes. Then save the whole kanban: # How to Configure Variables Variables are the user defined fields that: * can have any desirable name * can have value of String type * can be inserted anywhere as Merge field * can be updated by Actions * are initialized with initial values when Kanban page is loaded or reloaded * are stored in memory and do not changed when Kanban is refreshed by Kanban API or "Refresh Kanban" button (and this is a perfect tool to dynamically change a lot of Kanban properties) Variables are configured in the proper section of Kanban Properties sidebar. Click "edit" link to show a proper popup. Click "" button to add variables: Enter variable Name and Value. Value can be any text, Merge Field or Formula. {% hint style="warning" %} Notes: * Variable Name can not contain special symbols. * Variable Name in some cases will be transformed to lowercase by system. No problem, variable names are not case sensitive. {% endhint %} Save variables. After being variables will be listed in "Variables" section: Save dashboard to store changes. After dashboard has been saved variables will be available in Formula Builder to select: To see what values are stored in the variables, and manipulate with them, user can open a [Debug Console](/standard-kanban/using-kanban/how-to-debug-a-kanban) on Kanban. To know how to work with variables [see proper article](/standard-kanban/using-kanban/how-to-work-with-variables). # How to Configure Events Events provide additional abilities for Kanban. Events are configured in the proper section of [Kanban Properties](/standard-kanban/configure-kanban/how-to-configure-kanban-basic-properties) sidebar. Click "edit" link to show a proper popup: Click icon to add event, select type of event and configure proper [handler](/standard-kanban/tools/configuring-handlers): ### Event types: * **Before Load** - occurs before Kanban has been loaded * **After Load** - occurs after Kanban has been loaded * **View Changed** - occurs when user selects new [view](/standard-kanban/using-kanban/how-to-work-with-filters-and-orders#manage-filters-and-orders) # How to add Kanban Buttons and Menus Custom buttons (and drop-down menus) can be shown at the top of your Kanban board. They add interactivity. To configure them, open Kanban Properties sidebar and click "Edit" in the "Buttons" section: To add a button click on "Add Button". See [proper article ](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons)about buttons configuration. To add a menu click on "Add Menu". Menu is a way to aggregate buttons into dropdown blocks of submenu items. See how to configure menu in the same article. After being added, buttons and menus will be listed in "Buttons" section: # Configure Column
How to configure Column PropertiesHow to Сonfigure Column Properties
How to set Column Groups
How to set and use Column Custom Attributes
How to configure Column Data Source
How to work with Related Objects
How to configure Column Header
How to configure Column Body
How to configure Column Footer
How to configure Column Container and Filters
# How to Сonfigure Column Properties Click on column header to open column properties in right sidebar. Enter column name into proper field: {% hint style="success" %} Name can contain: * static text * merge fields * formulas {% endhint %} On the next step you can [add this column to group](/standard-kanban/configure-column/how-to-set-column-groups). Set width of column, if necessary. When checkbox "is Active" is unchecked a column is invisible in dashboard. This option is useful if you want temporary hide a column or you need a [helping column for some purposes](/standard-kanban/howtos-and-best-practices/what-inactive-column-can-be-used-for). You can add any description to a column. {% hint style="success" %} Description can be used in dashboard via merge fields. {% endhint %} # How to Set Column Groups Columns in Kanban Dashboard can be put into groups. {% hint style="info" %} This is not required. Groups are commonly used for visual and informational purposes. {% endhint %} To manage groups on your dashboard you need to select one of columns (click on column header). Group form will be shown in sidebar. Select a group which current column will belong to or click "new" link to create a new group: ### Adding new group After clicking "new" link a "Create new group" dialog popup will appear. You required to give group a name and you may change group columns set and order: Click "Create" button to apply changes. New group will be created and selected: {% hint style="warning" %} Note: if you select non-neighbor columns to be in the group, but they will be placed together. {% endhint %} ### Adding or moving column to existing group There are two ways to do this: 1. Select a column (belonging to any group or not). Then select a group in the "Group" picklist in the sidebar: The column will be added to selected group and moved to the last position in it: 2. Click a proper group header to see Group Properties sidebar. Move columns in the column picker to "Columns in Group" section: ### Removing column from the group There are three ways to do this: 1. Select a column. Select "--None--" in the "Group" picklist: Column will be moved out of group to the first position after it: 2. Click a proper group header to see Group Properties sidebar. Remove columns in the column picker from "Columns in Group" section: 3. Delete a group without deleting columns (see below). ### Deleting groups To delete a group select it by clicking a group header and click "Delete" button on the toolbar: Or click "Delete Group" button at the group header: A dialog popup will appear. Select an appropriate option and click "OK" button: If you select "Delete group and all it's nested columns", a whole group and columns that belong to it will be deleted. If you delete only group, it's columns will remain on the same positions on dashboard. ### Configuring groups Select a group and click "edit" link near the "Config" label: An "Edit Group Config" dialog popup will be shown. Select "Header Group Configuration" tab: * Set CSS styles of group header and container. * Check "Collapsible?" to give a group proper ability. * "Collapsed" checkbox will be shown only if "Collapsible?" is checked and allows to set default column state (collapsed or not) Add Cells: * Select Type (text/link/icon/menu). * Set ID, Value, CSS styles. * Configure Handler, if necessary. * Click "Apply" to save changes in group configuration and save dashboard. Select "Filters Configuration" tab: * Select filtering: * Allowed - column can be filtered by both default (system) data sources and custom filters * Allowed only Default Sources - column can be filtered only by default (system) data sources * Allowed only Custom Sources - column can be filtered only by custom filters * Click "Apply" button to save changes in group configuration and save dashboard. # How to Set and Use Column Custom Attributes Custom attributes can be used as additional custom fields of column. You can use them in merge fields in any place where column is available as context object ($Column, $SourceColumn, $TargetColumn). Go to "Custom Attributes" section of column properties at the right sidebar. Click "add" link, fill in fields "Name" and "Value": You can add any number of custom attributes with unique names: {% hint style="danger" %} * Merge fields are not allowed to be used in custom attributes - they will not be calculated and may cause errors. * Custom Attribute name must not contain spaces, non-latin letters and special symbols * Custom Attributes names must be unique at the same column {% endhint %} Save current dashboard. After saving custom attributes will be available for current column context object: Custom attributes should have "a\_\_" prefix to be used in merge fields: {% hint style="info" %} By default, when you create a kanban in the wizard and turn on "Allow users to move cards between columns", an application adds a Custom Attribute with "setValueTo" name. This attribute is used in the Action that is triggered by card movement Values of this Attribute correspond to field values selected to add columns. {% endhint %} # How to configure Column Data Source Select a column (click on its header). Go to "Data" section of column properties at the right sidebar and click on link "edit". Column Data Source config dialog popup will open. Select "Data Source Type": ### SObject Data Source "SObject" Data Source is preselected: Select Data Source. When you select data source additional fields will be displayed: * **"Order"** picklist contains fields of chosen data source object. This option helps you to sort cards in column. * Check **"Ignore Permissions"** checkbox to show all cards in column (in spite of user's account permissions). * **"Page Size"** is number of cards shown in a column by default and additionally loaded per each scroll (one page). * **"Preload Pages"** is number of pages that are loaded by system automatically one by one. Loading progress will be indicated with a spinner around the badge showing number of cards: {% hint style="success" %} reload several pages with small number of cards per each can save server resources (Salesforce limits) and can be useful when internet connection is slow. {% endhint %} When you select data source additional tabs will be displayed: * Conditions * Related Objects * Push Topics ### Conditions To configure condition for current column click "Add Condition". Row with new condition form will be shown. Click button: Click icon to open "Select Field" dialog popup. Choose field and click "Apply": After it you can select "Operator", "Type" and "Value" for condition. To copy, paste and apply conditions JSON click the proper button (for one condition, for all conditions). Configure "Logic" if needed: {% hint style="success" %} Logic "All conditions combined with AND operators" will be applied by default if not configured. {% endhint %} ### Related Objects Configure [Related Objects](/standard-kanban/configure-column/how-to-work-with-related-objects) if necessary: ### Apex Class Data Source In some cases Apex Class should be required - e.g., when records from several objects need to be shown. * Select "Apex Class" as Data source type * Find necessary Apex Class in the proper lookup. Note, that your organization should have necessary Apex Classes deployed * Set parameters for this class in JSON format ### Push Topics {% hint style="info" %} Push Topics allow system generate special push notifications when some fields in some object records are created and/or updated. Push Topics are created globally, so, they can be subscribed by any other columns in any dashboard. Push technology, also called the publish/subscribe model, transfers information that is initiated from a server to the client. It will help you to follow the changes in this column. {% endhint %} **To create a Push topic** click "Create Push Topic" button and set Name, Query and necessary notifications: * Query should be written in SOQL syntax. List fields which changes you want to subscribe to. * Check proper checkboxes to push notifications on records creation and/or update. **To subscribe to existing Push topic** click "Subscribe on Push Topic" button. * Select Push Topic in lookup. * Select "Source ID Field" from the Push Topic source object, that represents the column source object record ID, * choose period "How to handle events", * select behavior of "Card compact layout" and "Card Layout". {% hint style="info" %} Behavior of **Card Layout** can be: * Hide - if any card layout has been opened, it will be closed * Refresh - if any card layout has been opened, it will be refreshed * Not selected - nothing will happen. {% endhint %} {% hint style="warning" %} Currently behavior of **Card Compact Layout** can be "Refresh" only. {% endhint %} As soon as a Push Topic is configured, the system starts evaluating record creates, updates, deletes, and undeletes for matches. Whenever there’s a match, a new notification is generated. # How to work with Related Objects Related objects are objects referred to the current one via their lookup fields (or another similar way). Because of many records belong to related objects can be linked to the same record of current object, we should use only one of them. We need to specify: * related object itself * conditions that should restrict related object records * sorting order The top first record from the related object that match condition will be used as a Data Source. ### Configure Related Object as column Data Source Go to ["Data Source Configuration"](/standard-kanban/configure-column/how-to-configure-column-data-source#sobject-data-source). Select "Related Objects" tab: Select related object, to configure condition for current related object click "Add Condition". Row with new condition form will be shown. Click button to choose field. Select "Operator", "Type" and "Value" for condition. To configure sorting order for current related object click "Add Order". Row with new order form will be shown. Click button to select Field for sorting. Select order type and specify nulls logic (how fields without data will be sorted - shown last or first). ### Configure card elements to use related object Fields from related object can be set in kanban cards using merge fields. Go to Compact Layout editor, add necessary element and use related object fields on it: Related object fields are available in the formula builder. Proper notification will remind user configure related object on columns: # How to configure Column Header Select a column (click on its header). Go to "Data" section of column properties at the right sidebar. Click on link "create" ("edit") of "Config": Column config dialog popup will open: * Check "Hide Record Counter" checkbox if you don't need see number of cards in this column * Configure CSS styles of the column header. * Add cells (text/link/icon/menu) into "Cells Configuration" . * Set ID, value, CSS styles and configure Handler if necessary. Toggle Merge Field Picker for assistance. * Click "Save" button to apply changes in column configuration and save dashboard. # How to configure Column Body Select a column (click on its header). Go to Data section of Column Properties at the right sidebar. Click on link "create" ("edit") of "Config": Column config dialog popup will open. Open "Body Configuration" tab: * Select number of Cards in Row. * Configure [CSS Styles](/standard-kanban/tools/configuring-css-styles) for column body. * Click "Save" button to apply changes in column configuration and save dashboard. # How to configure Column Footer Select a column (click on its header). Go to Data section of **Column Properties** at the right sidebar. Click on link "**create**" ("**edit**") of "**Config**": Column Config dialog popup will open. Select "**Footer Configuration**" tab: * Configure [CSS Styles](/standard-kanban/tools/configuring-css-styles). * Add [Row](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons)(s). * Add [Cells](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons) in the row. * Select **Type** (text/link/icon/menu). * Set **ID**, **Value**, **CSS styles**. * Configure [Handler](/standard-kanban/tools/configuring-handlers) if necessary. * Click "**Save**" to apply changes in column configuration and save dashboard. # How to configure Column Container and Filters Select a column (click on its header). Go to **Data** section of **Column Properties** at the right sidebar. Click on link "**create**" ("**edit**") of "**Config**": ## Container Configuration Column Config dialog popup will open. Select "**Container Configuration**" tab: * Check "**Hide Empty Column**" if you don't need see Empty Column * Configure[ CSS Styles](/standard-kanban/tools/configuring-css-styles) * Check "**Collapsible**" to give a column proper ability * "**Collapsed**" will be shown only if "**Collapsible**" is checked and allows to set default column state (collapsed or not) * Click "**Save**" button to apply changes in column configuration and save dashboard. ### Filters Configuration Select "**Filters Configuration**" tab: * Select filtering: * **Allowed** - column can be filtered by both default (system) data sources and custom filters * **Allowed only Default Sources** - column can be filtered only by default (system) data sources * **Allowed only Custom Sources** - column can be filtered only by custom filters * Click "**Save**" button to apply changes in column configuration and save dashboard. # Configure Card

How to configure

Card properties

How to configure

Card Data Source and Conditions

How to configure

Card Compact Layout

How to configure

Card Layout

How to configure and use Card Custom Attributes
Configuring Card Movement and Column Junctions
Configuring Card Actions
# How to configure Card Properties Click on card to open Card Properties in right sidebar. Enter card name and description into proper fields. {% hint style="info" %} Name can contain: * static text * merge fields * formulas Description can be used in dashboard via [merge fields](/standard-kanban/tools/using-merge-field-picker). {% endhint %} # How to configure Card Data Source and Conditions #### Data Source Click on card. Go to the "**Data**" section of card properties at the right sidebar. Select data source in the "**Data Source Type**" picklist: {% hint style="warning" %} Card will be shown in the column only when data sources of card and column are the same. {% endhint %} #### Conditions Conditions are the way to specify which card should be shown for records of the same data source basing on their properties. E.g., you have an kanban for Cases which has columns corresponding to basic Case Status values: New, Working, Escalated, Closed. You can make 2 cards for the "Case" object: * One card can be shown for records which represent cases received online (Case.Origin = "Web") and it can have a compact layout with some necessary fields (Case number, Subject, Author, Created Date, etc.) and specific design (e.g., icons indicating Priority and Case Type). * Another card can be shown for records with other origins and has compact layout with smaller set of fields (Case Number, Subject, Reproter, Case Origin) If you specify conditions for a first card, it will be shown only for records that match these conditions; other records will be represented by the second card. You can configure a chain of conditions, but do not forget to make a default card that will not have conditions at all (or at least have an opposite conditions). Click on a necessary card, go to "**Conditions**" section and click on link "create" ("edit"). Card conditions dialog popup will open. Configure conditions there. For example above they will be: Click "**Save**" to apply changes in card conditions and save a dashboard. # How to configure Card Compact Layout Go to "**Layout**" section of card properties at the right sidebar. Select **Compact Layout** and click on link "create" ("edit", if card already has compact layout configured). Card builder will open. You can add components to card and configure card settings. To delete component drag it and drop outside of the card layout. Configuring settings: * If checkbox "**Collapsible**" is checked, the card on dashboard will show only the first row of components by default. Hover mouse on it to display the whole card. * Expand "**Styles**" section to show [CSS styles](/standard-kanban/tools/configuring-css-styles) form. #### Adding components Click on component of a card. Settings of component will open at the right sidebar. Select **Type** (if you want to change type), fill in **ID**, **Value**, **Title** and set width of this component, if necessary. {% hint style="info" %} ID is required to be used in some [actions related to Cells](/standard-kanban/using-kanban/how-to-use-kanban-api-actions), like "Refresh Cell" or "Update Cell". Click on "Formula Builder" button to display [very helpful assistant](/standard-kanban/tools/using-formula-editor). You can copy/paste components with settings using proper buttons. {% endhint %} Expand "**Handler**" section and configure [handler(s),](/standard-kanban/tools/configuring-handlers) if necessary. Expand "Styles" section to show CSS styles form for current component. Click on Card Preview button to show "**Card Preview**" popup: Select any existing record in the "**Search**" field to populate card preview with actual data from this record. Drag the slider to play with card preview width. You can set values to the variables in this list to affect element in card preview (variables are [set in Dashboard Configuration](/standard-kanban/using-kanban/how-to-work-with-variables)). Click "Save" to apply changes in card builder and save dashboard. There are 4 types of card components: * **Text** (looks like generic text) * **Link** (looks like a link, default design depends on selected Kanban theme) * **Icon** (has no text, only small image that should be taken from icon library) * **Menu** Text, link and icon are simple and intuitive to set up. Menu is more complex. It can have both text and icon, which position can be left or right. The position where submenu is dropped, also can be set there: {% hint style="warning" %} Note: open menu cant take more room than card can offer, and it can be cut off by card edges; in this case you can allow menu fall down out of card area by adding "overflow:visible" style to the card. {% endhint %} The Menu component has no sense without menu items. Thus, user must set up at least one menu item in **Options** section. Menu items should have [handlers set as usual](/standard-kanban/tools/configuring-handlers): # How to configure Card Layout Go to "Layout" section of card properties at the right sidebar. Select Layout and click on link "create" ("edit", if card already has layout configured) to open **Card Layout** dialog popup. ### Basic Configuration #### Layout Body Select layout body "**None**" in case you do not want to show sidebar (or modal popup) with card details when card is clicked. Select Layout body "**Form**" if you need some specific form to be shown. Choose [form](/components/forms) and specify parameter(s) if necessary. For example: Select Layout Body "**Visualforce Page**" to show some existing page from current organization. Choose a page in the proper field and set parameters, if needed. Set Layout Body "**Lightning Component**" to embed some component. Select component and set parameters, if necessary: Select Layout Body "**Url**" to embed some other page. Fill in proper field with some external URL and specify parameters, if necessary. {% hint style="warning" %} Only URLs to secure sites are allowed. If specify non-secure URL the site will be blocked by system. {% endhint %} Select Layout Body "**SObject**" to show current object standard details. You need to set Record ID (e.g., select {Case.Id} in the [merge field picker](/standard-kanban/tools/using-merge-field-picker) to specify ID of record represented by current card). Select Layout Body "**Standard**" to show multiple tabs in layout. Configure them on the "Tabs configuration" subtab that will appear: #### Tabs Configuration Open "**Tabs Configuration**" subtab. "**SObject**" tab is preset to show current object standard details. Click "**Add tab**" button to open config dialog popup. Enter label and title in proper field, select icon using "**Icon Library**". Configure "**Conditions**", CSS Styles for tab in generic (inactive) and active states if necessary. Select tab layout type in "**Layout**" field. Tab layouts are the same as described above, except the "**Standard**" one. "**Standard**" layout type allows user to configure custom set of fields to display. Add fields under each other by adding rows to layout, set labels and values, rearrange rows, if necessary. #### Card Layout Positions Select layout position in the proper picklist: Position "**Right**" will cause layout be shown as right sidebar:
Position "**Left**" will cause layout be shown as left sidebar:
Position "**Modal**" will cause layout be shown as modal popup:
#### Other Settings {% hint style="info" %} In case if you hid header or footer, you don't need to configure them as described below. {% endhint %} ### Header Configuration Go to "**Header Configuration**" tab to open "**Title Settings**". Fill in "**Text**" field (static text, merge fields or formulas) and configure [CSS Styles](/standard-kanban/tools/configuring-css-styles). ### Footer Configuration Open "**Footer Configuration**" tab and click "**Add Button**" to configure [buttons](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons), if needed. Click "**Save**" to apply changes in card layout configuration and save dashboard. # How to configure and use Card Custom Attributes Custom attributes can be used as additional fields of card. You can use them in [merge fields](/standard-kanban/tools/using-merge-field-picker) in any place where card is available as context object ($Card). Go to "**Custom Attributes**" section of card properties at the right sidebar. Click "**add**" link, fill in field Name and Value: You can add any number of custom attributes with unique names:
Save current dashboard. After saving custom attributes will be available for current card context object: Custom attributes should have `a__` prefix to be used in merge fields:
# Configuring Card Movement and Column Junctions The main idea of Kanban is triggering some actions by moving cards between columns. These actions can be different depending on what column card is moved from and which column card is moved to. Also, not all moves can be allowed. To configure these abilities Columns should be linked with **Column Junctions**. Column Junctions are relations between columns, configured for each card. Each junction has these properties: * **Visibility** - determines if current card is visible in the current column, and, thus, can be dragged from it. Uncheck the proper checkbox to disallow show the current card in the current column and remove all junctions configured for this card. * **Drag-n-drop** configuration - specifies to which columns card can be moved from the current one. Check checkboxes to allow drag-and-drop to proper column(s). Check / uncheck the bulk checkbox to select / deselect all columns. When some of checkboxes are checked, the current column gets Junctions for the current card. The card obtains connectors. These connectors show allowed drag-and-drop directions for this card: The card dragging should have a sense, so, some actions should be executed on card move. The system will show a warning sign when selected card has connectors that don't have any actions added to them. If hover mouse on this warning sign, a tooltip will show which drag-and-drop directions have no actions: [Add necessary actions](/standard-kanban/configure-card/configuring-card-actions) to each connector in "**Actions**" section. {% hint style="warning" %} Note: if uncheck any checkbox that represents allowed drag-and-drop, not only connector will be deleted, but all actions, added to it, will be deleted too. {% endhint %} Columns can have different types of behavior when card is dragged from them and when it is dropped to them. This behavior can be configured for each column where card can be dragged to ("**Target Columns**"). Configuration is set in the "**Drop Behavior**" section of the Column Junction properties. This section appears only when at least one connector is set for the card, and contains behavior forms for each Junction: For each column you can set behavior of source column (the one where card is dragged from): * **Remove Card** - card will disappear from the source column * **Refresh** - source column contents will be refreshed and the card will remain there * **Remove Card and Refresh** - card will be removed from the source column; source column contents will be refreshed; if the record, represented by dragged card, still match the source column conditions, card will appear there again * **Do Nothing** - source column will not change it's contents And you can set behavior of the target column (the one what card is dropped to): * **Refresh** - target column contents will be refreshed * **Do Nothing** - target column will not change it's contents ### Bulk Actions {% hint style="success" %} User can drag multiple cards at the same time. At the Kanban press "Ctrl" key and click several cards one by one to make a multiple selection, then click and drag any of selected cards into a target column. Actions configured for each card will be performed in the same way as if cards were dragged individually. {% endhint %} # Configuring Card Actions Card Actions are executed when cards are dragged from one column to another (dragging of cards is the main idea of Kanban-style data manipulation). Card Actions can be added in 2 ways: * Click "**add**" link in "**Actions**" section of Card Properties or Column Junction Settings * Drag the action from the Actions library (in the left sidebar of Kanban builder) to the desired Card or Column Junction And Card Actions can be added into 2 card representations: * Card itself (in the "Kanban Cards" section of the builder main area) * Column Junctions (card frames in the columns) ### Adding Card Actions by Clicking Links When actions are added to Card by clicking "**add**" link, they will be always executed, no matter what column this Card will be dragged and dropped to. When actions are added to Column Junction by clicking "**add**" link (at one of columns listed in "**Actions**" section), they will be added to current Column Junction only and for selected column only. This means that actions will be executed only: * when Card is dragged ***from*** the column (where this action was added to Column Junction), and * when Card is dropped ***to*** the column, what action was added for Also, if there were no [Column Junctions Drag-n-Drops](/standard-kanban/configure-card/configuring-card-movement-and-column-junctions) configured, a proper one will be set automatically after adding the first action: After clicking the "**add**" link in both Card or Column Junction, an "**Add Action**" popup will be shown. It will ask you what to add - action or action group - and suggest which action or action group should be added - new or already existing:
If user select "**New**" action or action group to add, a new popup ("**Create New Action**" or "**Create New Action Group**") will be shown with the proper form. Create desired [Action or Action Group](/components/actions-action-groups) and click "Save" to add it. If user select "**Existing**" action or action group to add, a proper popup ("**Select Action**" or "**Select Action Group**") will be shown with the list of Actions / Action Groups. Click on any Action / Action Group to select it, and press "**Select**" button to add it to Card / Column Junction: {% hint style="info" %} Use "Search" form at the top of "**Select Action**" or "**Select Action Group**" popup to find necessary Action / Action Group easily. {% endhint %} ### Dragging Card Actions from the Library When actions are dragged from library to Card, they will be always executed, no matter what column this Card will be dragged and dropped to. After action (or action group) shape has been dragged to Card, an "Add *%action type%* Action" / "Add Action Group" popup will be shown. User can choose add an existing or a new action (or action group) there:
Adding new or existing Action / Action Group will be done in the same way as described above for adding actions by clicking links. When Action or Action Group shape is dragged to Column Junction, an "Add *%action type%* Action" / "Add Action Group" popup will be shown and it will contain a Source Column selector - a set of Kanban column names and checkboxes: User will not be able to add Action or Action Group until he select at least one column. {% hint style="warning" %} Note: user should select a card shape in the column first to drop action there. {% endhint %} Action / Action group will be added NOT to current Column Junction, but to all Column Junctions, selected in the Source Column selector in this popup, and for current column only. This means that actions will be executed only: * when Card is dragged from one of selected columns, and * when Card is dropped into the column, what Actions were dragged into Also, if there were no Column Junctions Drag-n-Drops configured, they will be set automatically after dragging the action: # Groups of Cards # How to configure Card Grouping ### Introduction Card Groups is a new layer of visualization and management of cards. One feature of these card groups is their customizable visual styles. This means that a stack of cards and an individual card can be visually distinct, making it easier to identify and differentiate. Another feature is a set of aggregation functions for calculating several kinds of totals: * Maximum * Minimum * Sum * Average These functions are instrumental in providing meaningful insights into your data, aiding in more informed decision-making and efficient project management within the Salesforce CRM platform. {% hint style="info" %} This feature is available since release 3.1.37 {% endhint %} To make card groups you just need to have a kanban with columns configured on some Data Source object. ### Basic Configuration Let's use Opportunities in the following example. The Kanban will have 4 columns for several Opportunity stages. {% hint style="info" %} Distributing cards by columns - is the top layer of records representation and management in kanban. Card grouping offers a second layer. {% endhint %} Here how a kanban can look like without grouping: We can add grouping by some fields of Data Source object. {% hint style="info" %} Groupable field types: * Checkbox (boolean) * Phone (string) * Picklist (string) * Email (string) * Text (string) * Text Area (string) * URL (string) * Number (int). Does not include custom fields, only standard Number fields with SOAP type `int`, like `Account.NumberOfEmployees`. * Lookup (id) * Master Detail (id) * Id (id) * Date (date) * Formulas of type Checkbox and Date, including cross-object formulas across standard and custom relationships. {% endhint %} * Open Column Config popup and go to "Grouping Configuration" tab. * Click button to select a Data Source field in "Group by" picker: * A field picker will appear. Select a field (fields of up to 4 levels are available) and click "Apply" button: * Save changes: This is enough to add groups to the column. These groups will automatically receive a header that will correspond to the value of selected field, and will contain only cards that have this value set. Here how a kanban can look like with card grouping in the last column: {% hint style="warning" %} If some cards have no value in the field which cards are grouped by, these cards will not be included in any group. {% endhint %} Card groups have the following features: * They are collapsed by default and show only the first card. To expand a group click button at the group header. * Card grouping does not cancel column sorting order - it will be matched inside groups too. * If group contains many cards, not all of them can be displayed - in this case a "load more" button will be shown at the bottom of expanded group. {% hint style="warning" %} Only one Card Group is allowed per column. {% endhint %} ### Other Features Card Groups offer following abilities: * Styling * Show totals * Use conditions to include cards in the group #### Styling Add CSS styles using proper Styles picker: You can use merge fields in styles to make groups styled dynamically depending on different values. #### Totals * Click button to show proper subform for Totals entry. * Type Label (text that will be displayed left to value). * Select aggregation method in "Details" column. Currently available methods are: * Sum (proper values from all cards belonging to the group will be added) * Minimum (will show minimal value) * Maximum (will show maximal value) * Average (will calculate and show average value) * Select a field which Total will be aggregated by * Set CSS styles (e.g., color) for this Total, if necessary You can add several Totals: How can look card groups with styling and Totals: #### Conditions To make card grouped more efficiently, you can specify conditions. Only cards, whose records match conditions, will be grouped. * Go to "Conditions" section of Grouping Configuration tab * Click button to add condition * Select Data Source Object field, operator and type * Specify value to be matched * Add more conditions, if necessary * Set conditions Logic, if needed In the example below Opportunity cards will be grouped by Account Name only for two specified accounts: And how result will look like: # Tools
Using Merge Field Picker
Using Formula Editor
Configuring CSS styles
Configuring Row, Cells, Menus and Buttons
Configuring Handlers
# Using Merge Field Picker Merge Field Picker is available in 2 views (depending on place it is called from): old (Classic) and new (based on Salesforce Lightning interface). ### Old View Merge Field Picker can be opened by clicking "toggle Merge Field Picker on/off" link at the top of dialog popups. Picker will be shown at the bottom of popup: Select a Context Object to make deal with: List of context objects contains objects depending on element being configured: * Current data source object (e.g., "Case") is available for cards, but not available for Kanban or Column (because Kanban and Column can contain cards for different data sources). * `$Card` object is actual for cards, card elements and card Layout, but has no sense on Column and Kanban. * `$Column` object is actual for cards and columns, but Kanban has no knowledge about it. * `$Kanban` is available for all kanban elements. Some context objects can be found in "Other Optional Objects" section of the picker. If not, that means proper context object should not be used in the current situation. * `$SourceColumn` and `$TargetColumn` are available through Kanban because it can be unambiguously determined which column user drags a card from and to. * `$Functions` provide selection of functions and operators, applicable in formulas, and is absent in places where formulas are not acceptable. * `$User`, `$System`, `$Settings` objects are available always. * `$Variables` contain variables (if they are specified) or "Variable Template" string (for objects that are working with variables, but have no own, like Actions) {% hint style="info" %} `$Record` object is not actually a Context one, but it allows to search ID or Name of any record of any available Object - as far as Data Source, Kanban, Column, Card, etc - by searching it and picking a result. This is quite useful when some ID is needed, e.g., for Kanban API actions that require Column/Kanban/etc. IDs. {% endhint %} After Context Object has been selected, a list of Context Object Items will be shown: Select necessary item (it can be a field, property, function, etc) and it will be put into text field near the list as Merge field: Now you can: * copy Merge field to use anywhere * click to any text input in the popup (to make it focused) and then press "Insert" button to paste Merge field into selected text input: ### New View This View is available in some places, e.g., on Card Builder. Click ">\_" button at the necessary field: The Merge Field Picker will be shown as a part of Formula Builder: Select a Context Object in the list and a Field Picker popup will appear. Select a first-level field and see selected field at the bottom of popup: Or select a second-level (3rd-level, etc.) field by clicking items with arrows: Click "Apply" button of Field Picker and selected Merge field will be inserted to Formula Builder in the place at cursor: Click "Copy to Clipboard" button to copy contents of Formula Builder. Click "Apply" button on the Formula Builder to insert Merge field to the field, where Formula Builder has been called: # Using Formula Editor Formula Editor is used to build and check formulas. It is available in 2 views: Old (classic) and New (based on Salesforce Lightning interface) depending on place where it is called at. ### Old View Old view Formula Editor is displayed in dialog popups where some dashboard elements are configured. To show Formula Editor toggle Merge Field Picker on and click "Open Formula Editor" button: The Formula Editor will be shown as a modal window inside the dialog popup. Edit a formula in a Formula field; use merge field constructor to select and paste [merge fields](/standard-kanban/tools/using-merge-field-picker) and [functions](/references/functions) there. {% hint style="info" %} To use the functions or calculations inside of inputs, they should be wrapped in formula expression: `FORMULA[%formula_contents%]`. The proper warning will be shown when a $Functions is selected in "Context Object" picklist of merge field constructor. {% endhint %} Type a necessary formula in the Formula field. Click "Copy To Clipboard" button to copy the formula. Click "Check Syntax" button to validate formula syntax. If all is good, a proper message will be shown:
Check "Calculate Formula" checkbox to show more useful options:
A "Source Objects" JSON will be shown with default stub values in the proper field. Change these values to ones you want to test or debug formula with, and click "Calculate" button. Result of formula evaluation will be shown in the "Formula Result" field:
Click "Apply" button to paste a formula into a Merge Field Picker (if it was opened previously): ### New View A new view of Formula Editor can be found in dashboard elements configuration popups, e.g. in Card Compact Layout configuration window. Click "Formula Editor" button to show it: This view of Formula Editor has the same basic features as an old view. Also you can: * copy formula to clipboard * click "Apply" to paste formula to the field where you've clicked "Formula Editor" button * check Formula syntax * evaluate formula: # Configuring CSS styles There are lot of places where CSS styles can be applied. CSS styles can be configured with several ways: ### CSS Editor (Old View) It consists of text area and "More" button. This button when clicked calls a dialog window. * Click "Add" link here to add a line for CSS property (rule) * Enter CSS property name in "Rule Name" field, and value in "Rule Value" field: {% hint style="warning" %} Note: you should not type any CSS separators (semicolon) or brackets. {% endhint %} Add more rules if needed. Click "Apply" button to get rules applied to element being styled. After clicking "Apply" button you will see styles (combined as properties set) in text area: {% hint style="info" %} You can copy styles from this text area, but you are not allowed to edit them here directly. {% endhint %} CSS styles can be added to element by pasting them into the text area. 1. Copy styles in proper format (e.g. from web inspector in your browser) 2. Click on text area (to make it focused) and paste styles here (press keyboard shortcut) A dialog window will be opened. It will contain as previously set CSS properties, as just pasted (distributed by separate lines): Click "Apply" button to save new styles. ### Combined Fields with Rules (New View) CSS editor allows to do the same things as an old view one. User can add CSS rules one by one or several at one time as CSS code. Click "+" button to add rule lines: Enter rule name and rule value into proper fields and save changes by clicking "Save" button: To edit CSS as stylesheet data, click "edit" button to show a textarea where you can add/remove/copy/paste styles: {% hint style="warning" %} In the old view you can not remove or change CSS properties in textarea, only copy or add by pasting. In the new view you can. {% endhint %} CSS styles can be added to element by pasting them into the text area. 1. Copy styles in proper format (e.g. from web inspector in your browser). 2. Click on text area and paste styles here. CSS properties form the textarea will be added as separate rule lines:
### Formulas, Functions and Merge Fields in Styles CSS properties can be dynamically set based on different system and object data using built-in features. Refer to [Functions section](/references/functions), to [Merge Field](/standard-kanban/tools/using-merge-field-picker) Picker, and [Formula Editor](/standard-kanban/tools/using-formula-editor) articles to know how to work with them. For example CSS properties that can be configured with formulas and merge fields as shown below. CSS property can be set to "color" or "background-color" depending on record "IsClosed" field value: And value of this property can be set to different color depending on record "Type" field value: * \#808000 if it is set to "electrical"; * \#78904B if "mechanical"; * and #4488CC for other values: So, CSS rule will look like this: And it will mean "If case is closed, card text color will be set to one of 3 colors depending on case type; if case is not closed, this color will be applied as background". # Configuring Rows, Cells, Menus and Buttons ### Cells Cells are the small parts of the different elements on your dashboard that contain pictures or text and can be used for visual, informational and interactive purposes. Cells can be added into [Kanban Statistics](/standard-kanban/configure-kanban/how-to-add-kanban-statistics), [Column Group](/standard-kanban/configure-column/how-to-set-column-groups) Headers, [Column Headers](/standard-kanban/configure-column/how-to-configure-column-header) and [Footers](/standard-kanban/configure-column/how-to-configure-column-footer), and Cards (see proper [article](/standard-kanban/configure-card/how-to-configure-card-compact-layout) to know about card cells). Cells can be one of these types: * **Icon** - a small picture * **Text** - looks as generic text matching selected Kanban theme * **Link** - looks as generic link matching selected Kanban theme * **Menu** - looks as generic text matching selected Kanban theme, but shows a dropdown menu with standard button-like items. This menu is the same as shown when click button of "Menu" type - see proper button description below. {% hint style="warning" %} Note: Cells of "Link" type just look like links, but do nothing when clicked by default, as far as other cells types. You need to add handlers to them to make them do something. {% endhint %} To add a cell into dashboard element go to this element configuration and click "Add cell" button in the proper place: A cell entry row will be added. Then: * Select cell type * Configure CSS styles of this cell, if necessary * Click ">>" button for "Value" field to show Cell Properties popup * Specify cell value. It can be text, [merge field](/standard-kanban/tools/using-merge-field-picker) or [formula](/standard-kanban/tools/using-formula-editor) * Specify Cell Title - a tooltip that will be shown on mouse hover; this is not mandatory. Tooltip also can be made dynamic with the help of merge fields and formulas * Set some custom ID for Cell, if needed. This ID is required to be used in some [actions related to Cells](/standard-kanban/using-kanban/how-to-use-kanban-api-actions), like "Refresh Cell" or "Update Cell" * Specify Cell width in % or pixels, if you're not satisfied with default "auto" value {% hint style="info" %} For cell of "Icon type" it will be an icon category and name in format "category:name". Icon and it's category should match one from [Lightning Design System icons library](https://www.lightningdesignsystem.com/icons/). Note: If specify incorrect icon, cell will contain no icon. {% endhint %} {% hint style="warning" %} Note: If you specify a Cell ID in the Cell Properties popup, it will be shown in "ID" field of the Cell entry row. Do not edit it there: {% endhint %} Add more cells if needed. Use small arrow buttons to rearrange cells (first cell is most left, last is most right). To make cell interactive (do something on mouse click) click ">>" button in "Handler" column and configure [handlers](/standard-kanban/tools/configuring-handlers). ### Rows In some dashboard elements (e.g. column footer) cells can be shown in more than one line. In this case cells are organized in rows. Go to proper element configuration and click "Add Row" button: Add cell(s) into the row as described above. \ Add more rows, if necessary.\ Use small arrow buttons to rearrange rows. ### Buttons Buttons can be shown in the different elements on your dashboard. They are used to add some interactivity to dashboard. Buttons can be one of these types: * Standard - look as generic button (matching selected Kanban theme) * Standard with icon - look as generic button containing both icon and text * Icon - look as generic button with icon only * Separator - look not like a button, used to separate menu items (available to add in menus only) {% hint style="warning" %} If specify incorrect icon, button will contain red warning sign. {% endhint %} To add buttons to dashboard element go to its configuration and click "Add Button" button: A modal popup will appear. The main button properties will be shown at "Basic Configuration" tab: * Select button type - standard or icon * Set button label - text that will be shown on the button. It can be static text, merge field or formula * This field is unavailable for buttons of "icon" type * Set button title - text that will be shown as tooltip on mouse hover * Specify button icon. Icon is mandatory for "Icon" type buttons and optional for "Standard" * Configure conditions that button should match to be displayed. This is optional and by default button will be displayed unconditionally * Configure [CSS styles](/standard-kanban/tools/configuring-css-styles), if necessary {% hint style="info" %} For button of "Icon type" it will be an icon category and name in format "category:name". Icon and it's category should match one from [Lightning Design System icons library](https://www.lightningdesignsystem.com/icons/). {% endhint %} Click to "Handler Configuration" tab to configure handler(s) for this button. ### Menus Menus are way to aggregate buttons into dropdown blocks of submenu items. Menus can be one of these types: * Button - menu look as generic button matching selected Kanban theme. * Icon - look as generic button with icon only. * Text - look as generic text string. {% hint style="warning" %} If specify an incorrect icon, menu will contain red warning sign {% endhint %} Menus are available for some dashboard elements, e.g. dashboard top (in Kanban properties). Go to proper configuration and click "Add Menu" button. Menu configurator popup will be shown. Here you can: * Select menu type * Specify menu label - text on menu item. It can be static text, merge field or formula * Note: if menu type is set to "Icon", an "Icon" field will be displayed instead of "Label" * Specify menu item title - text that will be shown as tooltip on mouseover * Select menu position (see below) * Optionally configure conditions, that should be matched to show menu * Configure CSS styles, if necessary Menu position shows direction where block with submenu items will be dropped to: * **Right** means submenu will start at left side of menu and continue to right direction when menu items text will be long. * **Left** - submenu will start at left side of menu and continue to left direction when menu items text will be long. These directions are shown with red arrows * **Top** - submenu will be shown above menu. Bottom - submenu will drop down below menu. These directions are shown with green arrows After menu has been added, menu buttons should be added there. Click "**Add Button**" link in the menu row: A button configurator popup will be shown. It is the same as for single buttons with only "**Separator**" button type added. Rearrange buttons with small arrows: Menu will look like this when clicked:
{% hint style="danger" %} Note: currently buttons with "Icon" type are not suitable for using in menus due to mandatory text label that you can't edit. Use "Standard" type buttons with icons instead. {% endhint %} # Configuring Handlers Handlers are way to make a dashboard interactive and to do many other useful things. They can: * Show object details * Display a form or component * Navigate to web page (internal or external) * Execute actions and action groups * Make changes in Kanban layout * Launch custom events Handlers can return results of Success and Error types. These Successes and Errors can have their own handlers, and this allow user to trigger chains of handlers. Handlers can be set to dashboard elements user can interact with: * [Cells and buttons](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons) * Card layout elements Handlers can be set in two views of configurator: old and new. ### Old View Configurator The old view is commonly used. To show it go to proper element (e.g., cell) and click "Configure Handler" button or go to element (e.g., button) editor and switch to Handler Configuration tab: In both cases the handler editor will be shown: Select handler type in the "**Type**" picklist. Depending on your selection other columns in handlers editor will contain different fields and elements.
See "Handler Types" section below to view configuring of different types of handlers. ### New View Configurator This view is available for some elements (e.g., Card Components). Go to proper element and expand "Handler" section. Click "Edit Handler" button: {% hint style="info" %} Created Handler could be copied to other elements of card by using Copy/Paste buttons {% endhint %} The handler editor will appear in popup. By default it will contain nothing. Select handler type in the "Type" picklist. Depending on your selection different fields and elements will appear next to it: {% hint style="info" %} Not all types of handlers can return an error. These handler types will display no "Add Error handler" button. {% endhint %} ### Handler Types #### Form This type of handler when triggered will show a window with specified form. To configure it: * Select **"Form**" in the "**Type**" field in configurator * Select necessary form in the "Value" lookup or click "**Add New From**" button to open form builder * Select if form will be opened in the same browser window or in the new one * Click "Parameters" button to configure parameters or paste correct JSON with parameters into textarea Form have 2 default parameters that should be set: * Mode ("edit", "new" or "view") - specifies how form should be shown * id - specifies source record ID which data will be taken to populate form and further work with (not necessary for "New" mode) Click ">>" button to open parameters builder. Click "Add" link to add more parameters and specify them: #### Form API This type of handler when triggered will call specified API method of open form. To configure it: * Select "Form API" in the "Type" field in configurator * Select necessary method in the "Value" lookup (e.g., "Execute Action") * Click "Parameters" button to configure parameters or paste correct JSON with parameters into textarea Form API handler has no default parameters. Required parameters are determined by selected API method (e.g., "Execute Action" method needs id of the form and action name):
{% hint style="warning" %} Note: you need to know Form API methods from your system administrator. {% endhint %} #### Visualforce Page This type of handler when triggered will navigate you to the specified Visualforce Page from current organization (in new browser tab). To configure it: * Select "**Visualforce Page**" in the "**Type**" field in configurator * Select necessary Visualforce Page in the "**Value**" lookup * Select if Visualforce Page will be opened in the same browser window or in the new one * Click "**Parameters**" button to configure parameters or paste correct JSON with parameters into textarea Visualforce page has no default parameters:
#### URL This type of handler when triggered will navigate you to the specified web page (in new browser tab). To configure it: * Select "**Url**" in the "**Type**" field in configurator * Type necessary URL in the "**Value**" text input * Select if URL will be opened in the same browser window or in the new one. * Click "**Parameters**" button to configure parameters or paste correct JSON with parameters into textarea. URL has no default parameters:
{% hint style="warning" %} * Only relative URLs (pages on the same server) can be opened in the same window. External URLs are always opened in the new window due to security reasons. * You should provide a full URL with network protocol prefix. Without it system will treat URL as relative. {% endhint %} #### Lightning Component This type of handler when triggered will display the Lightning Component. To configure it: * Select "**Lightning Component**" in the "**Type**" field in configurator * Select a component in the "**Value**" lookup * Click "**Parameters**" button to configure parameters or paste correct JSON with parameters into textarea Lightning Component has no default parameters:
#### SObject This type of handler when triggered will open the page with object specified by its ID. To configure it: * Select "**SObject**" in the "**Type**" field in configurator * Type ID or API Name(in case of new record) of the SObject in the "Value" text input. Any object is allowed - system will show its details in the same page * Click "Parameters" button to configure parameters or paste correct JSON with parameters into textarea SObject has no default parameters:
#### Action / Action Group This type of handler when triggered will execute the specified action or action group. To configure it: * Select "**Action**" or "**Action Group**" in the "**Type**" field in configurator * Select an action or action grroup in the "**Value**" lookup or click "**Add New**..." button to create new action or action group in the other browser tab * Click "**Parameters**" button to configure parameters or paste correct JSON with parameters into textarea Action or action group can have different parameters. There are 2 default parameters pre-defined (but not mandatory): * source - provide the ID of the record that will be a source of action data * variables - provide initial variables with their values in JSON format (like `{"variable1":"value1","variable2":"value2"}`)
The action or action group can be executed successfully or with error. To do something with these results additional handlers can be added to action / action group success and error. Handlers can be added several times and form a chain - this is a simple way to program complex behavior. To remove an additional handler click "Delete Handler" button: {% hint style="info" %} You can re-order handlers. Exchange positions of neighbor handlers by moving them with arrow buttons. {% endhint %} {% hint style="warning" %} Note: If handler that can not have child handlers becomes parent, it will loose all children. {% endhint %} #### Kanban API This type of handler when triggered will call the specified method of Kanban API that add some interactivity. To configure it: * Select "**Kanban AP**I" in the "**Type**" field in configurator * Select a Kanban API method in the "**Value**" picklist * Click "**Parameters**" button to configure parameters or paste correct JSON with parameters into textarea Kanban API methods do their specific actions and return successful result. This result can have an additional handler. Add this handler by clicking "Add Success Handler" button and configure it (and next-level handlers, if needed) in the same way as for Action / Action Group handler. To learn more about Kanban API methods refer to the ["Kanban API" article](/standard-kanban/using-kanban/how-to-use-kanban-api-actions). #### Fire Event This type of handler when triggered will launch specified event. To configure it: * Select "**Fire Event**" in the "**Type**" field in configurator * Type event value in the "**Value**" field ([refer to Force events documentation](https://developer.salesforce.com/docs/component-library/overview/events)) * Click "Parameters" button to configure parameters or paste correct JSON with parameters into textarea
# Using Kanban

How to use

Kanban API actions

How to incorporate a Kanban into

a Lightning Page

How to build a link to

a Kanban

How to work with variables
How to debug a Kanban

How to work with

filters and orders

# How to use Kanban API actions Kanban API methods are used to make visual changes in Kanban layout, show messages and work with variables. ### Show Message **This method will execute this action:** * Show a notification message over the current Kanban **This method will NOT:** * Affect any variables * Affect any other Kanban elements * Refresh the web page **This methods accepts the following parameters:** * Name = "type"\ Value = one of the following designs: "error":
"warning":
"success":
"info":
This parameter is optional; if omit it, the message type will be "info" by default * Name = "title"\ Value = any text (with merge fields or formulas, if needed), that will be used as message header\ This parameter is optional; if you omit it, system will just show a message without header
* Name = "body"\ Value = any text you want to show in the message body\ This parameter is required
* Name = "mode"\ Value = one of the following: * "pester" - the message will automatically disappear after some time (5 seconds by default); it has no "close" button, so user can't dismiss it before time set in Kanban configuration * "dismissible" - the same as "pester", but user can close the message manually earlier than show time will expire * "sticky" - the message will not disappear until user close it manually This parameter is optional; if omit it, the mode will be "dismissible" by default * Name = "duration"\ Value = time duration of message show (in seconds)\ This parameter is optional and used only for messages with "pester" and "dismissible" modes; if omit it, message will disappear in 5 seconds. ### Refresh Kanbans This method forces the specified Kanbans be refreshed. **This method will execute this action:** * Reload Kanban contents including all columns, cards, top menus and buttons **This method will NOT:** * Reset Kanban variables (and this allow user to re-initiate Kanban with other data) * Refresh the web page where Kanban is inserted into **This method accepts the following parameters:** * Name = "kanbans"\ Value = Kanban IDs or names separated by comma or in JSON array format\ This parameter is optional - if do not set it, the method will refresh the current Kanban {% hint style="info" %} Kanban ID of current kanban is available as `{$KanBan.Id}` merge field. IDs of other kanbans should be known - taken from URL or selected in Merge Field Picker. {% endhint %} ### Update Variables **This method will execute this action:** * Update Variables with specified names in all kanbans from the specified list (if some variable does not exist, it will be created) **This method will NOT:** * Affect any other Kanban elements * Refresh the web page **This method accepts the following parameters:** * kanbans = list of Kanban IDs or names separated by comma or in JSON format ({"key":"value"}). * variables = variables and their values in JSON format {% hint style="warning" %} If it is needed to calculate formulas at the time of the event, an Action/Action Group type of handler should be used instead and variables should be defined there. {% endhint %} ### Print Kanban **This method will execute this action:** * Print specified Kanban page **This method accepts the following parameters:** * kanbanId = ID of Kanban to print\ This parameter is optional ### Navigate to Kanban **This method will execute this action:** * Open other specified Kanban page **This method accepts the following parameters:** * kanbanId = ID of Kanban to open * variables = initial variables and their values in JSON format. This works in the same way as [Input Variables](/composite-kanban/howtos-and-best-practices/how-to-pass-variables-between-parent-and-child-kanbans) on [Composite Kanban](/composite-kanban/introduction) * filters = initial filters in JSON format ### Show/Hide Kanban **These methods will execute this action:** * Show / hide the specified kanban in the current composite Kanban **These methods will NOT:** * Affect any variables * Affect any other Kanban elements except recalculation of other kanban widths * Refresh the web page * Change layout state (hide or show) **These methods accept the following parameter:** * Name = "kanbans"\ Value = Kanban Junction IDs or API names separated by comma or in JSON array format\ This parameter is required {% hint style="info" %} In the context of this action Kanban Junctions are the same as child kanbans. {% endhint %} ### Full Screen This method forces the specified Kanban view be full screen. **This method will execute this action:** * Change standard view to full screen of specified Kanban **This method will NOT:** * Affect any variables * Refresh the Kanban containing specified column * Refresh the web page **This method accepts the following parameters:** * Name = "fullscreen"\ Value = "true" or "false"\ This parameter is required ### Refresh Columns This method forces the specified Kanban columns be refreshed. **This method will execute this action:** * Reload specified column(s) contents including all cards **This method will NOT:** * Affect any variables * Refresh the Kanban containing specified column * Refresh the web page **This method accepts the following parameters:** * Name = "columns"\ Value = Kanban columns IDs or names separated by comma or in JSON array format\ This parameter is required ### Show / Hide Columns **These methods will execute this action:** * Show / hide the specified column in the current Kanban **These methods will NOT:** * Affect any variables * Affect any other Kanban elements except recalculation of other columns widths * Refresh the web page * Change layout state (hide or show) **These methods accept the following parameters:** * Name = "columns"\ Value = Kanban columns IDs or names separated by comma or in JSON array format\ This parameter is required ### Refresh Card This method forces the currently selected card (in column) in the specified Kanban be refreshed. **This method will execute this action:** * Reload card contents **This method will NOT:** * Affect any variables * Refresh any other Kanban elements * Refresh the web page **This method accepts the following parameters:** * Name = "kanbans"\ Value = ID of Kanban where card should be refreshed in (useful for composite kanbans)\ This parameter is optional - if do not set it, the method will refresh the card in the current Kanban
* Name = "columns"\ Value = ID of Columns where card should be refreshed in\ This parameter is optional - if do not set it, the method will refresh the card in all columns
* Name = "recordId"\ Value = record ID to specify which card should be refreshed in\ This parameter is optional ### Refresh Card Layout This method forces the currently selected card layout (in sidebar or popup) in the specified Kanban be refreshed. **This method will execute this action:** * Reload card layout contents including all tabs and buttons **This method will NOT:** * Affect any variables * Refresh any other Kanban elements * Refresh the web page * Change layout state (hide or show) **This method accepts the following parameters:** * Name = "kanbanId"\ Value = ID of Kanban where card layout should be refreshed in (useful for composite kanbans)\ This parameter is optional - if do not set it, the method will refresh the card layout in the current Kanban ### Show Card Layout **This method will execute this action:** * Show the specified record card layout (in the sidebar or popup) in the current Kanban **This method will NOT:** * Affect any variables * Affect any other Kanban elements * Refresh the web page **Theis method accepts the following parameters:** * Name = "recordId"\ Value = ID of the record which is represented in the specified column by some card\ This parameter is required
* Name = "columnId"\ Value = ID of the column which selected record card is shown in\ This parameter is required {% hint style="info" %} **What this can be useful for?**\ Different columns in the Kanban can show cards for the same record (e.g., when one record matches conditions of more than one columns). And cards with different layouts and components can be configured for the same object. Thus, same record can be represented with different layouts depending on column its card is shown in. In this case system should know which layout should be shown - and it is possible only if provide not only Record ID but Column ID too. {% endhint %} ### Hide Card Layout **This method will execute this action:** * Hide the shown card layout (sidebar or popup) from the current Kanban **This method will NOT:** * Affect any variables * Affect any other Kanban elements * Refresh the web page **This method accepts the following parameters:** * Name = "kanbanId"\ Value = ID of the Kanban where card layout should be hidden from\ This parameter is optional; if omit it, a card layout will be hidden from the current Kanban ### Refresh cell This method forces the specified cell(s) be refreshed in the specified column(s) and card(s) of Kanban. **This method will execute this action:** * Reload specified cell(s) contents **This method will NOT:** * Affect any variables * Refresh the Kanban or column * Refresh the web page **This method accepts the following parameters:** * Name = **"Cell Id"**\ Value = [cell ID](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons#cells) \ This parameter is required
* Name = **"Column Id"**\ Value = column ID where card cell(s), column cell(s), should be refreshed in\ This parameter is optional
* Name = **"Record Id"**\ Value = record ID to specify which card cell(s) should be refreshed in\ This parameter is optional ### Update cell This method forces the specified cell(s) be updated in the specified column(s) and card(s) of Kanban. **This method will execute this action:** * Update specified cell(s) contents **This method will NOT:** * Affect any variables * Affect any other Kanban elements * Refresh the web page **This method accepts the following parameters:** * Name = **"Cell Id"**\ Value = [cell ID](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons)\ This parameter is required
* Name = **"Column Id"**\ Value = column ID where card cell(s), column cell(s), should be updated in\ This parameter is optional
* Name = **"Record Id"**\ Value = record ID to specify which card cell(s) should be updated in\ This parameter is optional
* Name = "**Value**"\ Value = the cell(s) value that should be updated\ This parameter is required
* Name = "**Title**"\ Value = the cell(s) title that should be updated\ This parameter is optional
* Name = "**Styles**"\ Value = the cell(s) styles in CSS format that should be updated\ This parameter is optional # How to Incorporate a Kanban into a Lightning Page * Go to proper Lightning Page (e.g., some object Record page) and open Builder (in order to create or edit page layout): 1. Open any Account record in Salesforce. 2. Click the Setup icon (![](https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FusH0Iipf0pkyDT2AI0dZ%2Fimage.png?alt=media\&token=d7fc1246-f7e0-436b-add1-501a80c5d931)) and select "Edit Page" to open the Lightning App Builder. * Find "FlexiKanban" component in the Components list at the left sidebar and drag it to desired available placeholder: * After dragging select the added component (it may become selected automatically) * Select necessary **Kanban** in the respective field * Enter variables in **JSON** format, if necessary * Set **CSS Styles**, if needed * Set **filters** to manage component visibility, if needed * Click "**Save**" button # How to build a link to a Kanban Link to a kanban can be built in two ways: * Combine relative or absolute URL of kanban page with necessary parameters * Use **BUILDDASHBOARDLINK** function ### Use of kanban page URL This way is suitable for **URL/Navigate actions:** * Add an "**URL**" type [handler](/standard-kanban/tools/configuring-handlers) to necessary kanban element. * Set URL **Value** to relative or absolute path to kanban page or component: * Absolute path depends on server/organization you refer to. * Relative path may depend on page structure and will refer to the current server/organization; e.g., relative path can be like this: **/lightning/cmp/c\_\_KanBanComponent** * Select which browser window the page will be opened in - **the same** (will go out of kanban) or **new window/browser tab**. * Add the necessary parameters. Parameters for Kanban Component, used in this example, are: * **c\_\_style** = some CSS styles, that will be applied to Kanban container; * **c\_\_variables** = JSON with variables that should be passed to Kanban opened (optional); * **c\_\_kanbanId** = ID of Kanban to open (may be set directly or via [merge fields](/standard-kanban/tools/using-merge-field-picker)); ### Use of BUILDDASHBOARDLINK function This way is good for places where a link should be generated as HTML, instead of script-driven actions. For example, to build links in email messages. The BUILDDASHBOARDLINK function can be selected via merge field picker and should be called in this way: `BUILDDASHBOARDLINK(dashboard_id, variables, styles, as_html_tag_optional, text_optional)` The parameters are: * **dashboard\_id** = ID of Kanban to open * **variables** = JSON with variables (in quotes '...') that should be passed to Kanban opened (optional; set to null, if not needed) * **styles** = some CSS styles, that will be applied to Kanban container, in quotes ('...') * **as\_html\_tag\_optional** = true, false or null (that will be equal to false) - asks system if generate link as text, or as \...\ HTML tag * **text\_optional** = some text or null - sets the substitute text, that will be content (not "href") of \ tag generated Function should be wrapped with FORMULA\[] operator and can be validated with [formula editor](/standard-kanban/tools/using-formula-editor). # How to Work with Variables Variables are the user defined fields that: * can have any desirable name * can have value of String type * can be inserted anywhere as [Merge field](/standard-kanban/tools/using-merge-field-picker) * can be updated by [Actions](/components/actions-action-groups) * are initialized with initial values when Kanban page is loaded or reloaded * are stored in memory and do not changed when Kanban is refreshed by Kanban API or "Refresh Kanban" button (and this is a perfect tool to dynamically change a lot of Kanban properties) Variables are configured in the [proper section](/standard-kanban/configure-kanban/how-to-configure-variables) of Kanban Properties sidebar. To see what values are stored in the variables, and manipulate with them, user can open a [Debug Console](/standard-kanban/using-kanban/how-to-debug-a-kanban) on Kanban. Variables can be changed by different actions: * "Update Variables" method of [Kanban API](/components/actions-action-groups/types/kanban-api-action) - it allows the simple update of variable with some value. * "Define Variable" [Global Action](/components/actions-action-groups/types/define-variable-action) - it allows to make calculations with variable values using formulas.
Define Variable Action called from Kanban has these properties: * it always return updated variables to Kanban where it has been called from * it need to know the name of variable to update
Example of how to CHANGE variable value via Define Variable Action: 1\. Configure action in this way: * Type = Define Variable * Variable Type = JSON * Variables JSON example: ``` {"{$Variables.IncomingVariableName}":"FORMULA[IF({$Variables.IncomingVariableValue} != '1','zero','one')]"} ``` This formula updates variable value to "one" if its initial value is "1", and to "zero" if not. {% hint style="info" %} In the example above name of variable to update is got from Action incoming variables (that work as parameters) using merge field {$Variables.IncomingVariableName}. Initial value of variable to update is set by {$Variables.IncomingVariableValue}.\ \ Thus, an action call can pass any Kanban variable to action as pre-defined variables named "IncomingVariableName" and "IncomingVariableValue". This will allow user to re-use this action anywhere with other variables. {% endhint %} 2\. Define some variable on Kanban, e.g. variable name = "TheVar" and value = "A":
3\. Configure an action (e.g., as handler on some element) and pass this variable name and value to action via action incoming variables:
Save Kanban.\ To test variables update open Kanban and check variable in Debug Console. It will show initial variable value:
Click on element with this action set as handler. Then open debug console again to see an updated variable:
This way does not allow to update variable in other Kanban, but you can first update variable in current Kanban with global action, and then [pass new value to other Kanban](/standard-kanban/howtos-and-best-practices/how-to-configure-communication-between-kanbans) via Kanban API "Update Variable" method. # How to debug a Kanban To debug kanbans you can use the Debug Console. {% hint style="info" %} Debug Console is available only for the kanban owner, or users with the Flexi Kanban Admin permission set. {% endhint %} Click on Kanban menu and select "**Debug Console**" item: Debug Console popup will be open. There are 2 tabs to work with - **Variables** and **History**:
### Variables tab Variables are listed here. List shows names and current values of variables. Variables can be edited (click "**Edit**" item on submenu) or added (in the case when variable is used in the Kanban, but not defined yet). Click proper button "**Add Variables**" to add a variable. Added variables can be deleted; also they will be deleted automatically on page reload (but will remain if refresh Kanban only). Example of variable debugging: * [Configure variable](/standard-kanban/configure-kanban/how-to-configure-variables) on the kanban: * Use this variable in the Column name:
* Save the kanban and open it. See the column name with variable value inserted (10): * Open Debug Console and edit this variable. Save changes: * Refresh Kanban by clicking proper button. See that column name has been changed correspondingly to new variable value: Example of adding variables: * set something in the Kanban builder to use some new variable. This variable is not defined in the kanban config:
* Go to the Kanban view and see the place where this variable is used. See that nothing is here because the kanban does not have this variable yet: * Open Debug Console and add the proper variable: * Save changes and refresh Kanban (**not the whole page!**). See that variable value is pasted in the corresponding place: ### History tab * In order to see history, admin should enable it on the kanban first. Go to Kanban config and check "Track History" checkbox: * When history tracking is enabled, user can see history of actions executed on the kanban in the "History" tab of the Debug Console. History tracks execution of actions and action groups that were triggered by card dragging. The data represented in history entries contains: * Card name (useful when Kanban has more than one Card) * Object (ID of record which is represented by dragged Card) * Source Column (name of the Column where Card was dragged from) * Target Column (name of the Column where Card was dropped to) * Status (state of action / action group execution process) * History entries can be deleted - several or all together. Check checkboxes at entries to be deleted and click "**Clear**" button to delete selected, or click "**Clear All**" button to delete all history: * For each tracked history event (entry) user can see list of executed actions. Click on history entry submenu button and select "**Show Actions**" menu item: * An **Actions** popup will be shown. There is a list of actions and action groups with their types, names and times when execution has been finished. The order of this list corresponds to order which actions were executed in:
* For each tracked history event (entry) user can see changes made in variables. Click on history entry submenu button and select "**Show Variables**" menu item:
* A **Variables** popup will appear. It will show the list of existing variables with their names and values that were set after execution of action(s) investigated in the history entry being revised:
# How to Work with Filters and Orders ### Standard Mode Filters and orders allow users to set specific criteria that displayed cards should match and their sorting. In the Standard mode filters and orders are applied to all columns which have the same data source (for kanbans with only one data source - to all columns). Filters and orders are set and applied separately for each column. They can be stored as Kanban views and selected to be applied together for the whole dashboard. Also they can be stored as Filter Templates suitable for future re-use (see below). On the Kanban click Filters button to open Filters sidebar. #### Configuring Filters * Select an Object in the proper picklist. Note: this picklist is shown only if there are columns with different [Data Sources](/standard-kanban/configure-column/how-to-configure-column-data-source) in the kanban and/or [Custom Filters](/standard-kanban/configure-kanban/how-to-configure-kanban-custom-filters) are configured. For kanbans with only one Data Source and without Custom Filters this picklist will be absent. * Click "Add Filter" link in the "Filters" section header or the same button in the section (it is shown if no filters have been added yet) * Select a Filter Source (Object or Custom filter set for it): {% hint style="info" %} Source is a set of object fields allowed to select, and columns to apply these selections for. Source can be: * **system** - matches SObjects selected as data source for columns * **custom** - configured by dashboard administrator (see below) {% endhint %} After Source has been selected, you need to set a filter criterion. * Select a **Field**. An "**Operator**" picklist will appear; its content will depend on Field selected. * Select necessary operator and set the **Value** in the proper field. * Click "**Add**" button to add filter criterion to selected columns: User can add more filter criteria. Their amount will be shown in the header: {% hint style="info" %} If you add a filter which asks for some value, and this value is empty, these filters will be ignored. You should use "is null / is not null" operators to filter by empty values. System will show a hint about this, if you add a filter with empty value. {% endhint %} Now user can: * **Change** filter criterion value (example: "Mechanical") * **Edit** filter criterion * **Delete** filter criterion * **Clear** all filters to show all records * **Apply** specified filters * Specify fliters logic (see below) If add more than one filter criteria to the same column, user gets possibility to combine them with logic operators. The proper form will appear. Set the logic (place filter criteria numbers in brackets), e.g. {1} or {2}. By default all filters are applied with "AND" logic, i.e., each entry must match all filters. User also can add a sorting order to column views. Click "Add order" link or button (in orders section, if there are no orders added yet): An order form will be displayed. Select source (in the same way as for filters), and field and order type (ascending/descending). Click "**Save**" to add order to the view or "**Cancel**" to cancel. You can add more sorting orders to get items sorted by secondary (tertiary, etc.) fields. All orders will be displayed in "Orders" section: ### Advanced Mode Advanced Mode enables individual filtering and sorting settings for each column separately. Toggle this mode on by clicking a proper toggler: In Advanced mode a column picklist is shown at the top of sidebar. User should select a column to filter it. After column is selected, user should select a Source, field, operator and value (in the same way as in Standard mode). {% hint style="info" %} If some filters and orders were added in Standard mode, they will be added to each column with the same Data Source in Advanced mode. {% endhint %} Then user can sepcify which columns configured filter should be added to. An additional subsection is shown under the filter criterion form. Click it's header to expand and select other columns to apply filter to (note that column selected previously will be already checked there): Select columns with checkboxes and click "Save" to apply changes. Filter will be shown in the sidebar. If filter is set to be applied not for all columns, proper information will be shown (mouseover a link to see which columns filter will be applied to): ### Manage Filters and Orders User can save configured filters and orders for further usage as a **View** (see below). {% hint style="danger" %} Filters and orders that were not saved will be lost on page reload or clear. {% endhint %} Newly configured filters based on default "All Records" one can be saved as new **Views** only. Click menu button and select "**Save as**..." menu item: Enter new View name and click "Save": {% hint style="info" %} Check "Save this view as a template for future use?" checkbox if you want to save selected filter/sorting as a Template (see below) instead of applicable View. In this case an optional "Template Description" field will be shown. {% endhint %} New Filter will appear as a View at the Kanban Views Menu. Also it will be applied to the Kanban: Now user can: * select this View to apply a set of filter criteria and sorting order quickly * edit filters, orders and save this View or save as another view * make this View default * share this View (see below) * delete this View ### Sharing Views Views can be shared using standard Salesforce sharing mechanism. Click "share" button in Filter menu to open Sharing form page. Click "Add" button to create a new sharing. Select necessary users/roles/groups/etc. and click "Save": To share filter with multiple users you can create a public group, add users to this group and use it as a source record of new sharing setting. ### How to mark filter as default for users programatically Below script can be used to mark filter as default for the list of users. ```javascript String data = '{"defaultView":"filterName"}'; // JSON string, replace 'filterName' with a name of filter that needs to be set as default String kanbanId = 'kanbanId'; // id of Kanban filter belongs to List users = [select Id, Name from User where Name = 'System Admin' or Name = 'Test User']; // select users filter will be shared with List configToInsert = new List(); for(User u : users) { configToInsert.add(new FLX_KB__KanBan_Config_Custom__c(FLX_KB__Assignee__c = u.id, FLX_KB__Data__c = data, FLX_KB__Source_ID__c = kanbanId, FLX_KB__Type__c = 'FiltersConfig')); } if(configToInsert.size() > 0) insert configToInsert; ``` ### Configure custom sources Dashboard administrators can define their custom filter sources with restricted sets of fields. This can be useful in situations when it is not necessary to give user all object fields. Open [Kanban editor](/standard-kanban/configure-kanban/how-to-configure-kanban-custom-filters) and click "**edit**" link next to "**Config**" label at the right sidebar and go to "**Filters Configuration**" tab. Click "+" button to add a filter: A popup will appear. On the "**Basic configuration**" subtab of it: * specify the filter source **Label** (that will be shown in the sources picklist on the Kanban) * set filter source **Name** * select **Source Type** If the source type is **SObject**, a "Source Object" picklist will appear; select a source object. Available source objects are the same as were configured for the kanban columns. Select **Fields** from the **Source Object**, that will be available for user to select in filters: Go to "Availability Configuration" subtab and select columns which this source will be applicable for: Save filter, filters configuration and kanban. Now when user opens filters and selects this custom source, he will be able to select fields and columns from restricted sets. If the **Source Type** is Picklist or Static Text, administrator should configure some **Apex** properties. He should specify **Title**, select available **Operators**, choose **Value** and configure it: Availability configuration is configured in the same way as for **SObject Source** filters. ### Transmitting Filters to Other Places User can take filters currently applied to column(s) and pass them to other place where they are needed. For example, we have a Kanban that shows Opportunities of some specific delivery/installation status in every column, and we want to show all entries related to each column in separate list. We do: Create a form named "Opportunity form" with these elements: 1. Variable of String type with this value: **`FORMULA[IF(ISBLANK({$FormParameters.filters}), '', ' and ' + {$FormParameters.filters})]`** 2. List that has these properties: * Source Object: **Opportunity** * Conditions: **DeliveryInstallationStatus\_\_c = '{$FormParameters.dis}' {$Form.$Variables.filters}** 3. Add some static text which will contain **{$Form.$Variables.filters}** text - this will allow to see filter criteria actually passed to the form. Create standard kanban, add 3 columns there. Columns should have these properties: * Data Source: **Opportunity** * Conditions: **Delivery/Installation Status equals "In progress" / "Yet to begin" / "Completed"** (different for each column) Add a cell in each column header, with these properties: * Type: **Text** * Value: **{$Column.Name}** * Handler with these properties: * Type: **Form** * Value: **Opportunity form** * Open in: **New Window** * Parameters: * filters= **{$Column.Filters}** * dis = **"In progress" / "Yet to begin" / "Completed"** (different for each column) * mode = **edit** Add a card to represent opportunities (with name, Delivery/Installation Status and Stage fields).
Save and open the newly created kanban. Click on Filters sidebar and set some filters and filter logic. Apply the filtering set. Click on the header of the column which is affected by these filters. Form will be opened in the new tab and will show the full list of opportunities matching these criteria: * Delivery/Installation Status is equal to form handler parameter "dis" * Stage is matching the filters set (StageName = "Closed Won" OR StageName = "Qualification") - that was the purpose of this example:
# Howtos and Best Practices
How to configure communication between Dashboards
How to configure communication between Dashboard and Form
How to display different layouts for the same kanban card
How to design kanban for your needs
What inactive column can be used for
How to add a user's chatter profile picture into the Kanban card
How to Add an Imange as a Background to a Kanban
# How to configure communication between Kanbans There are two ways for kanbans to communicate: * initialize a kanban with input variables, styles, and filters * call Kanban API methods ### Input variables, initial filters and styles [Input variables](/composite-kanban/howtos-and-best-practices/how-to-pass-variables-between-parent-and-child-kanbans#input-variables) can be set: * to a child kanban from the parent (composite kanbans) * to any kanban by calling "Navigate to Kanban" API method * to any kanban by following a properly constructed link Initial [filters](/standard-kanban/using-kanban/how-to-work-with-filters-and-orders) can be set on a kanban by calling "Navigate to Kanban" API method. Initial CSS Styles can be set on the kanban container by following the properly constructed link. ### Kanban API methods Kanbans have API methods allowing interactions. The following [Kanban API methods](/standard-kanban/using-kanban/how-to-use-kanban-api-actions) can work with kanbans specified by their IDs or API names: * Refresh Kanbans * Refresh Columns * Show Columns * Hide Columns * Refresh Card Layout * Open Kanban * Update Variables # How to configure communication between Kanban and Form The communication between Kanban and Form can be divided into 2 directions: * from Kanban to Form * from Form to Kanban ### Kanban to Form communications This direction of communications can be implemented by using the following features: * Triggering an event (like button click) which has a [handler of "Form" type](/standard-kanban/tools/configuring-handlers#form) with custom parameters. This shows a form in the popup. A called form should get these parameters and can do different thing depending on them.\ Example: * User can have a form with a long text; * This text has a conditional style, that shows it when Form parameter named "ShowText" is equal to "yes", and hides in other cases; * User adds handlers to elements on Kanban Cards, that will show this form for current record. One of these handlers calls a from with "ShowText" = "yes" parameter, and other with "ShowText" = "no"; * Thus, user communicates with form and asks it to show or hide the text element.
* Triggering an event which has a handler of "Form API" type with or without custom parameters. This handler required ID of Form where necessary Form Action is, and name of the Action on this form, that will be executed. This will work when Kanban and Form are on the same page (e.g., [integrated into the same Lightning Page](/standard-kanban/using-kanban/how-to-incorporate-a-kanban-into-a-lightning-page)).
* Triggering an event which has a handler of "Action" type with or without custom parameters. The action should be of "Call Apex" type and should call proper Apex Class with the necessary parameters, where can pass the own parameters got from the Kanban. Ask an administrator of your organization for list of available Apex Classes and their properties. ### Form to Kanban communications This direction of communications can be implemented by executing the following actions: * Actions of Kanban API type ([see proper article](/standard-kanban/using-kanban/how-to-use-kanban-api-actions)): * Refresh Kanbans * Print Kanban * Refresh / Show / Hide Columns * Refresh / Hide Layout Panel * Update Variables
* Global actions: * [Update Variables](/composite-kanban/howtos-and-best-practices/how-to-pass-variables-between-parent-and-child-kanbans) (useful when some calculations with variables should be done, because passing variable values via Kanban API method does not allow any formulas). # How to display different layouts for the same kanban card Kanban can display different layout tabs for the same card depending on what cell has been clicked by user. * Create kanban variable that will toggle layout types: * In Card Layout settings set 'Layout Body' to Standard (Body Configuration tab): * Go to "Tabs Configuration" and create 2 Layout tabs. * Set conditions to display each tab using variable you created: * On the Card Compact layout choose cell that will handle mouse click ("onClick" event) to display specified layout tab: * Add handlers for "Account Name" cell: 1. "Update Variables" handler sets "2" value to "layoutType" variable, which means that click on Account Name will load layout's "Tab 2" tab (based on layout tabs conditions) 2. "Refresh Card Layout" handler: * Save Kanban. Based on the setup above card layout types will switch from 'Tab 1' to 'Tab 2' tab each displaying separate KanBan Form based on what cell user clicks. # How to design kanban for your needs # How to colorize cards One of basic ideas of Kanban is an easy visual distinguishment of cards, and the fundamental way to do this is placing them into different columns. But what if you need to differ cards that are in the same column? And you want to do it without reading texts and clicking buttons? In this situation you need some visual highlights. Maybe several... Let's go through a simple process of doing this. For example, you have a kanban that is configured on "Issue" object and has default design. Issue cards are put in columns by their State: In this newly created kanban all Issue cards look the same. But issues have several properties, that can be easy visually indicated without adding more text to be shown. ### First, let's indicate an issue type: * This property is useful, but not the most significant - so, we can indicate it with something small, e.g., card border. * It has not many values available ("Task" and "Bug") so we can use a small number of colors to differ them. Open a Card Compact Layout Editor and expand "Styles" section of a Card itself. Add a style proerty: Set style property name to "border-left" and click button to open formula builder to edit a property value. The typical CSS style for this property looks like "`7px solid red`", but we need to set color depending on issue type. {% hint style="info" %} In this case we can use simple way "***If Issue type = "bug" make border red, otherwise make it green"***, but this is not the best idea: if there are will be issues with some other type (e.g., you will add type = "idea" in the future), or "type is not a mandatory field and there can be issues without type at all). So, let's leave "if/else" for fields with guaranteed two-way choices, and use "Case" [function](/references/functions/logical). Do not forget to wrap function in "`FORMULA[]`" expression. {% endhint %} Type "`7px solid FORMULA[]`" and add the following code in square brackets: ```apex CASE( {Issue__c.Type__c}, 'Bug', 'red', 'Task', '#3fba3f', '#DDDDDD' ) ``` {% hint style="info" %} You can wrap lines and add indents in the formula builder, this will not affect system functioning. {% endhint %} In this example we have specified red border color for issues with "Bug" type, light green - for tasks, and light gray - for other types and issues without type: ### Second, let's indicate issue late status: * E.g., you need to make cards highlighted if issue is late. * Assume this is the most significant criteria to you, so, you want to have whole card colorized. * Issue is considered as late if it's Due Date is up to 3 days in the past, and you want to show it yellow. If issue is late more than 3 days, you want to show it red. {% hint style="info" %} Issues can have no Due Date at all, so, you need to handle this situation. {% endhint %} Open card compact layout editor and add one more CSS property "background-color" into "Styles" section. Set this property value to the following code: ```apex FORMULA[ IF( ISBLANK({Issue__c.Due_Date__c}), 'white', IF( DATEVALUE({$System.DateTime}) - DATEVALUE({Issue__c.Due_Date__c}) > 3, '#F7E2E7', IF( DATEVALUE({$System.DateTime}) - DATEVALUE({Issue__c.Due_Date__c}) > 0, '#f7f4e2', 'white' ) ) ) ] ``` Some explanation: And what your kanban will look like after this: ### Third, let's indicate issue priority: * E.g., you need to make cards indicate issues priority. * Assume this is the quite significant criteria to you, so, you want to have noticeable indicator. A small icon will be good for this. * Issue priority usually has the following values: Low, Normal, High and Critical. Also issue can have no priority set at all. Open card compact layout editor and add an "Icon" component to the layout. Set value to "utility:priority" to display standard Salesforce icon (a flag). Set component title to `Priority: {Issue__c.Priority__c}`. Set width to 16 pixels. Expand "Styles" section of this icon and add a CSS property "color". Set this property value to the following code: ```apex FORMULA[ CASE( {Issue__c.Priority__c}, 'Low', '#2375D0', 'Normal', '#41AA53', 'High','Orange', 'Critical','Red', 'white' ) ] ``` "White" is a default color that will be applied to icon if issue has no priority (or some other one). After these changes saved your kanban will look like this: Congratulations! You have kanban that displays several important properties just by colorization. And you can design your cards in any desired way: # How to add a quick-filter column The main idea is to add a column that will contain specific cards which will: * Represent some records related to main kanban. E.g., if the main kanban is created to manage Jobs, the quick-filter column can show a list of Account Managers. * When clicked, turn on or off proper record that will be used to show/hide cards in main kanban. E.g., if click some Account Manager, the main kanban will show only Jobs that are related to account(s) which are having this selected person as Account Manager. This column is quite useful, and here is a way how to make it: * Add column and cards * Design them * Create necessary actions * Use this actions and their results ### Example data In this example we will use the following objects: * Jobs = AVTRRT\_\_Job\_\_c and the following assumptions: * Kanban is already configured to have columns and cards on Jobs Data Source object, and have necessary design and features to work with them ### 1. Configuring column * Add an additional leftmost column to the kanban. * Open Data Source config for this column. Set it's Data Source to User (if no such object available to select, add it into allowed objects in the application Settings). * Set order to Full Name, ascending. * Leave Conditions empty. * Set the following Conditions Logic: {% code overflow="wrap" %} ```sql Id in (select AVTRRT__Account_Manager__c from AVTRRT__Job__c where AVTRRT__Account_Manager__r.IsActive = true) ``` {% endcode %} In this query we specify that account managers should be active. You can set any other limits, e.g., account manager must have specific Profile, or should have first name = John. {% hint style="success" %} Conditions logic can contain formulas and database queries. And in this case you even can do not specify namely conditions because query already contains them. {% endhint %} * Save config. * Rename column to "Account Managers". ### 2. Configuring card * Add a new card. * Set Data Source Type to `User` * Set it's Layout to "--None--" - we need nothing to be shown when card is clicked: * Edit Compact Layout of the card. * Make Card have two elements: * Text element with `{User.Name}` in Value and Title * "Clear" button - an element of "Icon" type with `utility:clear` in Value and `Click to remove {User.Name}'s records from displayed` in Title ### 3. Set cards visibility * Open Column Junction settings for each of already existing cards in a newly added column. * Turn "Visible in this column" off for each. * Turn off visibility of a newly added card in all old columns in the same way. Let's save our kanban and take a first look at new column: ### 4. Set variable to store list of selected account managers We need to remember which account managers are selected - let's store them in the variable named `selectedAcctMgrs` (don't forget about variable name lenght is limited to 20 symbols). Because this variable should store more than one account manager, it should be an array. So, set it's default value to an empty array `[]`. ### 5. Configure action that will update list of selected account managers Go to "actions" tab and create a new action with the following properties: * **Name** = `Toggle Account Manager` (or what you prefer, this is not important) * **Type** = `Define Variable` * **Status** = `Active` * **Execute** = `Always` * **Variable Type** = `Text` * **Variable Name** = `selectedAcctMgrs` * Insert the following formula to the **Variable Value**: {% code overflow="wrap" %} ```apex FORMULA[IF(CONTAINS({$Variables.selectedAcctMgrs}, {$Variables.selAcctMgrID}), JSTRING(JREMOVE(JPARSE({$Variables.selectedAcctMgrs}, ','), {$Variables.selAcctMgrID})), JSTRING(JPUT(JPARSE({$Variables.selectedAcctMgrs}, ','), -1, {$Variables.selAcctMgrID})))] ``` {% endcode %} {% hint style="info" %} * `selAcctMgrID` is not a kanban variable, but an action-wide one. It will be passed as standard "`variables`" parameter to action. * the formula above does the following: if list of account managers (`selectedAcctMgrs` variable) contains ID of account manager, that has been passed as `selAcctMgrID` parameter, this ID will be removed from this list, otherwise it will be added there. * Result of this action will be passed back to kanban and a `selectedAcctMgrs` variable will be updated with it. {% endhint %} ### 6. Add handlers to Account Manager card * Open Compact Layout Editor of newly created card again. * Select **{User.Name}** element and add the following handler: * **Type** = `Action` * **Value** = `Toggle Account Manager` (name of your action) * Set Parameter **variables** to `{"selAcctMgrID":"{User.Id}"}` Now we need to refresh kanban to get it shown filtered: * Click button to add a success handler to previous one. * Set it's type to `Kanban API` and value to `Refresh Kanban(s)`. * Set this handler parameters to **kanbans** = `{$KanBan.Id}` and **types** = `body`. * Add the same handlers to "Clear" button. * Save card Compact Layout and kanban. ### 7. Modify conditions in other columns To get columns filtered, we need to consider selected account managers. To do this we can improve column conditions. Assume in our example other columns (that have Jobs object as data source) have these conditions set: * **Stage** = `Lead` (and other stage values in other columns) * **Allocated** = true and conditions logic is default empty, that means all conditions must be matched. Let's add a new condition to the column: * **Field Name** = `Account Manager` * **Operator** = `in` * **Type** = `Formula` * **Value** = `{$Variables.selectedAcctMgrs}` If we leave conditions logic default, system will always include this new condition in the query. This causes indesirable situation: when `selectedAcctMgrs` variable is empty (no managers selected), kanban will show no records at all. But we want to show unfiltered columns (all Job cards) in this case... So, let's modify column conditions. We need to consider our new third condition when `selectedAcctMgrs` variable is containing one or more IDs, but do not consider if it is empty (equal to `[]`). The conditions logic can be: {% code overflow="wrap" %} ```sql {1} AND {2} FORMULA[IF({$Variables.selectedAcctMgrs} = '{OPEN_SQR_BKT}{CLOSE_SQR_BKT}','','AND {3}')] order by AVTRRT__Account_Manager__c asc ``` {% endcode %} Add the same condition and logic to other old columns. ### 8. Add some design to indicate which account managers are already selected Our filtering should work on this stage - just go to your kanban, click some account manager and wait for kanban refresh. But which managers have you selected? Nobody can say. Let's add some visual things to make it easier. This style will make account manager card have gray background if proper manager is selected: * Open card Compact Layout editor and go to "Styles" section of the card. * Add a CSS rule with the following properties: * **Name** = `background-color` * **Value** = `FORMULA[IF(IN({User.Id}, JPARSE({$Variables.selectedAcctMgrs})),'#8999ab','transparent')]` This style will make account manager card have white color if proper manager is selected: * Go to "Styles" section of the **{User.Name}** element. * Add a CSS rule with the following properties: * **Name** = `color` * **Value** = `FORMULA[IF(IN({User.Id}, JPARSE({$Variables.selectedAcctMgrs})),'#FFFFFF','inherit')]` This style will make "Clear" button shown only if proper manager is selected: * Go to "Styles" section of the **"Clear"** **button** element. * Add a CSS rule with the following properties: * **Name** = `display` * **Value** = `FORMULA[IF(IN({User.Id}, JPARSE({$Variables.selectedAcctMgrs})),'flex','none')]` ### 9. Add a button to reset filtered column (clear all selected managers) Selected account manager can be de-selected by clicking "Clear" button (or account manager name) on proper card. But if you have selected a lot of managers, it will take too long time to clear them all. Let's take care about this by adding a bulk clear button to column header: * Open Config of "Account Managers" column and go to "Header Configuration" section. * Add a text cell with column name (we need to show it, yes?) - set **Value** to `{$Column.Name}`. * Add another cell with the following properties: * **Type** = `Text` * **Value:** * **Text** = `X` * **Title** = `Clear Selected Account Managers` * **CSS Styles:** {% code overflow="wrap" %} ```css display: FORMULA[IF({$Variables.selectedAcctMgrs} = '{OPEN_SQR_BKT}{CLOSE_SQR_BKT}','none','block')]; border-radius: 20px; color: #fff; font-weight: 500; cursor: pointer; background-color: salmon; text-align: center; height: 20px; max-width: 20px; min-width: 20px; ``` {% endcode %} * Add a handler to "X" button: * **Type** = `Kanban API` * **Value** = `Update Variables` * **Parameters**: * **kanbans** = `{$KanBan.Id}` * **variables:** * **name** = `selectedacctmgrs` * **value** = `[]` * Add a success handler to previous one: * **Type** = `Kanban API` * **Value** = `Refresh Kanbans` * **Parameters**: * **kanbans** = `{$KanBan.Id}` * **types** = `All` Now your kanban will look like this: Congratulations! You have successfully created a special column with special cards that will filter other columns when clicked. # What inactive column can be used for Inactive columns are normal columns that can have data source, conditions and cards. They are existing Flexi Kanban object records, that have IDs and other properties - but they are just not rendered in Kanban. You can use them in all places where you need to act with columns, e.g., in Totals calculations. E.g., you want to show total revenue amount on all accounts in the top of kanban. There is no way to get this number directly without doing some programmer's magic, but you can get any totals with standard Flexi Kanban function applied to a column that contains ALL records. So: * Make a [column](/standard-kanban/configure-column/how-to-sonfigure-column-properties) that has no conditions (that means column include all records) with an Account object as a data source: * Get this column ID [using merge field picker](/standard-kanban/tools/using-merge-field-picker). Select context object "$Record" > Kanban Column > Id > %Column name%. Copy and save given column id for the future (e.g. at the field "Description" of this column), or in your favorite notes editor. * Add a [cell](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons) to [Kanban statistics](/standard-kanban/configure-kanban/how-to-add-kanban-statistics) that will show some total amount, e.g. Total Expected Revenue * Use this column's ID in a formula with [COLUMNTOTAL() function](/references/functions/system) that will return a total by "Expected Revenue" field calculated for this hidden column and enter this formula into that cell * Apply created function and save kanban. Close kanban builder to see the result in the top of kanban: # Tips and Tricks ### Drag Multiple Cards User can drag multiple cards at the same time: * At the Kanban press "Ctrl" key and click several cards one by one to make a multiple selection (a card layout will be displayed for first clicked card as usual, other cards will just be selected) * Then click and drag any of selected cards into a target column. Actions configured for each card will be performed in the same way as if cards were dragged individually. * You even can select cards form different columns * If some of selected cards can't be dragged into desired column, they will be ignored # How to Add a User's Profile Picture to a Kanban Card {% hint style="info" %} Adding a visual element like a user's profile picture directly onto a Kanban card can significantly enhance the user experience. It allows for a quick and intuitive understanding of record ownership, making your Kanban board more scannable and user-friendly. This guide will walk you through the steps to insert an Opportunity Owner's Chatter profile picture into a Kanban card. {% endhint %} Here is an example of what the Kanban cards can look like after implementing this customization:
**Step-by-Step Guide** To add the owner's profile picture, we will add a new text field to the card layout and use CSS to set the user's profile picture as the background of that field. **1. Add a Text Element to the Card Layout** First, open the **Card Builder** for your Kanban board. From the **Elements** panel on the left, drag and drop a **Text** component onto the card canvas in your desired location. **2. Configure the Text Element** With the new Text element selected, the **Settings** panel will appear on the right. Make the following changes: * **Type**: Ensure it is set to Text. * **Value**: **Delete any existing value** in this field to make it empty. This is crucial as we only want to display the background image. * **Width**: Set the width to 50 Percent (or adjust as needed for your layout).
**3. Apply Custom CSS for the Profile Picture** Now, we will add the custom CSS to pull in the user's photo and style the element. * In the **Settings** panel on the right, expand the **CSS Styles** section. * Add the following CSS properties by clicking the + icon for each new line: | **Name** | **Value** | | ----------------- | ----------------------------------------- | | background-image | url('{!Opportunity.Owner.SmallPhotoUrl}') | | background-repeat | no-repeat | | min-width | 48px | | max-width | 48px | | min-height | 48px | | max-height | 48px | | background-size | contain | | border-radius | 48px | This CSS configuration will use the owner's small photo URL as a background image, ensure it doesn't repeat, set a fixed size for the container, and use border-radius to create a circular shape.
**Advanced Customization** You can further enhance this feature with conditional logic for users who may not have a profile picture uploaded. * **Fallback Images**: Use a formula in the background-image style to display a default avatar if the user's photo is not available. * **Background Color**: Specify a background-color as a fallback. This color will be visible if the image fails to load or if the user does not have a profile picture. By following these steps, you can create a more visually engaging and informative Kanban board for your users.
# How to Add an Image as a Background to a Kanban {% hint style="info" %} Personalizing your Kanban board with a custom background image can transform a standard workspace into a more visually engaging and motivating environment. This guide will walk you through the simple process of adding a background image to your Kanban board, making your project management experience more unique and inspiring. {% endhint %} Here is an example of what the Kanban can look like after implementing this customization:
#### **Before You Begin: What You'll Need** To get started, you will need two things: 1. **Your Chosen Image:** Select a high-quality image that you want to use as your background. 2. **A Base64 Encoding Tool:** This is a free online tool that will convert your image into a text string. #### **Step 1: Optimize and Prepare Your Image** For the best performance, it's a good practice to optimize your image before uploading it. Large image files can slow down the loading time of your Kanban board. * **Resize Your Image:** Aim for a file size that is appropriate for a background, generally under 1MB. * **Choose the Right Format:** JPEG is a good choice for photographic images. There are many free online tools available to help you resize and compress your images without sacrificing too much quality. #### **Step 2: Convert Your Image to a Base64 String** Once your image is ready, you'll need to convert it into a base64 string. This may sound technical, but it's a straightforward copy-and-paste process with the help of a [free online tool](https://www.google.com/search?q=free%20online%20base64%20image%20encoder\&client=app-vertex-grounding\&safesearch=active). **What is Base64?** Think of base64 as a way to translate your image into a language that web browsers can easily understand and display. It converts the binary data of your image into a long string of text. **How to Encode Your Image:** 1. Navigate to a free online base64 image encoder. There are many options available, such as elmah.io or base64-image.de. 2. Upload your optimized image to the encoder. 3. The tool will generate a long string of text. This is your base64 string. 4. Copy the entire string to your clipboard. #### **Step 3: Add the Background Image to Your Kanban Board** Now it's time to apply your new background to the Kanban board. 1. Navigate to your Kanban board's settings. 2. Locate the configuration section for the board's appearance or styling. In the provided example, this is found under **Kanban Properties > Config > Edit**.\
3. Open the **Dashboard CSS Styles** settings. 4. In the CSS editor, you will add a new rule for the background image. \ \ You will need to add the following CSS rule name: ``` background-image: url('PASTE_YOUR_BASE64_STRING_HERE'); ``` \ Make sure to replace PASTE\_YOUR\_BASE64\_STRING\_HERE with the entire base64 string you copied in the previous step. It should be enclosed in the single quotes within the url() function. \ \ Add additional CSS rules for positioning your background image as needed:
``` background-position: bottom center; background-repeat: no-repeat; background-size: 100% auto; ```
5. Save your changes. #### **The Final Result** After saving your changes, your Kanban board will now display your chosen background image, creating a more personalized and visually appealing workspace. By following these simple steps, you can easily customize your Kanban board and make it a more enjoyable and productive space for you and your team.
# Managing Personal Labels in Kanban Salesforce introduced **personal labels** as a way for users to organize and track their records individually. You can read more about Salesforce’s standard implementation of record labels in the [official Salesforce documentation](https://help.salesforce.com/s/articleView?id=release-notes.rn_sales_features_core_record_labels.htm\&release=250\&type=5). {% hint style="success" %} **Flexi Kanban** takes this concept further by integrating personal labels directly into the **Kanban Board** experience. {% endhint %} With Flexi Kanban, you can: * View personal labels on your Kanban cards. * Create new personal labels without leaving the board. * Assign or remove labels from records using an intuitive context menu. * Delete labels you no longer need. * Customize label colors to make them visually meaningful and easier to scan. * Filter and search for records by personal labels. This article explains how to manage personal labels for records directly in Flexi Kanban. ### Displaying Labels on a Card When designing a Kanban card layout, you can decide where personal labels should appear by dragging and dropping a corresponding element from the left panel onto the card layout canvas.
### Viewing Labels on Kanban Cards Once configured, labels will appear directly on the rendered Kanban cards. For example, you might see labels such as **In Progress**, **Under Review**, or **Gold Level**.
### Managing Labels from a Kanban Card To add, edit, or remove labels on a specific record: 1. **Right-click on the card.** 2. From the context menu, choose **Manage Labels**.
### Assigning and Creating Labels In the **Manage Labels** window, you can: * Search and assign an existing label. * Create a new personal label. * Pick a **custom color** for your label (a feature unique to Flexi Kanban). * Remove labels from the record.
### Filtering Records by Labels Flexi Kanban also supports filtering boards by personal labels.\ This allows you to focus on specific work items across the board — for example, showing only records marked **In Progress** or **Under Review**.
### Why This Matters Personal labels are a lightweight way for Salesforce users to organize their work without requiring admin setup. Flexi Kanban makes them **easier, faster, and more visual**, turning your Kanban board into a personalized command center. # Introduction # How to Create a Composite Kanban Open Kanbans tab and click “New” button to launch a Kanban Creation Wizard: * Select Composite Kanban type: * Click "Next button to go to second step of wizard * Select color theme * Populate kanban name * Type description (optionally): * Click "Next button * Select number of child kanbans and their layout. There are several basic suggestions; you can modify these settings later in the Kanban Builder, add more kanbans and set custom layout: * Click "Next" button * Select children kanbans for each container: {% hint style="info" %} You can omit children kanban selection in order to select them later. {% endhint %} * Click "Next" button * Leave "Launch Advanced Kanban Builder After Wizard Completion" toggler on if you want to go further to advanced edit in Kanban Builder * Review your Kanban summary information and click “Finish” button: After clicking "Save" you will be redirected to [Composite Kanban Builder](/composite-kanban/working-with-composite-kanban-layout) with newly created Kanban opened. # Working with Composite Kanban Layout After creation of a composite kanban, the Kanban Builder will open and it will contain one container. Hover mouse on container (1) - it will be highlighted: Click on highlighted area. Click on "+" markers to add containers: By default container will be added at the proper side and both containers (existing and new) will take all available room together. Adjacent containers will get equal sizes: If click on container, a "Container Properties" will be opened at the right sidebar: Properties are: * **Left** - position of the container relatively to left side of Kanban. Can be changed by Kanban admin if this container is not leftmost one. * **Top** - position of the container relatively to top side of Kanban. Can be changed by Kanban admin if this container is not topmost one. * **Width** - width of the container in % of Kanban width. Can be changed by Kanban admin if this container and at least one adjacent neighbor can be resized horizontally together. * **Height** - height of the container in % of Kanban height. Can be changed by Kanban admin if this container and at least one adjacent neighbor can be resized vertically together. Changing one property can cause changes in other: {% hint style="info" %} System will show available value ranges of these properties and will auto-correct them when user try to set them to impermissible values. Allowed values are depending on current containers layout. If some properties are blocked it means that selected container has no place to expend/shift or can not be shrank without causing a gap. {% endhint %} {% hint style="warning" %} If any of container properties will be out of permitted range, system will not allow adding new containers and show proper warning: {% endhint %} Selected adjacent containers can be merge into one by clicking on "merge" link: Containers can be merged into one only when: * resulting container will be rectangle * all of them contain no more than 1 kanban If containers can not be merged system will not allow it. User can remove selected container(s) by clicking on button "Delete" on top of kanban. Sizes and positions of adjacent containers will be recalculated to get rid of possible gaps. {% hint style="warning" %} Note: not all gaps can be removed automatically. In this case system will not allow to delete container and show proper warning message. {% endhint %} # Configuring Parent Kanban When you go to Composite Kanban Builder after creation of a new kanban, go to Composite Kanban properties. Click "create" link at the right sidebar (this link can be called "edit" if configuration has been saved already at least once): Kanban configuring dialog popup will be opened: Configuration of parent composite kanban parts is the same as for a [standard kanban](/get-started/how-to-build-a-simple-kanban-using-creation-wizard-abilities). # Configuring Child Kanban [Create or edit](/composite-kanban/introduction/how-to-create-a-composite-kanban) a parent composite kanban, [configure it](/composite-kanban/working-with-composite-kanban-layout/configuring-parent-kanban), set the composite kanban [layout](/composite-kanban/working-with-composite-kanban-layout), then click the selected container: Select kanban from the list in the popup that will appear: Name of selected kanban will appear in container and it's properties will be opened at the right sidebar: All these properties are optional. * By default title contains the name of selected child kanban. You can change this title - it will not affect the child kanban, just show another text in the kanban container. {% hint style="info" %} This can be useful when several containers have the same title due to the same child kanbans. {% endhint %} * Set API name if necessary. Hover mouse on "i" icon to see restrictions in the tooltip. * Populate description, if needed. * Check "Hide Columns Header" checkbox if you do not want to see columns and groups headers. {% hint style="info" %} Child Kanban Name (7) is a link that opens child kanban in editor in the new browser tab. {% endhint %} Input and Output relations will be shown after you [configure connections](/composite-kanban/connections-between-kanbans) with other child kanbans. Set Input Variables if necessary. Configure CSS Styles for child kanban container if needed. # Connections Between Kanbans Composite Kanban allows you to drag cards between child kanbans. To manage this, you set relations between child kanbans. These relations are set for cards. Together, they form connections between kanbans. To use connections, a composite kanban should have at least 2 [containers](/composite-kanban/working-with-composite-kanban-layout) with [child kanbans](/composite-kanban/working-with-composite-kanban-layout/configuring-child-kanban) configured. If you hover over any child kanban, an "Add Connection" icon will be shown: If you hover over this icon, a tooltip will be shown: To start setting a connection, drag this icon to another Kanban container and drop it there: A "Configure Connections..." popup will appear. It will contain data for Source Kanban (which card will be dragged from) and Target Kabnan (which card will be dropped to). By default popup will contain: * names of these Kanbans * list of cards from Source Kanban Each card will show a number of its connections: {% hint style="info" %} Source and Target Kanbans names are links - if click them, proper Kanbans will be opened in Kanban Builder in the new browser tab. {% endhint %} Select card in the Source Kanban you want to configure relations to (realtions are the same as Column Junctions on standard dashboard). A list of Source Columns belonging to the Source Kanban will appear. Each column will show a number of it's connections: If select a Column of the Source Kanban, the list of available Target Columns (belonging to the Target Kanban) will be shown. Each Target Column will show amount of Actions that will be executed by card dropping: {% hint style="warning" %} Each Source Column for each Card has the own list of Target Columns with own actions. {% endhint %} Check Target Columns where selected Card can be dropped from selected Source Column to. Badges with numbers of connectors will become yellow, and numbers of Actions will become red - this indicates that proper cards and columns have no actions set to their connectors: Select Target Column. A list of Actions set for this connection (Card - Source Column - Target Column) will be shown. By default it is empty. Also, Source/Target Drop Behavior forms will be displayed: {% hint style="info" %} You can select a Target Column that was not checked. After adding at least one action it will become checked, thus, a connection will be set automatically. {% endhint %} Click "Add" link to add a new or existing Action or Action Group (this process is the same as adding [Actions on Standard Dashboard](/components/actions-action-groups)). You can add several actions by selecting them together. After being added Actions and Action groups will appear in the list. They can be rearranged by clicking ordering arrows and deleted. To delete actions check checkboxes near unnecessary actions and click "delete" link. Also, Actions / Action Groups can be edited by clicking "Edit" buttons: Actions can be copied to another connections. To copy actions and action groups, select them with checkboxes and click "Copy" link . After this proper information will be displayed. Actions will be copied to built-in application clipboard: To paste copied actions first select necessary Target Column in necessary relation (it can be a connection between other kanbans too), then click "Paste" link. Actions will be pasted from app clipboard: If copy another actions, they will replace previously copied in the app clipboard. To clear the app clipboard click the proper link. To set how should behave Source and Target Columns when card is dragged and dropped, select necessary behaviors in the proper form. Behavior of source column can be set to: * **Remove Card** - card will disappear from the source column * **Refresh** - source column contents will be refreshed and the card will remain there * **Remove Card and Refresh** - card will be removed from the source column; source column contents will be refreshed; if the record, represented by dragged card, still match the source column conditions, card will appear there again * **Do Nothing** - source column will not change it's contents Behavior of the target column can be set to: * **Refresh** - target column contents will be refreshed * **Do Nothing** - target column will not change it's contents After connections has been set and saved, an Output Relations section of the Source Kanban properties sidebar will show it. If click the link representing the connection, it will be opened in "Configure Connections..." popup for editing: The same connection will be also shown in "Input Relations" section of the Target Kanban properties sidebar: ### Useful hints If you have a composite kanban with several containers and they contain the same child kanban (for example, [Calendar Dashboard](/composite-kanban/examples/calendar-dashboard)), you do not need to configure connectors between each pair of containers. The system stores connections between kanbans, not between containers. For example: * You have a composite kanban with containers A, B, C, D, E and F * Containers A, B, C and D have child kanban X, and containers E and F have child kanban Y * In this case if you configure connections in the direction A -> F, you make junction X -> Y and you do not need to duplicate it with other connections (A->E, B->E, B->F, C->E, C->F, D->E, D->F). And to make junction from Y to X (Y->X), you need to configure only one of the following connections: E->A, E->B, E->C, E->D, F->A, F->B, F->C, F->D. If you configure: * connections between containers that all are containing the same child kanban, and * the child kanban has junctions and actions configured (like on [Calendar Dashboard](/composite-kanban/examples/calendar-dashboard)) you do not need to repeat these junctions and actions in the Connections popup. The only thing you need is to add actions to the junction between source and target column when they are the same. In a composite kanban, the same column can be a source and a target (in different containers). So, in the Calendar Dashboard example: * actions for card dragging are configured in the child kanban * junctions in the child kanban are set for all source columns to all target columns * dragging from the source column to itself is not allowed within the child kanban * the composite kanban has connections between the child kanban as source and the same kanban as target * in these connections each source column is connected to one target with the same name and has proper action set, because dragging to other columns is already allowed in the child kanban # Examples # !! Calendar Dashboard The Calendar Dashboard represents events in monthly calendar and allows to manage them by simple dragging. Here is how this dashboard can look like: This Kanban is a [Composite Dashboard](/composite-kanban/introduction) with 5 [containers](/standard-kanban/configure-column/how-to-configure-column-container-and-filters); each of them contains the same [Standard Dashboard](/standard-kanban/getting-started), initialized with different [Input Variables](/composite-kanban/working-with-composite-kanban-layout/configuring-child-kanban).\ Columns in this dashboard represent days, and cards in these columns are corresponding to events. Dragging events from one column to another changes their start dates. If click on event, its detailed data will be shown in the form, where it can be edited. To make a such dashboard administrator should do actions listed below: ### Make an Event Form * [Set Card Layout](/standard-kanban/configure-card/how-to-configure-card-layout) to "Form". * Click "+" button to add new Form. Create [new form](/components/forms/basics/form-building-overview) with these properties: | Property | Value | | --------------------- | ------------------------------------------------------------ | | Name | **Event form** | | Data Source Object | **Event** | | Multi Page Form? | false | | Show navigation panel | true | | Buttons configuration | Check "Save" button for "Edit" mode only. Uncheck other. | | Header configuration |

{$Event.Subject} (for all modes)

| * Add these elements to the form: | # | Type | Name | Title | Properties | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------ | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 1 | Section | section |


|
  • Columns: 2
  • Show on Edit page: true
  • Show on View Page: true
  • Scrollable: false
| | 2 | Button | button | Close |
  • Show on Edit page: true
  • Show on View Page: true
| |

The following elements all should be added into section configured above.
All these elements should be Data Source Fields:

| | | | | | **#** | **Data Source Field** | **Name** | **Title** | **Properties** | | 3 | Subject |

Subject

|

Subject

|
  • Required: false
  • Read Only: false
  • Show on Edit page: true
  • Show on View Page: true
  • Instructions: not set
  • Conditional Styles: not set
  • Events: not set
  • View Type (for picklisis): Single list
  • Hide 'None' (for picklists): false
  • Options Groups (for picklists): not set
| | 4 | Type | Type | Type | | | 5 | EventSubtype |

EventSubtype

|

Subtype

| | | 6 |

StartDateTime

|

StartDateTime

|

Start Date Time

| | | 7 |

EndDateTime

|

EndDateTime

|

End Date Time

| | | 8 | Description |

Description

|

Description

| | * Add these Form Actions:
#Action Name and TitlePropertyValue
1Close PanelTypeForm API
Form Action TypeFire Event
Namee.FLX_KB:ApplicationEvent
Parameters

Name: data
Value Type: Object
Value:

{"componentType":"c:KanBanPanelComponent","method":"hideCard"}
Has Conditionsfalse
2Refresh ColumnTypeForm API
Form Action TypeFire Event
Namee.FLX_KB:ApplicationEvent
Parameters

Name: data
Value Type: Object
Value:

{"componentType":"c:KanBanColumnComponent","method":"refresh","params":{"kanbans":"{$FormParameters.kanban}"}}
Has Conditions
true
Conditions1Form.StartDateTime not equal to {$Event.StartDateTime}
2
Form.EndDateTime not equal to {$Event.EndDateTime}
Conditions logic{1} OR {2}
* Add the following events to the form: | # | Element what event is added to | Event properties | Event Handler | | - | ------------------------------ | ---------------------------------------------------------- | ------------------------------------------------------------------- | | 1 | Form |

Type: onAfterSave
Enabled: true

| "**Refresh Column**" action without parameters | | 2 | "Close" button |

Type: onClick
Enabled: true

|

"Close Panel" action without parameters

| ### Make new standard dashboard. #### Create dashboard * Go to [dashboard creation wizard](/standard-kanban/basics/how-to-create-a-standard-kanban) and create new standard dashboard. * Give it a "**Weekly Calendar Dashboard**" name and some description. * Select "**White**" theme. * Save dashboard and go to Kanban Bulder. #### Configure columns * Add [7 columns](/standard-kanban/configure-kanban/working-with-kanban-layout) to the dashboard. * Name columns from "Sunday" to "Saturday" * Set column descriptions to digits from "0" to "6" (thus, descriptions will contain indexes of proper weekday) * Leave columns widths default ("auto") * Leave columns "Is Active" checkboxes default (checked) * [Set these properties](/standard-kanban/configure-column/how-to-sonfigure-column-properties) to all columns: * Data Source Type = **SObject** * Data Source = **Event** * Order = **Start Date Time, asc** * Page Size = **5** * [Set the following conditions](/standard-kanban/configure-column/how-to-configure-column-data-source#sobject-data-source) to the columns and add 1 [cell](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons) to their headers with the following values: |

#

|

Column Name

| **Conditions** | **Header Cell Value** | | | | | ----------------------------- | --------------------------------------- | -------------------------- | ----------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------- | ------------------------------------------------ | | **Field Name** | **Operator** | **Type** | **Value** | | | | | 1 | Sunday | Start Date Time | greater than | Formula | FORMULA\[DATETIMEVALUEGMT({$Variables.startDate})] |

{$Variables.startdate} (Sunday)

| |

Start Date Time

| less than |

Formula

|

FORMULA\[DATETIMEVALUEGMT({$Variables.startDate} + HOURS(24))]

| | | | | 2 | Monday |

Start Date Time

|

greater than

|

Formula

|

FORMULA\[DATETIMEVALUEGMT({$Variables.startDate}) + 1]

| FORMULA\[{$Variables.startdate} + 1] (Monday) | |

Start Date Time

|

less than

|

Formula

|

FORMULA\[DATETIMEVALUEGMT({$Variables.startDate} + 1 + HOURS(24))]

| | | | | 3 | Tuesday | Start Date Time | greater than |

Formula

| FORMULA\[DATETIMEVALUEGMT({$Variables.startDate}) + 2] | FORMULA\[{$Variables.startdate} + 2] (Tuesday) | |

Start Date Time

|

less than

|

Formula

| FORMULA\[DATETIMEVALUEGMT({$Variables.startDate} + 2 + HOURS(24))] | | | | | 4 | Wednesday |

Start Date Time

|

greater than

|

Formula

| FORMULA\[DATETIMEVALUEGMT({$Variables.startDate}) + 3] | FORMULA\[{$Variables.startdate} + 3] (Wednesday) | |

Start Date Time

|

less than

|

Formula

| FORMULA\[DATETIMEVALUEGMT({$Variables.startDate} + 3 + HOURS(24))] | | | | | 5 | Thursday |

Start Date Time

|

greater than

|

Formula

| FORMULA\[DATETIMEVALUEGMT({$Variables.startDate}) + 4] | FORMULA\[{$Variables.startdate} + 4] (Thursday) | |

Start Date Time

|

less than

|

Formula

|

FORMULA\[DATETIMEVALUEGMT({$Variables.startDate} + 4 + HOURS(24))]

| | | | | 6 | Friday |

Start Date Time

|

greater than

|

Formula

| FORMULA\[DATETIMEVALUEGMT({$Variables.startDate}) + 5] | FORMULA\[{$Variables.startdate} + 5] (Friday) | |

Start Date Time

|

less than

|

Formula

|

FORMULA\[DATETIMEVALUEGMT({$Variables.startDate} + 5 + HOURS(24))]

| | | | | 7 | Saturday |

Start Date Time

|

greater than

|

Formula

| FORMULA\[DATETIMEVALUEGMT({$Variables.startDate}) + 6] | FORMULA\[{$Variables.startdate} + 6] (Saturday) | |

Start Date Time

|

less than

|

Formula

| FORMULA\[DATETIMEVALUEGMT({$Variables.startDate} + 6 + HOURS(24))] | | | | * Set **height:22px** [CSS style](/standard-kanban/tools/configuring-css-styles) to headers of all columns * Set **font-size:14px** CSS style to cells in headers of each column #### Configure Card * [Add 1 card](/standard-kanban/configure-card) to dashboard and name it "**Event**" * Set Data Source Type to "**Event**" Card Layout configuration: * Set [card layout](/standard-kanban/configure-card/how-to-configure-card-layout) to **Form**. Select **Event Form** (which was created earlier and described above)in the lookup and set its parameters to these: * kanban = **{$Card.Kanban}** * mode = **edit** * id = **{Event.Id}** * Set Position of Card Layout to **Modal** * Check "**Hide Footer**" checkbox * Set Text of layout header to **{event.Subject}** ("Title Settings section of Header Configuration tab) [Card Compact Layout](/standard-kanban/configure-card/how-to-configure-card-compact-layout) configuration: * Set Card to Collapsible ("General" section of Card Settings) * Set CSS styles of Card to **padding:0px** * Set Value of the default Card Component to **{Event.Subject}** * Set its CSS Styles to **background-color:#c6c9ff; padding:0px 5px;** * Add one more Text Card Component under default and: * Set its Value to **{Event.Type}** * Set its CSS Styles to **padding:0px 5px** * Add third Text Card Component under previous and: * Set its Value to **FORMULA\[FORMAT({Event.StartDateTime}, 'hh:mm a')]** * Set its CSS Styles to **padding:0px 5px** * Add fourth Text Card Component at the right of third (it will become 50% wide) and: * Set its Value to **FORMULA\[TOTEXTDURATION({Event.DurationInMinutes}, 24)]** * Set its CSS Styles to **padding:0px 5px; text-align:right;** #### Configure Column Junctions Set these [column junctions](#configure-column-junctions) to Card in all columns: * Drag-n-drop allowed to **all** columns * Drop behavior left default to all columns (source column = **Remove Card**, target column = **Refresh**) #### Configure Card Actions To add a sense to Cards dragging [some actions are necessary](#configure-card-actions). In this example action will be the same for all columns, so, no need to configure them separately. Click on card and add a new action with these properties: * Name = **Update Event Start Date** * Type = **Field Update** * Execute = **Always** * Status = **Active** * Context Object Type = **Event** In the Field Update Settings section configure this: * Object Name = **Event** * Fields:
NameValue
Start Date Time
FORMULA[{Event.StartDateTime} + (({$Variables.startDate} + {$TargetColumn.Description}) - DATETIMEVALUE(DATEVALUE({Event.StartDateTime})))]
End Date Time
FORMULA[{Event.EndDateTime} + (({$Variables.startDate} + {$TargetColumn.Description}) - DATETIMEVALUE(DATEVALUE({Event.EndDateTime})))]
* Conditions: * **Activity ID eqials {event.id}** ### Make new composite dashboard #### Create dashboard * Go to [dashboard creation wizard](/standard-kanban/basics/how-to-create-a-standard-kanban) and create new composite dashboard. * Give it a "Calendar Dashboard" name and some description. * Select "White" theme. * Save dashboard and go to Kanban Bulder. #### Configure containers and child dashboards * Make dashboard have [5 containers](/standard-kanban/configure-column/how-to-configure-column-container-and-filters) in vertical stack. * Leave their properties default * Set their titles from "**Weekly Calendar 1**" (topmost container) to "**Weekly Calendar 5**" (bottommost container) * Select previously created "**Weekly Calendar Dashboard**" kanban as [child dashboard](/composite-kanban/working-with-composite-kanban-layout/configuring-child-kanban) in each container * Set API names for containers and Input Variables for each child dashboard: | Container | Container API name | Input Variable name |

Input Variable value

| | ---------------------------- | ------------------ | -------------------- | ---------------------------------- | | Weekly Calendar 1 |

week1

|

startDate

|

{$Variables.week1Start}

| |

Weekly Calendar 2

|

week2

|

startDate

|

{$Variables.week2Start}

| |

Weekly Calendar 3

|

week3

|

startDate

|

{$Variables.week3Start}

| |

Weekly Calendar 4

|

week4

|

startDate

|

{$Variables.week4Start}

| |

Weekly Calendar 5

|

week5

|

startDate

|

{$Variables.week5Start}

| #### Configure connections between child dashboards You do not need to [configure connections](/composite-kanban/connections-between-kanbans) from dashboard of each container to every other because the dashboard is the same for all containers. It will be enough to set them one time from any container to any other. Set connections to these: * Source Kanban = **Weekly Calendar Dashboard** * Target Kanban = **Weekly Calendar Dashboard** * Card Name = **Event** * Source Columns: all (set one connection per each) * Target Column: for each source column select target column with the same name * Action on drop: configure new with these properties: * Name = **Update Event Start Date** * Type = **Field Update** * Object name = **Event** * Conditions = **Activity ID equals {event.id}** * Fields:
NameValue
Start Date Time
FORMULA[{Event.StartDateTime} + (({$Variables.startDate} + {$TargetColumn.Description}) - DATETIMEVALUE(DATEVALUE({Event.StartDateTime})))]
End Date Time
FORMULA[{Event.EndDateTime} + (({$Variables.startDate} + {$TargetColumn.Description}) - DATETIMEVALUE(DATEVALUE({Event.EndDateTime})))]
* Copy this action onto each connection set Connections should look like this: #### Configure actions and action groups Create the following Actions of "**Define Variable**" type. Set Variable Type to **Text** in all actions:
#Action nameVariable nameVariable value
1Get Previous MonthcurrentDate
FORMULA[FORMAT(ADDMONTHS(DATEVALUE({$Variables.currentDate}), -1), 'yyyy-MM-dd')]
2Get Next MonthcurrentDate
FORMULA[FORMAT(ADDMONTHS(DATEVALUE({$Variables.currentDate}), 1), 'yyyy-MM-dd')]
3Update Week 1 Start Variableweek1Start
FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01')))]
4Update Week 2 Start Variable
week2Start
FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 7]
5Update Week 3 Start Variableweek3Start
FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 14]
6Update Week 4 Start Variable
week4Start
FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 21]
7Update Week 5 Start Variable
week5Start
FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 28]
8Update Week 1 Variable
week1
FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))), 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 6, 'dd/MM/yyyy')]
9Update Week 2 Variable
week2
FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 7, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 13, 'dd/MM/yyyy')]
10Update Week 3 Variable
week3
FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 14, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 20, 'dd/MM/yyyy')]
11Update Week 4 Variable
week4
FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 21, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 27, 'dd/MM/yyyy')]
12Update Week 5 Variable
week5
FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 28, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 34, 'dd/MM/yyyy')]
Create 2 action groups and add actions from configured above to them (in the order specified below): 1. name = **Get Previous Month Action Group** * actions: 1. Get Previous Month 2. Update Week 1 Start Variable 3. Update Week 2 Start Variable 4. Update Week 3 Start Variable 5. Update Week 4 Start Variable 6. Update Week 5 Start Variable 7. Update Week 1 Variable 8. Update Week 2 Variable 9. Update Week 3 Variable 10. Update Week 4 Variable 11. Update Week 5 Variable
2. name = **Get Next Month Action Group** * actions: 1. Get Next Month 2. Update Week 1 Start Variable 3. Update Week 2 Start Variable 4. Update Week 3 Start Variable 5. Update Week 4 Start Variable 6. Update Week 5 Start Variable 7. Update Week 1 Variable 8. Update Week 2 Variable 9. Update Week 3 Variable 10. Update Week 4 Variable 11. Update Week 5 Variable #### Configure Dashboard Basic Configuration tab * Set Icon to **action:new\_event** Statistic Configuration tab * Add one [Cell](/standard-kanban/tools/configuring-rows-cells-menus-and-buttons#cells) of Text type * Set its CSS Style to **font-size: 24px;** * Set its Value to **FORMULA\[FORMAT({$Variables.currentDate}, 'MMMM, yyyy')]** Variables Configuration tab * Add these variables:
#Variable NameVariable Value
1currentDate
{$System.Date}
2week1Start
FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01')))]
3week2Start
FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 7]
4week3Start
FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 14]
5week4Start
FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 21]
6week5Start
FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 28]
#### Buttons Configuration tab * Add the following buttons:
1. Previous Month * type = **Icon** * title = **Previous Month** * icon = **utility:left** * handler: * type =**Action Group** * value = **Get Previous Month Action Group** * parameters not set * success handler: * type = **Kanban API** * value = **Refresh Kanbans** * parameters not set
2. Next Month * type = **Icon** * title = **Next Month** * icon = **utility:right** * handler: * type =**Action Group** * value = **Get Next Month Action Group** * parameters not set * success handler: * type = **Kanban API** * value = **Refresh Kanbans** * parameters not set # Howtos and Best Practices # How to Pass Variables Between Parent and Child Kanbans There are two ways to pass variables between parent and child kanbans: * Input Variables * Update Variables action ### Input Variables {% hint style="warning" %} Input Variables are way to pass variables from Parent to Child Kanban only. {% endhint %} Input Variables are passed to the child kanban immediately when it is loaded inside the parent. These variables can be: * already defined on the child kanban. When Input Variables have the same names as variables configured in the child kanban, their values override those variables on the child kanban * new custom variables To set Input Variables select a [Child Kanban](/composite-kanban/working-with-composite-kanban-layout/configuring-child-kanban) in the Composite Kanban editor and click "add" link in the properties sidebar: A Variable entry form will appear. If selected child kanban has variables configured, their names will be added to Name field picker: You can select one of these names. If you want to add other variable, select "*...Custom*" option - pickilst will transform to text input and you can type desired variable name. Enter necessary value or use ">>" button to show assistive Formula Editor. Click "Remove Variable" button to deleteariable entry: Save Kanban. Now, when it will be opened, these input variables will be passed to child Kanban. ### "Update Variables" Action This action uses Kanban API "Update variables" method. It works for any Kanban, so, we can do this action as for Child, as for Parent kanbans. This action can't be executed automatically when Kanban is loaded, so, it should be set as a handler on some Child Kanban element: This method requires two parameters: "variables" with necessary variables and their values in JSON format and "kanbans" with list of Kanban IDs or names (separated with comma or in JSON format): ### Using Kanban API Names The main trouble in using of this method is that kanban IDs is unknown by default (and will be changed by system while cloning, importing or deployment). Also Kanban name can be changed, become non-unique or too long. At east, it is not good idea to hardcode something dynamic. Child Kanbans can have API names. They can be set in the [child Kanban properties](/composite-kanban/working-with-composite-kanban-layout/configuring-child-kanban): These API names can be used instead of Kanban IDs in various actions (like Update Variable) and will be usable even when IDs of kanbans were changed. ### Solving problems: how to know parent Kanban ID in the child kanban Since API names can be set only to Child Kanbans, in is no simple way to make parent Kanban a target for Kanban API actions. In this case we can use Input Variables to pass parent Kanban ID (or name) to children: 1. Set some variable (e.g. name it "ChildVar") in parent Kanban 2. Set Input Variable for Child Kanban and give it "{$Kanban.ID} value 3. Configure some element with in Child Kanban. Give it a handler which will update some variable in the parent one, and set {$Variables.parentID} as value of "kanbans" parameter 4. Set "variables" parameter to some value (e.g, {"ChildVar":"Value\_from\_child\_kanban"}) Now if click this child Kanban element it will trigger Update Variable action on target (parent) Kanban. You can know this using Debug Console: 1. See the Parent Kanban variable initial value 2. Close console and click on element to trigger "Update Variable" action 3. See the Parent Kanban variable new value: {% hint style="info" %} You may not define a "ChildVar" variable on Parent Kanban - in this case it will have no initial value, but will be created when Update Variable action will be executed first time. {% endhint %} # Forms The Flexi Kanban Forms is very flexible and powerful tool for building lightning ready user interface. The Flexi Kanban Forms could be used in any place in your SF application. The Flexi Kanban Form provides a powerful drag-and-drop form builder that includes extensive functionality: * validation across fields * components events * custom actions * dynamic hide/show/clear fields and page sections based on conditions * multi-page form wizards * nested forms that allow a “form within a form” capability so that forms can be re-used, and can be from any data source * lists and related lists # Basics With the Flexi Kanban forms you can build fully dynamic interface that may interact with user and any other SF application components.
Form Building OverviewForm Building Overview

Working with

Form Settings

Working with Form Settings
Working with Source Object fieldsWorking with Source Object fields

How to Preview

the Form

How to Preview the Form
How to configure the Form Sharing RulesHow to configure the Form Sharing Rules
Understanding the Form DependenciesUnderstanding the Form Dependencies
Working with Conditional StylesWorking with Conditional Styles
Working with ConditionsWorking with Conditions
Search Over the FormSearch Over the Form
# Form Building Overview Navigate to Forms tab and click "New" button. New Form screen will show up. First, select a Data Source. Data source is object the form is associated with: {% hint style="success" %} If you can't find your object in the list it means it maybe has not been added to list of "Allowed objects" on "Settings" tab (Settings -> [Objects Settings](/references/application-settings#object-settings)). {% endhint %} Once data source is selected, all object required fields will appear in a new form default section. Other object fields you can find in the "Data Source Fields" section of the left sidebar. Fields are sorted alphabetically and grouped in collapsible sections: User can add to a form other type of fields as: * [Virtual fields](/components/forms/components/add-and-remove-form-components#virtual-fields) * [Options](/components/forms/components/add-and-remove-form-components#options) (sections, blank spaces, custom buttons, lists, file and image inputs, static texts, etc.) * [Related Lists](/components/forms/components/add-and-remove-form-components#related-lists) {% hint style="info" %} See proper article about fields and other form components and how to add them to the form. {% endhint %} Using components of the Right sidebar you can: * Settings - set basic properties of form or form elements * Context - pick fields of available context objects * Search - find location of form elements Form builder toolbar contains the following components: * **"Close"** button - closes currently opened form and returns to page what user navigated from. If there are unsaved changes, asks for confirmation. * **"Save"** button - saves changes in currently open form. If this button is not disabled, this indicated the presence of unsaved changes. * **"Delete"** button - deletes selected elements from the form canvas. * **"Action"** menu contains the following items: * **Run** - helps to [preview the form](/components/forms/basics/how-to-preview-the-form). * **Open Sharing Rules** - user can [share the form](/components/forms/basics/how-to-configure-the-form-sharing-rules) to the Individual User, Public Group, Roles, Roles and Subordinates. * **Clone** - clones the current form. * [**Show Dependencies**](/components/forms/basics/understanding-the-form-dependencies) - helps to see where the current Form is used. * **"Tools"** menu contains the following items: * [**Fields**](/components/forms/tools/additional-fields) - allow to add needed fields to form context objects (useful in some cases) * [**Variables**](/components/forms/tools/variables) - allow to manage form variables * [**Form Action**s](/components/forms/tools/form-action) - allow to configure form actions * **"Help"**- links to the Documentation web site. # Working with Form Settings Form Settings allow to set Source object, customize form name, labels, look and feel, buttons and configure form events. When new Form created user is redirected to the form page with Settings section opened: ### General Settings * **Name** - Name of the Form in the list of the forms. {% hint style="success" %} Note: Name can differ from the Header which is shown to the user {% endhint %} * **ID** - System Id of the form. Used when you need to refer the form from other places. Value is read-only. The field is not visible when you create a new form and will be displayed after first save. * **Description** - Just a description, that will be shown only in the builder and list of forms. Not mandatory. * **Data Source** - Select the object which you want to work with in the current form. When Data Source is selected, all fields from the object will become available for adding to the Form on Data Source Fields section. * **Multi Page Form** - Check this checkbox if you want to make form look as a wizard with many pages (wizard steps). The page will be visible only if it has at least one non-empty component inside (list, nested from or section with at least one element added). * **CSS Styles** - Allows to customize form appearance using CSS. Click to show a proper popup. You can customize each component on the form separately and even write own styles for necessary elements, even not for form. Select Component to easily add proper selector to the input text area and add needed CSS rules. {% hint style="warning" %} Note: `@@` and `##` in the styles builder will be substituted with actual unique prefixes generated by SalesForce for Form and Form container. Do not replace them with hard-coded values because they are not constant. {% endhint %} * **Show Navigation Panel** - this allows to show/hide navigation panel which allows to navigate between forms if you redirect to other form from the current one. * **Use Standard FLS Settings** - if checked Form will render sObject fields in accordance with Field Level Security settings for the current user's profile. **Field behavior when "Use Standard FLS Settings" turned on:** * If field is not visible for current Profile in FLS, it won't be displayed in Data Source Fields form builder section (so it could not be added to the form canvas) and in Form Renderer. * If field was added to the form, and after that Profile got updated so that field is not visible for user, field will be displayed on the canvas in Form Builder, but won't be visible in Form Renderer. * If field is visible but not editable for profile, Form Renderer will display field in read only mode. ### Buttons configuration Allows to show/hide specified buttons in Edit/View mode of the form. Also you can customize each button Label. Select Settings icon next to the button to change the label. Some buttons allow to set additional functionality. Also you can customize each button Label. Click Settings icon next to the button to change the label. Some buttons allow to set additional functionality. **Save** - allows to add confirmation message on form Save. It allows to specify the following settings: * Label - change text on the button. * Show on edit layout - may be turned off on form that shown with editable fields. Is usable in situations when user wants to override standard Save function with custom actions. * Confirmation message - allows to modify message that will be shown after form saving. * **Close** - just closes the form without saving changes. Has only Label and Show on edit layout options to configure. * **Reset** - reverts form fields to values they got from server on from load. Has only Label and Show on edit layout options to configure. * **Record View** - allows to Open the record which data form is displaying. Has these options to configure: * Label * Show on edit layout / Show on view layout - turn off if no need to show this button on the form in edit/view mode. * Open in New Window - specify if record will be shown in new window or current. {% hint style="info" %} Note: If no record has been passed to the form, the Record View button will not be shown. {% endhint %} ### Header configuration Allows to set heading for the form in each mode. By default there are "New Form" texts, you can change it to any necessary. Merge fields are supported here: ### Events Allows to handle the form events. Click "Add New" button to add event handler. Events can be executed in different cases: * **OnLoad** - when the form is loaded * **OnBeforeSave** - action will be executed when user clicks Save. It will run before the form is Saved. * **OnAfterSave** - action will be executed when user clicks Save. It will run after the form is Saved. * **OnActivate** - action will be executed when user navigates between forms using links in Navigation Panel. # Working with Source Object fields When Source Object is selected you can start working with its fields and with fields of related objects. ### Adding Fields to the Form To add a new field to the form go to the "Data Source Fields" section of the left sidebar. Fields are sorted alphabetically and grouped in collapsible sections: {% hint style="info" %} Note! Before adding the field you need to add a Section. See more info for working with sections at [Section Component](/components/forms/components/option-section) article. {% endhint %} To add a field from related object in the "Selected source" field pick the related object you need and the list of available fields will be replaced with related object fields. Drag and drop the field to the Form Section: ### Working with fields Each type of field has its icon: Click the field on Canvas to modify field properties. The field has standard list of properties (see [here](/components/forms/components/components-basic-properties)) and it's own list of properties: ### Validation Rules [Validation rule](/components/forms/components/components-validation-rules) allows to validate the field value before saving a record or by executing Validate form action. Click "Add New" button at Validation Rules Section: Fill in Error Message, Validation Rules: {% hint style="info" %} You can also add Conditions and the Validation will work only when the Condition is true. {% endhint %} ### Conditional Styles You can hide/show/disable/make required field conditionally. See more info at Using [Conditional Styling](/components/forms/basics/working-with-conditional-styles) for Form Fields . ### Events You can add onChange Events for the field. See more info on working with [Events](/components/forms/tools/event). --- [Next Page](/llms-full.txt/1)