TABLE + FORM CRUD guideline

General 🤓
1

Hi,
I am trying to create a “Products” TABLE/FORM with CRUD:
This is the simpler page model I would need for common CRUD applications.

[ Products ]
product_id
product_name
category_id

[ Categories ]
category_id
category_name

My first attempt was creating a FORM that could do both CREATE and UPDATE, following the tip in the documentation.
I was successful coding the UPDATE operation, but not the CREATE.
I was not able to reset (clear) the FORM before creating.
Another problem that could arise is where to put the “CREATE” and “CANCEL” buttons ? I create the first one as a Button and the second one as the additional Button in the Form.

My second attempt was to use the TABLE buttons.
They work for tables without Foreign Keys, but I did not manage tho make them with FKs.
The “category_id” should be a SELECT field to get the “category_id” from Categories.
I defined the “category_id” as SELECT and attached it to an Action “loadCategories”, but it did not work.

Instead of a FORM beside a TABLE, would be a TABLE and MODAL with a FORM inside a better solution ?

Could you please give the correct guidelines to create a PAGE like this ?

Thanks

2

Hi,

Forget the “second attempt” question.
I just added a step in my Action, and now it’s working fine:

return data.map(item => {
return {
value: item.category_id,
title: item.category_name
};
});

But I am still struggling with the “first attempt”.

Thanks

3

Hi,

Forget the “first attempt” question, too.
I moved from FORM to POP-UP FORM and created a variable to define if I am inserting or updating: now everything is working fine :slight_smile:

I just have 2 questions:

  1. I have a button above a TABLE to “Create” a new Product, but this is not the best design.
    Is there any way to use the “New” button from the TABLE and avoid the standard behavior of line editing ?
    The behavior I want is to open my POP-UP FORM instead of line-editing, like
    my current button does.

  2. I have an “int2” DB column with 0s and 1s, with a false/true meaning.
    I changed the column type from “Number” to “Boolean” in the TABLE component.
    It shows beautifully as Boolean, but when I save I get an error saying the column is not “int2”.
    Is there any way to avoid this behavior and ask UI Bakery to use the DB column type, instead of the TABLE column type I defined just for viewing purposes ?

Thanks

4

Hi @easylob

Regarding your 2 last questions:

1 - it’s not possible to open the POP-UP FORM from the table.
2 - This is not possible out of the box. The only suggestion here that we have is to Transform result before sending the data to the table (0/1 to true/false), and after editing/ creating a row, transform the result vice versa and send it to the database

1 Like
5

Hi @easylob and @Kate,

Both things are not possible out of the box, but they are possible to do.

  1. The Pop-up form can be opened from the table with a little customization. You can either use the New button of the table, a random button component or the button of the Pop-up Form.

    The Pop-up form button already opens the pop-up, so all you need to do there is using an On open trigger that resets the form like {{ui.popupForm.reset()}}.

    The button component also only needs a single On click trigger, that first resets the form and then opens it like {{ui.popupform.open()}}.

    Then, so either one appears on top of the table and not next to it, you add some margin. Finally, so it is constantly visible above the table, also add z-index: 10.

    If you want to use the native New button of the table, a little more customization is needed. Because you said you would rather not enter the new row inside the table, we need to disable it’s event listener and add our own. The following script does exactly that. It’s split into two steps, so everything works correct. Replace customersTable with the name of your table, or remove it if the New button of every table on the page should be affected.

    Step 1

    const el = document.querySelector(".customersTable .new-row-action-button");
const elClone = el.cloneNode(true);
el.parentNode.replaceChild(elClone, el);
return;

    Step 2
    Here also replace popupForm with the name of your Pop-up form component.

    const el = document.querySelector(".customersTable .new-row-action-button");
el.addEventListener("click", () => {
    {{ui.popupForm.reset()}}
    {{ui.popupForm.open()}};
});
return;

    If you execute the action, the New button should now open the Pop-up form. If it throws an error, it’s very likely that you either forgot to change customersTable or popupForm to the names of your components, or have the name wrong.

  2. For the second question, Kate basically already answered that. You need to transform the data manually before inserting / after fetching to the desired format.

For editing existing rows, you could also add an e.g. On Row Double Click trigger to the table, where you pass the values to the Pop-up form with {{ui.popupForm.setValue(data.data)}} and then just open it. Of course, you’ll also need to adjust the submit action for editing/adding. Theoretically, you can just check if the primary key is present, if it is the update, if not then insert.

1 Like