Embeddable Components

What is an Embeddable Component?

Embeddable components are an easy way to display read-only data from within your Tadabase app, inside websites hosted outside of Tadabase via a short user-generated script.

Use Cases

The primary benefit of the embeddable component is that it enables all your data to be managed in one place, since your data is already hosted within Tadabase.

For example, you can keep your marketing sites updated with the latest showcase data, such as:

  • Real Estate Listings
  • Pricing Tables
  • Frequently Asked Questions
  • Customer Testimonials

Embeddable Component Types

There are several component types currently available: 

Creating an Embeddable Component

In the Tadabase builder, navigate to the automation pane. In the automation pane, choose "Embeddable Components". Click the "Add New Component" button to create a component and generate its embed code.

addnew.jpg

 

Table Component

The table component is a simple component useful for displaying excel-like data in a traditional table. 

Example

image-1642020447184.png

To add a table component, choose Table under Type and select the Data Table. 

Please note: Like any Tadabase component, the Data Source cannot be changed after the component is saved.  

add-table.jpg

 

Designs 

The table component now has 3 design style options you can choose from: Classic, Elegant, and Modern. Choose the style that best matches your website's design.

Classic

Elegant

Modern

 

Pagination 

On the bottom of the General Tab, there is a pagination drop-down list with four options: Top, Bottom, Top and Bottom, Hide, and Load More.

 
Top Pagination

Select this option to show pagination on the top of the embeddable component.

 
Top and Bottom Pagination

Select this option to show pagination on the top and bottom of the embeddable component. 

Load More Pagination

Select this option to show a "Load More" button at the bottom of the component. Clicking this button will load an additional page of records until there are no more records to load.

 
Hide Pagination

Pagination is not shown.

 

Add Fields

Next, select the fields to include in your embeddable component. Navigate to the fields tab, and select "Add All Fields" to add all the data table's fields to your component. To add a single field, click "Add New Field".

Note: Easily drag and drop the fields to switch the order of the columns.

2022-01-17-add-fields.gif

 

Customizing Columns

In the fields tab, columns can be easily customized by adjusting the title, width, alignment, CSS class, or adding Custom CSS.

 
Column Title

Add a title to appear on the top of a field column. To hide the column title, leave this field blank.

 
Column Width

Enter a custom column width, along with the width measurement (i.e., "50px" for pixels, "2in" for inches). If this field is left blank, the column width will be set to default.

 
Alignment

Select the desired text alignment for each column. The alignment options are: left, center, right, and justify.

 
CSS Class

Add custom CSS Classes to a specific column.

 
Custom CSS

Add custom CSS to be applied to a specific column. CSS must be entered in the proper syntax.

 

Record Details

In the "Detail Page" tab, enable the record details popup. Once enabled, enter a title and select which fields to include in the details popup. If desired, add custom CSS classes and Custom CSS to each field, in the Class and Custom fields respectively.

 

Filters and Sorting

Conditions

Navigate to the Conditions tab and click "Add a Condition". Add a Title to the new condition. Next, select a field to apply this condition to. Then, choose an operator and the desired value.

 
Sort By

The "Sort By" option allows your records to be sorted by a specified field. By default, the records are sorted by the record ID.

In the Conditions tab, set the sort field and select whether to sort the records in ASC (ascending) or DESC (descending) order.

2022-01-17-sort-by-example.png

 

Embedding

Once you saved your component, it will appear in your list of embeddable components. Simply click "Get Embed Code" to copy the generated script to your clipboard.

Next, paste the script into the source code for your web page.

Ji32022-01-17-embed.gif

 

List Component

The List Component showcases your data in a gallery view and is often used for data with image fields, such as real-estate listings and profile cards.

Example

To add a list component, choose List under Type and select the Data Table. To add a cover photo, as seen in the image above, select an image, file, or attachment field from the Card Cover Field drop-down list.

For the cover photo to work correctly, the attachment field settings in the data builder must have the "secured" option set to "off". If the field is set to "secured", the images cannot be accessed outside of the Tadabase app.

Please note: The Data Table cannot be changed after the component is saved.  

 

Designs 

The list component now has 3 design style options you can choose from: Classic, Elegant, and Modern. Choose the style that best matches your website's design.

