Skip to main content

Data2 Porcelain

What is Data2 Porcelain?​

Data2 Porcelain is a library of ready-made components that makes developing your application faster and easier.

With Porcelain, you get access to a variety of reusable components, such as:

  • Button
  • PaginationControl
  • AutoField
  • FormView
  • ListView
  • SearchField

...among many others already available — and more still to come.

How to use Porcelain components​

Using Porcelain components is quick and easy. Just follow the steps below:

  1. Create a new block and select it.
  2. In the top-right corner of the Builder, click data2-core-primitive@Block.
  3. Choose the Porcelain component you want to add.
  4. Set the parameters your application needs, which are always listed at the bottom of the Inspector.

✅ Done! Your Porcelain component is ready to use.

Now that you know how to use Porcelain components in your project, let's explore some of them in practice and understand how each one can help with your development.

FormView​

In the Getting Started tutorial, we saw how to build a CRUD step by step. With the FormView component, this process can be done much faster and more easily.

How to use FormView​

  1. Create a new block.
  2. At the top of the Inspector, click data2-core-primitives@Block.
  3. Replace it with: data2-porcelain@FormView.
  4. Enable the Dataset parameter and select the desired Dataset.

FormView

In the image above, we see the FormView with no Dataset selected. It has five main buttons: Insert, Edit, Delete, Save, and Cancel.

Button Functions​

  • Insert Creates a new item in the Dataset. After clicking, fill in all the required fields and finish by clicking Save to save the record.

  • Edit Lets you modify an existing record. Click Edit, make the desired changes, then click Save to confirm them.

  • Cancel While in Insert or Edit mode, if you want to discard the changes made, click Cancel to cancel the operation.

  • Delete Permanently removes the selected record from the Dataset.

When we select a Dataset, the FormView dynamically generates all the fields, displaying them according to the Dataset's structure, as we can see below.

FormView

Done! You have the first part of a functional CRUD integrated with your Dataset, done quickly and efficiently using FormView.

Main properties​

  • Hide Dataset Controls Hides the five record management buttons (Insert, Edit, Delete, Save, and Cancel).

  • Omit Fields Defines which Dataset fields will not be displayed in the FormView.

  • TextArea Fields By default, text fields in FormView are meant for short information and don't correctly display content with line breaks. Adding a field to this property makes it render as a text area (textarea), allowing proper viewing and editing of longer phrases or text.

ListView​

We previously saw how FormView can speed up building a CRUD. However, it has one limitation: it always displays data for only one item from the Dataset — and doesn't offer a direct way to navigate between items.

To solve this, we use the ListView component, which complements FormView and lets you view and select different records from a Dataset.

How to use ListView​

  1. Create a new block.
  2. At the top of the Inspector, click data2-core-primitives@Block.
  3. Replace it with: data2-porcelain@listview.
  4. Enable the Dataset property and select the desired Dataset.

ListView

In the image above, we can see three listed items. The first one is selected, meaning cursor.current is pointing to it. If we click another item, the cursor will update to reflect the new selection.

Main properties​

  • Label Defines the main identifier for each item displayed in the ListView. In the example image above, the Label for the first item would be João.

  • Identification Displays the secondary identifier right below the Label. In the example, the displayed value would be 688a4d3aa3e974d07ff9fab4.

  • On Item Select Lets you configure an action or behavior that runs whenever a new item in the ListView is selected.

  • Searchable Adds a search field that searches by the value defined in Label.

Using FormView + ListView​

By combining ListView with FormView, we can build a complete CRUD interface, where you can:

  • View all the items in the Dataset.
  • Select an item to edit.
  • Create new records.
  • Delete records that are no longer needed.

This combination provides a fast, practical, and visual way to manage data directly in the interface.

FormView and ListView

SearchField​

Now that we have our CRUD working, imagine the following situation: You have a Dataset with many records and need to let the user quickly find a specific item.

For this, we use the SearchField component, which works as a filter built into your Dataset.

How to use SearchField​

  1. Create a new block.
  2. At the top of the Inspector, click data2-core-primitive@Block.
  3. Replace it with: data2-porcelain@searchfield.
  4. Enable the Dataset property and select the desired Dataset.
  5. In the field property, choose which field you want it to filter by.

In the example below, we use a ListView together with SearchField and search for the name Lucas:

SearchField

Main properties​

  • Filter Operation Defines the type of operation the filter will perform. For example, by selecting lesser than and choosing the age field in field, you can filter all records whose age is less than the given value.

  • Disabled Disables the filter when the boolean is true.

Using the FieldDefinition property​

One of the most interesting features of SearchField is the FieldDefinition property.

To configure it:

  1. Click the f() button next to the property.
  2. Choose the field option.
  3. In the OneOf field, type the values you want to display in the selector (for example: Lucas,Pedro).

This creates a list of suggestions that helps the user choose what to filter by:

Using FieldDefinition

This significantly improves the navigation experience in larger Datasets, enabling faster, more precise filtering.

MultiSearchField​

Imagine you want to apply several different filters at the same time to refine a search on a Dataset. While you could use multiple SearchFields for this, there's a more practical and efficient solution: the MultiSearchField component.

This component groups several search fields into a single block, letting you filter data with greater precision and less effort.

How to use MultiSearchField​

  1. Create a new block.
  2. At the top of the Inspector, click data2-core-primitive@Block.
  3. Replace it with: data2-porcelain@MultiSearchField.
  4. Enable the Dataset property and select the Dataset you want to use.
  5. In the fields field, click Add Item to add a new filter.

Each item added becomes a new search field.

In the example below, two filters were added:

  • For the first, the Fields field was set to Name and the Label was also set to Name.
  • For the second, we used Age as the field and Age as the label.

MultiSearchField example

With this, we can build a more dynamic, powerful, and easy-to-use search interface, allowing multiple filters to be applied to a Dataset efficiently.

Button​

Porcelain also offers a button-type component, ideal for triggering actions within your application.

How to use Button​

  1. Create a new block.
  2. At the top of the Inspector, click data2-core-primitive@Block.
  3. Replace it with: data2-porcelain@Button.

Main properties​

  • Label: Defines the text displayed on the button.
  • OnClick: The action that runs when the button is clicked.
  • Loading: When enabled, shows a loading animation after the click, useful for indicating the button is processing an action.
  • Disabled: A boolean value (true or false) that, when true, disables the button, preventing it from being clicked.

These features are great for improving the user experience and preventing multiple clicks or unwanted interactions during asynchronous processes.

PorcelainTheme​

Imagine you're building a huge system and using several Porcelain components. Instead of configuring each component individually with the same standards, you can use PorcelainTheme to speed up this process.

With it, you define colors, borders, and other visual standards for all Porcelain components at once.

PorcelainTheme

How to use PorcelainTheme​

  1. Double-click on the background of your Builder.
  2. Click the third icon in the left sidebar.
  3. Select the PorcelainTheme option.

How to create a PorcelainTheme

Applying the theme to components​

After configuring your PorcelainTheme, go to the desired component, enable the theme parameter, and select it.

Done! The component will automatically follow the visual standard defined in your PorcelainTheme.