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: 

Id in (select AVTRRT__Account_Manager__c from AVTRRT__Job__c where AVTRRT__Account_Manager__r.IsActive = true)

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.

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.

  • 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: 

FORMULA[IF(CONTAINS({$Variables.selectedAcctMgrs}, {$Variables.selAcctMgrID}), JSTRING(JREMOVE(JPARSE({$Variables.selectedAcctMgrs}, ','), {$Variables.selAcctMgrID})), JSTRING(JPUT(JPARSE({$Variables.selectedAcctMgrs}, ','), -1, {$Variables.selAcctMgrID})))]

  • 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.

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:

  • 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:

{1} AND {2} FORMULA[IF({$Variables.selectedAcctMgrs} = '{OPEN_SQR_BKT}{CLOSE_SQR_BKT}','','AND {3}')] order by AVTRRT__Account_Manager__c asc

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:

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;

  • 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.

Last updated