Classic List Style

Elegant List Style

Modern List Style

 

Pagination 

On the bottom of the General Tab, there is a pagination drop-down list with four options: Top, Bottom, Top and Bottom, Hide, and Load More.

 
Top Pagination

Select this option to show pagination above the embeddable component.

 
Bottom Pagination

Select this option to show pagination below the embeddable component.

Top and Bottom Pagination

Select this option to show pagination on above and below the embeddable component. 

Load More Pagination

Select this option to show a "Load More" button at the bottom of the component. Clicking this button will load an additional page of records until there are no more records to load.

 
Hide Pagination

If the "Hide" option is selected, pagination will not be shown.

 

Add Fields

Next, select the fields to include in your embeddable component. Navigate to the fields tab, and select "Add All Fields" to add all the data table's fields to your component. To add a single field, click "Add New Field".

Note: Easily drag and drop the fields to switch the order of the columns.

2022-01-17-add-fields.gif

 

Customizing Columns

In the fields tab, columns can be easily customized by adjusting the title, width, alignment, CSS class, or adding Custom CSS.

 
Column Title

Add a title to appear on the top of a field column. To hide the column title, leave this field blank.

 
Column Width

Enter a custom column width, along with the width measurement (i.e., "50px" for pixels, "2in" for inches). If this field is left blank, the column width will be set to default.

 
Column Text Alignment

Select the desired text alignment for each column. The alignment options are: left, center, right, and justify.

 
CSS Class

Add custom CSS Classes to a specific column.

 
Custom CSS

Add custom CSS to be applied to a specific column. CSS must be entered in the proper syntax.

 

Record Details

In the "Detail Page" tab enable the record details popup. Once enabled, enter a title and select which fields to include in the details popup. If desired, add custom CSS classes and Custom CSS to each field, in the Class and Custom fields respectively.

For the Popup Title, you enter either text, a Field Name in brackets, or a combination of both. See example below.

This will result in a popup title that looks like this:

 

Filters and Sorting

Conditions

Navigate to the Conditions tab and click "Add a Condition". Add a Title to the new condition. Next, select a field to apply this condition to. Then, choose an operator and the desired value.

 
Sort By

The "Sort By" option allows your records to be sorted by a specified field. By default, the records are sorted by the record ID.

In the Conditions tab, set the sort field and select whether to sort the records in ASC (ascending) or DESC (descending) order.

2022-01-17-sort-by-example.png

 

Embedding

Once you saved your component, it will appear in your list of embeddable components. Simply click "Get Embed Code" to copy the generated script to your clipboard.

2022-01-17-list-get-embed-code.png

Next, paste the script into the source code for your web page.

2022-01-17-list-embed.gif

 

Kanban Component

The Kanban Component displays your data in swim lanes, and is designed to help visualize work, limit work-in-progress, and maximize efficiency. The Kanban Component is most commonly used for data relating to project management.

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.

Example

To add a Kanban component, choose Kanban under Type and select the Data Table. Then, you must select a radio field to be the Kanban Field. To add a cover photo, as seen in the image above, select any image, file, or attachment field from the Card Cover Field drop-down list.

For the cover photo to work correctly, the attachment field settings in the data builder must have the "secured" option set to "off". If the field is set to "secured", the images cannot be accessed outside of the Tadabase app.

Please note: The Data Table cannot be changed after the component is saved.  

 

Designs 

The Kanban component now has 3 design style options you can choose from: Classic, Elegant, and Modern. Choose the style that best matches your website's design.

Classic Kanban Style

Elegant Kanban Style

Modern Kanban Style

 

Pagination 

Pagination cannot be applied to the Kanban component.

Add Fields

Next, select the fields to include in your embeddable component. Navigate to the fields tab, and select "Add All Fields" to add all the data table's fields to your component. To add a single field, click "Add New Field".

Note: Easily drag and drop the fields to switch the order of the columns.

2022-01-17-add-fields.gif

 

Customizing Columns

In the fields tab, columns can be easily customized by adjusting the title, width, alignment, CSS class, or adding Custom CSS.

 
Column Title

Add a title to appear on the top of a field column. To hide the column title, leave this field blank.

 
Column Width

Enter a custom column width, along with the width measurement (i.e., "50px" for pixels, "2in" for inches). If this field is left blank, the column width will be set to default.

 
Alignment

Select the desired text alignment for each column. The alignment options are: left, center, right, and justify.

 
CSS Class

Add custom CSS Classes to a specific column.

 
Custom CSS

Add custom CSS to be applied to a specific column. CSS must be entered in the proper syntax.

 

Detail Page

In the "Detail Page" tab enable the record details popup. Once enabled, enter a title and select which fields to include in the details popup. If desired, add custom CSS classes and Custom CSS to each field, in the Class and Custom fields respectively.

For the Popup Title, you enter either text, a Field Name in brackets, or a combination of both. See example below.

This will result in a popup title that looks like this:

 

Filters and Sorting

Conditions

Navigate to the Conditions tab and click "Add a Condition". Add a Title to the new condition. Next, select a field to apply this condition to. Then, choose an operator and the desired value.

 
Sort By

The "Sort By" option allows your records to be sorted by a specified field. By default, the records are sorted by the record ID.

In the Conditions tab, set the sort field and select whether to sort the records in ASC (ascending) or DESC (descending) order.

2022-01-17-sort-by-example.png

 

Embedding

Once you saved your component, it will appear in your list of embeddable components. Simply click "Get Embed Code" to copy the generated script to your clipboard.

Next, paste the script into the source code for your web page.

2022-01-18-kanban-embed.gif

 

Accordion Component

The accordion component enables you to expand and collapse data when the title of the record is clicked. Common use cases for the Accordion Component include FAQs, product information, and any data which has a title and description.

Example

To add an accordion component, choose accordion under Type and select the Data Table. Then, you must select a field to be the Title Field.

Please note: The Data Table cannot be changed after the component is saved.  

 

Designs 

The accordion component now has 3 design style options you can choose from: Classic, Elegant, and Modern. Choose the style that best matches your website's design.

Classic Accordion Style 

Elegant Accordion Style

Modern Accordion Style

 

Pagination 

Pagination cannot be applied to the accordion embeddable component type.

 

Add Fields

Next, select the fields you wish to include in the embeddable component. Navigate to the fields tab, and select "Add All Fields" to add all the data table's fields to your component. To add a single field, click "Add New Field".

Note: Easily drag and drop the fields to switch the order of the columns.

2022-01-17-add-fields.gif

 

Customizing Columns

In the fields tab, columns can be easily customized by adjusting the title, width, alignment, CSS class, or adding Custom CSS.

 
Column Title

Add a title to appear on the top of a field column. To hide the column title, leave this field blank.

 
Column Width

Enter a custom column width, along with the width measurement (i.e., "50px" for pixels, "2in" for inches). If this field is left blank, the column width will be set to default.

 
Alignment

Select the desired text alignment for each column. The alignment options are: left, center, right, and justify.

 
CSS Class

Add custom CSS Classes to a specific column.

 
Custom CSS

Add custom CSS to be applied to a specific column. CSS must be entered in the proper syntax.

 

Filters and Sorting

Conditions

The conditions feature allows you to display only the records that meet a specified condition.

Navigate to the Conditions tab and click "Add a Condition". Add a Title to the new condition. Next, select a field to apply this condition to. Then, choose an operator and the desired value.

 
Sort By

The "Sort By" option allows your records to be sorted by a specified field. By default, the records are sorted by the record ID.

In the Conditions tab, set the sort field and select whether to sort the records in ASC (ascending) or DESC (descending) order.

2022-01-17-sort-by-example.png

 

Embedding

Once you saved your component, it will appear in your list of embeddable components. Simply click "Get Embed Code" to copy the generated script to your clipboard.

2022-01-17-accordion-get-embed-code.png

Next, paste the script into the source code for your web page.

2022-01-18-accordion-embed.gif

 

Important Details

  • Embeddable components cannot be added to a Tadabase app, this feature is intended for external websites only.
  • Currently, only one component can be embedded in a single web page.
  • You can easily switch between different component types without losing any of your settings! For example, you can switch your component from a list to a table without losing the Card Cover Image settings.

Coming up...

  • Timeline
  • Calendar
  • Get link to share
  • Forms
  • Secured components requiring logins
  • Whole apps