Form component, no button, 2 columns

[Pieter3033]

First of I'd like to thank @lovasoa , Mr. Ophir you have done a great job.🔥

I'd just like to share this with whom ever would like to use it.

I've manipulated the "form.handlebars" to display 2 input boxes next to each other and removed the button.
(Because, as of SQLPage v0.14 an awesome button component has been added)

How to use:

1. Create a subfolder in your root folder called "sqlpage".
2. Inside of the "sqlpage" folder create a folder called "templates".
3. Copy the .handlebars code.
4. Paste the .handlebars code in a .handlebars file and name it accordingly.
   • (I'd recommend keeping the original "form" handlebar as you can make use of different types of forms)
   • (Note: All the default .handlebars are in the source file of SQLPage located inside of the path: "sqlpage/templates")
5. When calling the form component, instead of calling it as normal:
   SELECT 'form' as component
   Just rename it to the .handlebar name:
   SELECT 'form_nobtn_2columns' as component

See form reference:

form_nobtn_2columns.handlebars:

<form class="my-3" method="{{default method "post"}}" {{#if action}}action="{{action}}"{{/if}}>
    <fieldset class="form-fieldset">
        {{#if title}}
            <h2 class="text-left mb-3">{{title}}</h2>
        {{/if}}
        <div class="row">
            {{#each_row}}
                <div class="col-md-6 mb-2"> <!-- Use Bootstrap grid to create two columns for each input row -->
                    {{#if (or (eq type "radio") (eq type "checkbox") (eq type "select"))}}
                        <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column my-1">
                            <label class="form-selectgroup-item flex-fill">
                                <input type="{{type}}" name="{{name}}" value="{{value}}" {{#if required}}required{{/if}} {{#if checked}}checked{{/if}} class="form-selectgroup-input">
                                <div class="form-selectgroup-label d-flex align-items-center p-3">
                                    <div class="me-3">
                                        <span class="form-selectgroup-check"></span>
                                    </div>QF
                                    <div>
                                        {{default label value}}
                                        {{~#if required}}
                                            <span class="text-danger ms-1" aria-label="required" title="required">*</span>
                                        {{/if}}
                                        {{#if description}}
                                            <small class="form-hint mt-0">{{description}}</small>
                                        {{/if}}
                                    </div>
                                </div>
                            </label>
                        </div>
                    {{else}}
                        <label class="form-label mb-2">
                            {{default label name}}
                            {{~#if required}}
                                <span class="text-danger ms-1" aria-label="required" title="required">*</span>
                            {{/if}}
                        </label>
                        {{#if (eq type 'textarea')}}
                            <textarea
                                name="{{name}}"
                                class="form-control"
                                placeholder="{{placeholder}}"
                                rows="{{default rows 3}}"
                                {{#if value}}value="{{value}}" {{/if~}}
                                {{~#if minlength}}minlength="{{minlength}}" {{/if~}}
                                {{~#if maxlength}}maxlength="{{maxlength}}" {{/if~}}
                                {{~#if required}}required="required" {{/if~}}
                                {{~#if autofocus}}autofocus {{/if~}}
                            >
                            {{~#if value}}{{value}}{{/if~}}
                            </textarea>
                        {{else}}
                            <input name="{{name}}" class="form-control"
                                {{~#if type}} type="{{type}}" {{/if~}}
                                {{~#if placeholder}} placeholder="{{placeholder}}" {{/if~}}
                                {{~#if value}} value="{{value}}" {{/if~}}
                                {{~#if max}} max="{{max}}" {{/if~}}
                                {{~#if min}} min="{{min}}" {{/if~}}
                                {{~#if step}} step="{{step}}" {{/if~}}
                                {{~#if minlength}} minlength="{{minlength}}" {{/if~}}
                                {{~#if maxlength}} maxlength="{{maxlength}}" {{/if~}}
                                {{~#if pattern}} pattern="{{pattern}}" {{/if~}}
                                {{~#if required}} required="required" {{/if~}}
                                {{~#if (or (eq autocomplete false) (eq autocomplete 0))}}autocomplete="off" {{/if~}}
                                {{~#if (or (eq autocomplete true) (eq autocomplete 1))}}autocomplete="on" {{/if~}}
                                {{~#if (gt (len autocomplete) 1)}}autocomplete="{{autocomplete}}" {{/if~}}
                                {{~#if autofocus}}autofocus {{/if~}}
                            >
                        {{/if}}
                    {{/if}}
                </div>
            {{/each_row}}
        </div>
        <div class="text-left">
   <!--<input class="btn btn-primary" type="submit" {{#if validate}}value="{{validate}}"{{/if}}>  Commented button component out-->
        </div>
    </fieldset>
</form>

[Pieter3033]

Ran into a problem, the button component does not submit the form submission. Will return once a solution has been found.

[lovasoa]

It would be nice if the official form component added a new width row-level property to control the width of form fields. That should not be too complicated to implement. It could also hide the validation button when its text (passed as the validate top-level property) is empty.

For the button component, I added a feature request here: #113 .

@Pieter3033 , would you be interested to work on that ? I would very much appreciate pull requests targeting the default templates in this repo.

[Pieter3033]

Hi,

I'll definitely work on implementing setting the width as well as hiding the button, and I fully understand why you would like to target the default templates.

I'm currently learning how to understand the handlebars, that's why I only manipulated the html as I have a relative understanding of the language.

[Pieter3033]

Hi @lovasoa ,

As discussed, I have implemented adjusting the width of the input boxes, as well as hidden the button when the validate parameter is empty.
Aaannddd... I have managed to almost fully adjust the form button to act like the new button component.

SQLPage code reference: (Note: This is all top-level properties)

Output:

See edited form.handlebar below:

<form class="my-3" method="{{default method "post"}}" {{#if action}}action="{{action}}"{{/if}}>
    <fieldset class="form-fieldset">
        {{#if title}}
            <h2 class="text-center mb-3">{{title}}</h2>
        {{/if}}
        {{#each_row}}
            {{#if (or (eq type "radio") (eq type "checkbox"))}}
                <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column my-1">
                    <label class="form-selectgroup-item flex-fill">
                        <input type="{{type}}" name="{{name}}" value="{{value}}" {{#if required}}required{{/if}} {{#if checked}}checked{{/if}} class="form-selectgroup-input">
                        <div class="form-selectgroup-label d-flex align-items-center p-3">
                            <div class="me-3">
                                <span class="form-selectgroup-check"></span>
                            </div>
                            <div>
                                {{default label value}}
                                {{~#if required}}
                                    <span class="text-danger ms-1" aria-label="required" title="required">*</span>{{/if}}
                                {{#if description}}
                                    <small class="form-hint mt-0">{{description}}</small>
                                {{/if}}
                            </div>
                        </div>
                    </label>
                </div>
            {{else}}
                <label class="form-label mb-2">
                    {{default label name}}
                    {{~#if required}}
                        <span class="text-danger ms-1" aria-label="required" title="required">*</span>{{/if}}
                    {{#if (eq type 'textarea')}}
                        <textarea
                            name="{{name}}"
                            class="form-control"
                            placeholder="{{placeholder}}"
                            rows="{{default rows 3}}"
                            {{#if value}}value="{{value}}" {{/if~}}
                            {{~#if minlength}}minlength="{{minlength}}" {{/if~}}
                            {{~#if maxlength}}maxlength="{{maxlength}}" {{/if~}}
                            {{~#if required}}required="required" {{/if~}}
                            {{~#if autofocus}}autofocus {{/if~}}
                        >
                        {{~#if value}}{{value}}{{/if~}}
                        </textarea>
                    {{else}}{{#if (eq type 'select')}}
                        <select name="{{name}}" class="form-select"
                         {{~#if required}} required="required" {{/if~}}
                         {{~#if autofocus}} autofocus {{/if~}}
                         {{~#if multiple}} multiple {{/if~}}
                        >
                            {{#each (parse_json options)}}
                                <option value="{{value}}" {{#if (eq ../value value)}}selected{{/if}}>{{label}}</option>
                            {{/each}}
                        </select>
                    {{else}}
                    <input name="{{name}}" class="form-control" 
                        {{~#if type}} type="{{type}}" {{/if~}}
                        {{~#if placeholder}} placeholder="{{placeholder}}" {{/if~}}
                        {{~#if value}} value="{{value}}" {{/if~}}
                        {{~#if max}} max="{{max}}" {{/if~}}
                        {{~#if min}} min="{{min}}" {{/if~}}
                        {{~#if step}} step="{{step}}" {{/if~}}
                        {{~#if minlength}} minlength="{{minlength}}" {{/if~}}
                        {{~#if maxlength}} maxlength="{{maxlength}}" {{/if~}}
                        {{~#if pattern}} pattern="{{pattern}}" {{/if~}}
                        {{~#if required}} required="required" {{/if~}}
                        {{~#if (or (eq autocomplete false) (eq autocomplete 0))}}autocomplete="off" {{/if~}}
                        {{~#if (or (eq autocomplete true) (eq autocomplete 1))}}autocomplete="on" {{/if~}}
                        {{~#if (gt (len autocomplete) 1)}}autocomplete="{{autocomplete}}" {{/if~}}
                        {{~#if autofocus}}autofocus {{/if~}}
                        {{~#if width}}style="width: {{width}}px;" {{/if~}}
                    >
                    {{/if}}{{/if}}
                    {{#if description}}
                        <small class="form-hint mt-0">{{description}}</small>
                    {{/if}}
                </label>
            {{/if}}
        {{/each_row}}
        
        {{#if validate}} 
        <input class="btn
         {{#if btn_v_color}} btn-{{btn_v_color}} {{/if}}
         {{#if btn_v_shape}} btn-{{btn_v_shape}} {{/if}}
         {{#if btn_v_outline}} btn-outline-{{btn_v_outline}} {{/if}}
         {{#if btn_v_size}} btn-{{btn_v_size}} {{/if}}"
         type="submit"
         value="{{validate}}">
        {{/if}}

        {{#if cancel}}
        <input class="btn 
         {{#if btn_c_color}} btn-{{btn_c_color}} {{/if}}
         {{#if btn_c_shape}} btn-{{btn_c_shape}} {{/if}}
         {{#if btn_c_outline}} btn-outline-{{btn_c_outline}} {{/if}}
         {{#if btn_c_size}} btn-{{btn_c_size}} {{/if}}"
         type="reset" 
         value="{{cancel}}">
        {{/if}}

    </fieldset>
</form>

[lovasoa]

Good progress! I think the width shouldn't be a hardcoded with in pixels, but use bootstrap columns instead. It's not really interesting to reduce the width of a field if the others do not display on the same line.

Also, the btn_ prefix is not coherent with the rest of SQLPage, where we don't use abbreviations. The most coherent would probably be validate_color, validate_color, etc...
The name cancel is a little bit strange if what it actually does is reset the form.

Can you open a pull request in this repo so that we can collaborate on it ?