Components

Components are fundamental building blocks of front end user interface that you can use to assemble and customize application. BAPPAZ gives you a library of components that are easy to customize and connect to data without any code or SQL.

List

List is a multi view component showing list of data items and allows user to switch between different configured view. List also include quick search, advance search and sort functionality. List allow user to create new list item and can also be configured to let use upload bulk data. List view can also be configured to display related item list.

Currently, following different list view are support:

• Table View

  Shows data in tabular format with columns and rows. You can decide which columns to show and customize column display order.

• Card View

  Shows data using responsive Card formant and is great for showing data on various form factors, from mobile to desktop! You can customize Card layout.

• Board View

  Shows data in columns grouped by property. Allows you to show tasks that are moving through stages of a process or workflow, or are grouped by property like status. Use them for project management, process flow and visualizing your data state. You can configure Board Group/Column to show, as well as customize Board Card layout. Learn More

Detail

Detail view show individual row/list item data details using Form layout. Detail view is automatically shown when user click on an item in list. Detail view can be configured with various action on data and workflow.

Detail view also support child list view and when present will auto send child data with parent to server for atomic data state change.

Panel

Panel is used to group items that logically belong together on a Form view or Dialog view. You can use section, stack and blocks to layout components in a panel.

Section

Section allows you to layout components in a row and have it automatically warp on smaller form factor. Section is primarily used to layout components in a Panel.

Stack

Stack is for laying out component using FlexBox layout pattern. Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces. Learn More @ MDN

Block

Block is a generic container for layout. It is used to layout a block of components and can be positioned absolutely compared to parent container.

Button

Button are used to trigger actions (in response to user event). Button can be configured to trigger different actions on data like Delete, Update and Create, call various workflow actions and make API calls.

Buttons also allows for triggering UI screens like Dialog as well as functionality like Bulk Create. All of the actions are pre-built and require no-code. You just select and configure.

Board

Boards visually depict data at various stages of a process using cards to represent work items and columns to represent each stage of the process. Board are made up of Board column and allow user to change data state by dragging board card from one column to another.

Board is made up of following components

• Board Column

  Board Column group and display data that have a particular state like Pending, Approved etc

• Board Card

  Board Card is used to visually depict task or work item in a board column.

Chart

Chart are used to visualize data. Chart can show data from any table or view, just select field for x and y axis. Chart can also be linked to a page to drill down and see details.

You can use following chart types to visualize data

• Line
• Bar
• Pie
• Scatter
• Doughnut
• PolarArea
• Radar
• Bubble

Stats

Stats show list of stat. Just select a view or table and column to show stats. Stat can have either a fixed label or dynamic label based on associated field. This is useful if you are aggregating data by a field and need to show aggregated number as stat. Stat can also be linked to a page to see details.

Tab bar

Tab bar allows you to organize data in using tab and only show relevant data when a tab is selected.

Photo

Photo is used to show image. Photo can be configured to show image from different sources like local, remote and cloud.

Icon

Icon are similar to photo, but normally reserved for display only, mainly for small size photos/thumbnails. Icons can also show any icons from included material design icon library.

Text

Text is used to display test/sentence/words to user

Form Fields

Form field are used to gather data from user. Form field can be any one of the following type

• Text

  used for text input

• Number

  used for number input

• Date

  user for date input

• Boolean

  check box for yes/no type of input

• Select List

  List of pre-defined values

• Picker

  List of items from database

• Photo

  used for display of images

Custom Field

Custom field allow you to provide a path to data for display. Normally field are automatically connected to data, but sometimes data can be nested. Custom field are useful for those cases and allow you to provide custom path for data lookup.

Expression Field

Expression field allow you to display data using combination other fields. You can compose a field expression by combining field name with other text characters. Field Names will be replaced with respective data at run time.