Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  • 📖  Manual

  • 👋Welcome

    Welcome to Tadabase

    What Is No-Code?

    Tadabase Support

    Getting Started With Tadabase

    Platform Overview

    🧰The Data Builder

    Data Tables

    Fields

    Text Fields

    Personal Fields

    Number Fields

    Date Fields

    Option Fields

    File and Image Fields

    Equation Fields (Category)

    Equation Fields

    Connection Fields

    Date Equation Examples

    Records

    Record Logs

    Import Templates

    Export Templates

    Automating Tasks

    Number Equation Examples

    Text Equation Examples

    Multi-Function Equation Examples

    ✏️Page Builder

    Page Builder Overview

    Layouts

    Pages

    Components Overview

    PDF Pages

    📗System Components

    System Components Overview

    Menu

    User Menu

    Breadcrumbs

    PDF Print (Alpha)

    Link Button

    Login

    Signup

    Profile

    HTML

    Image

    Subscriptions (Alpha)

    📘Data Components

    Data Components Overview

    Form Component

    Table Component

    List Component

    Kanban Component

    Calendar Component

    Resource Component

    Map Component

    Timeline Component

    Accordion Component

    Card Component

    Chart Component

    Search Component

    Import Component

    Data Source

    Data Source Filtering

    Links

    Display Rules

    Inline Editing

    Data Component Visual Directory

    Custom Component

    Custom Component Helpers

    Writing Your Own Component Helpers

    🙋Users

    Users

    Roles

    Single Sign On (SSO)

    Adding Stripe Subscriptions

    🔒Security and Reliability

    Tadabase Builder Security

    App Security

    User Security

    🔗Integrations

    Zapier Integration

    Using Webhooks

    Saving files to Dropbox

    Adding PayPal payment buttons to your app

    Exporting records to Google Sheets

    Viewing data in Microsoft BI

    Chat Widgets

    REST API

    Using SendGrid for emails

    Saving files to AWS S3 Bucket (IAM Method)

    Incoming Webhooks

    Embeddable Components

    Saving Files to Custom S3 Bucket (Account Method, Recommended)

    PDF Forms

    Stripe Checkout

    JavaScript Callbacks and Actions

    Twilio Integration

    ⚙App Settings

    General Settings

    Layout & Format Settings

    Custom Domain

    Customizing CSS

    Changing app themes

    Support Settings

    404 Error Page

    💳Account

    Plans

    Managing Your Account

    Sharing your app builder

    Managing your Apps

    🧩Pipes

    Introduction to Pipes

    Adding Pipes

    Using Pipes

    PDF Gen V2

Categories
📖 Manual
📘 Data Components
Kanban Component

Kanban Component

What is Kanban?

The Kanban component enables you to view the data you wish to add in 'swim lanes'. 

Why use Kanban? 

Kanban helps you gradually improve the delivery of your products and services. It does so by helping you eliminate bottlenecks in your system, improve flow and reduce cycle time. It helps you deliver more continuously and get faster feedback to make any changes that may be needed by your customer.

When should you use Kanban?

Kanban can only be used when there is a radio field which will be utilized for tracking each of the lanes. For example, if you have a radio field called "Status" with several options like: "Open" "Pending" "Completed" each of these can be a lane on the kanban board. 

 

Adding Kanban

To add a Kanban choose the Kanban component and then choose the data table to be used for this Kanban. 

Only tables which contain at least one radio field will be displayed in the list of tables.

Once you've chosen the table, you can choose Quick Add which will add the Kanban with some default settings. Alternatively, you can choose Customize to configure all the settings manually. 

Choosing QuickAdd is simply a shortcut, you can always go right back into the component to make any changes necessary. 

 

Inside the Kanban component you'll see have some standard options available in other components, as well as unique settings only available in the Kanban component. 

  1. Data Source
  2. Fields
  3. Links
  4. Options

Data Source

The Data Source tab is where you can filter which records will be displayed in this component with some 'server-side' filtering. Since this is universal to all components you can view it as its own article here. Learn more about Data Source. 

Fields

In the fields tab you can choose how to format each Kanban item and which fields to display. All the settings here will be applied to a each and every record in the kanban. For example, in the illustration below you can see the settings vs how it will appear in your app: 

O93Kanban-Fields.jpg

As part of the customization for each record you can add: 

  • Rows
  • Columns
  • Fields
  • Custom HTML

This works similarly to how rows and columns work in the page builder where Rows are the top level, columns are inside of rows and the fields are placed into a column. Using custom HTML you can further create very dynamic display of your data using raw values in the HTML component. 

To add fields, simply select the field you wish to add from the left-hand side: 

adding-fields-in-kanban.jpg

Links

In the links tab you can create links to details, edit and other connected records.

Since this is universal to all components you can view it as its own article here. Learn more about Links here. 

Options

Options are where you can configure the options specific to Kanban boards. 

  • Title
  • Kanban Field
  • Kanban Cover Field
  • Kanban Columns
  • Kanban Height
  • Show Column Count
  • Column Width
  • No Data Text
  • Inline Editing

Title

Add a custom title to appear at the top of the Kanban board. 

Kanban Field

This will be the field that will be used to organize the records into the proper column. The settings you specify here will apply to a single record and be duplicated across all your records. 

Kanban Cover Field

If you have an Image field in your table, you can choose to use this image as the cover field. The cover field allows adds some special formatting and puts the image at the top of the Kanban without and padding or margins. 

Kanban Columns

Each option from the "Kanban Field" you chose above will be displayed here plus an additional "Uncatalogued" option. Each line here represents a single column/swim-lane and can be customized with several options. 

  • Title
  • Color
  • Visibility

You can rearrange the order by clicking on the 4 pointed arrow and dragging each column to the order you prefer. 

Title

By default the title will be the value from the option of the Kanban Field, but you can override that here. 

Color

Set a background and border color for this entire column 

Visibility

Choose to show or hide this column. 

 

Kanban-Color-and-TItle.jpg

 

Kanban Height

This will set the height of the entire Kanban board in Pixels. 

Show Column Count

If you'd like to show on top of each swim-lane the total items inside that column enable this option here. 

Column Width

Set the column width for each lane. This can be in Pixels or percent. Keep in mind you'll need to factor in some additional percentage points for the padding and margins. For example, if you have 4 colummns and set each one to 25% it will likely go into a new line since this also includes the padding between each column/swim-lane. 

No Data Text

Where there are no records, the text added here will be displayed. 

 

The above settings will result in this output: 

Kanban-column-count-width-and-height.jpg

 

Inline Editing

Similar to inline editing in all other components. This will allow users to select a value and change it in a pop up. Click here to learn more about inline editing. 

How did we do ?

Previous Article
List Component
Next Article
Calendar Component
Article Navigation
  • What is Kanban?
  • Why use Kanban?
  • When should you use Kanban?
  • Adding Kanban
  • Data Source
  • Fields
  • Links
  • Options
  • Title
  • Kanban Field
  • Kanban Cover Field
  • Kanban Columns
  • Title
  • Color
  • Visibility
  • Kanban Height
  • Show Column Count
  • Column Width
  • No Data Text
  • Inline Editing
  • Back to top
    Developer portal Tadabase Community
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational