Custom UI layout with separate columns for a form and its submit button

[hasynjo]

Salut Ophir,

merci beaucoup for the work and effort you put in creating and maintaining SQLpage! Using SQL for frontend development ist a brilliant idea. SQLpage is easy to use and enables me to build prototypes quickly 😊

Whilst creating my first dummy webapp I found these bugs:

• form
  • input fields of type textarea & checkbox are still editable despite parameter readonly been set to true
  • checked checkbox returns "" as value
• button
  • cancel icon doesn't show (see attached screenshot)

I would like to make the following suggestions:

• general
  • changing parameter width from integer to decimal for more accurate spacing (e. g. while width 1 truncates year with dates, width 2 takes up too much space)
• card
  • new row-level parameter width-percentage (e. g. I have 2 embedded columns (see attached screenshot), the left column should take 90% of the total width while the right column should be trimmed to the remaining 10 percent)
• form
  • new row-level parameter line-break to be inserted before a field for better layouting/structuring (e. g. first and last name (both width 2)
    
    in the 1st row, address in the 2nd row)
• shell
  • new top-level parameters navbar-color and font-color (so there is no need for an extra css-file)
  • option to set menu_item as active like in the tab-component

Best regards, hasynjo

[lovasoa]

Hello and welcome to SQLPage !
The disabled textarea bug was recently fixed by @djyotta in #451 , you can either check the latest unreleased version using docker or wait until it is published in a few weeks.

For the checkbox, I think what you are observing is the expected behavior. Maybe we could improve the documentation here ?

For the cancel button, can you open an issue with a minimal reproduction ?

For the form field width, we are dependent on the css design framework we are using.

For the other suggestions, I think they would all be welcome ! Would you be interested in opening pull requests for them ? The builtin templates are here: https://github.com/lovasoa/SQLpage/tree/main/sqlpage/templates

[hasynjo]

Thank you for updating the tabler icons and implementing card width @lovasoa 👍

Is there a way to submit the embedded form on the left (audit_form.sql, 'audit' AS id) with the Save-button in the embedded card on the right as pictured above? I can't get it to work.

[lovasoa]

Yes, it works like on any other (non embedded) page:

SQLPage form inside cards with a custom layout

This setup consists of three SQL files that work together to create a simple web form.

1. x.sql (Main file):
   • Creates a card component
   • Embeds two other SQL files: xform.sql and xsubmit.sql

select 'card' as component;
select 'xform.sql?_sqlpage_embed' as embed;
select 'xsubmit.sql?_sqlpage_embed' as embed;

2. xform.sql (Form definition):
   • Defines a form component with id 'xform'
   • Includes an input field named 'hello'

select 'form' as component, 'xform' as id, '' as validate;
select 'hello' as name;

3. xsubmit.sql (Submit button):
   • Creates a button component
   • Links the button to the 'xform' form

select 'button' as component;
select 'go' as title, 'xform' as form;

[hasynjo]

Thank you for the example @lovasoa!

You are right, the submit button does the job whether it is embedded or not.

The problem was the UPDATE-statement located in my xform.sql-file. It worked well while it was a stand-alone form. When turned into an embedded form it didn't save the updated data anymore. So I moved the UPDATE-statement into a separate .sql-file and linked to it as action. Now it works fine ☺️

[YunusMechery]

I've a question similar to this. On the left side card, i've a table/list of items with a markdown edit link on each row, and on right side card, i've an item update form for the selected item in left side card. How to achieve this. I searched for keyword _sqlpage_id of table component in repo but could not find any example.

[lovasoa]

Hi @YunusMechery ! Can you open a new discussion, maybe with a minimal reproduction of your problem ?