Crestron Components Lib - Showcase App

ch5-form: custom submit/cancel

ch5-form using custom Submit and Cancel buttons

In the following examples, custom Cancel / Submit buttons are provided via the cancelId and submitId attributes of the ch5-form.

These attributes point directly to the buttons added by the user, the value of the cancelId attribute must correspond to the Id of the user added cancel button (custom_cancel_button_id in this example), the same goes for the submitId (custom_submit_button_id in this example).

The default buttons can be hidden using the hideCancelButton and hideSubmitButton attributes.

1. Custom Submit

Sample ch5-toggle



Sample ch5-slider

Sample ch5-textinput

Custom Submit Button:

2. Custom Cancel

Sample ch5-toggle



Sample ch5-slider

Sample ch5-textinput

Custom Cancel Button:

<p>In the following examples, custom <b>Cancel / Submit</b> buttons are provided via the <i>cancelId</i> and
    <i>submitId</i> attributes of
    the ch5-form.</p>
<p>These attributes point directly to the buttons added by the user, the value of the cancelId attribute must correspond
    to the Id of the user added cancel button <i>(custom_cancel_button_id in this example)</i>, the same goes for the submitId
    <i>(custom_submit_button_id in this example)</i>.</p>
<p>The default buttons can be hidden using the <i>hideCancelButton</i> and <i>hideSubmitButton</i> attributes.</p>
<h2>1. Custom Submit</h2>
<div style="padding-bottom: 24px;">
    <ch5-form
            id="demo"
            submitId="custom_submit_button_id"
            hideSubmitButton="true"
    >
        <p>
            <b>Sample ch5-toggle</b>
        </p>
        <ch5-toggle
                labelOn="On"
                labelOff="Off"
                feedbackMode="submit"
                receiveStateValue="toggle_receive_state_value"
                sendEventOnClick="toggle_send_event_on_click">
        </ch5-toggle>

        <br><br>

        <p>
            <b>Sample ch5-slider</b>
        </p>
        <ch5-slider
                feedbackMode="submit"
                receiveStateValue="slider_receive_state_value"
                sendEventOnChange="slider_send_event_on_change"
                step="10"
                min="0"
                max="100">
        </ch5-slider>

        <p>
            <b>Sample ch5-textinput</b>
        </p>
        <ch5-textinput
                sendEventOnFocus="textinput_1_send_event_on_focus"
                sendeventonblur="textinput_1_send_event_on_blur"
                sendeventonchange="textinput_1_send_event_on_change"
                feedbackmode="submit"
                receivestatevalue="12">
        </ch5-textinput>
    </ch5-form>

    <h4 style="padding-top: 24px; color: #3273dc">Custom Submit Button:</h4>
    <p>
        <button id="custom_submit_button_id" class="custom-submit-cancel-btns">Submit</button>
    </p>
</div>

<h2>2. Custom Cancel</h2>
<div style="padding-bottom: 24px;">
    <ch5-form
            id="demo"
            cancelId="custom_cancel_button_id"
            hideCancelButton="true"
    >
        <p>
            <b>Sample ch5-toggle</b>
        </p>
        <ch5-toggle
                labelOn="On"
                labelOff="Off"
                feedbackMode="submit"
                receiveStateValue="example_2_toggle_receive_state_value"
                sendEventOnClick="example_2_toggle_send_event_on_click">
        </ch5-toggle>

        <br><br>

        <p>
            <b>Sample ch5-slider</b>
        </p>
        <ch5-slider
                feedbackMode="submit"
                receiveStateValue="example_2_slider_receive_state_value"
                sendEventOnChange="example_2_slider_send_event_on_change"
                step="10"
                min="0"
                max="100">
        </ch5-slider>

        <p>
            <b>Sample ch5-textinput</b>
        </p>
        <ch5-textinput
                sendEventOnFocus="example_2_textinput_1_send_event_on_focus"
                sendeventonblur="example_2_textinput_1_send_event_on_blur"
                sendeventonchange="example_2_textinput_1_send_event_on_change"
                feedbackmode="submit"
                receivestatevalue="example_2_textinput_1_receive_value">
        </ch5-textinput>
    </ch5-form>

    <h4 style="padding-top: 24px; color: #3273dc">Custom Cancel Button:</h4>
    <p>
        <button id="custom_cancel_button_id" class="custom-submit-cancel-btns">Cancel</button>
    </p>
</div>

ch5-form showing custom Submit and Cancel buttons in sync with the default ch5-form buttons

Custom cancel and submit buttons with default ch5-form buttons

In this example the default ch5-form buttons are also kept, to show that the custom ones are in-sync with them.

Additionally, a ch5-textinput with validation was added, the submit button will only become available once all the validity checks contained in the form have passed.

Sample ch5-toggle



Sample ch5-slider

Sample ch5-textinput

Sample ch5-textinput with required input and a minimum length of 10 characters. Submit will only become available once the value of the ch5-textinput is valid

Custom buttons, in sync with the default ch5-form buttons

<h2>Custom cancel and submit buttons with default ch5-form buttons</h2>
<p>In this example the default ch5-form buttons are also kept, to show that the custom ones are in-sync with
    them.</p>
<p>Additionally, a ch5-textinput with validation was added, the submit button will only become available once all the
    validity checks contained in the form have passed.</p>
<div style="padding-bottom: 24px;">
    <ch5-form
            id="demo"
            submitId="custom_submit_btn_example_2"
            cancelId="custom_cancel_btn_example_2"
    >
        <p>
            <b>Sample ch5-toggle</b>
        </p>
        <ch5-toggle
                labelOn="On"
                labelOff="Off"
                feedbackMode="submit"
                receiveStateValue="example_3_toggle_receive_state_value"
                sendEventOnClick="example_3_toggle_send_event_on_click">
        </ch5-toggle>

        <br><br>

        <p>
            <b>Sample ch5-slider</b>
        </p>
        <ch5-slider
                feedbackMode="submit"
                receiveStateValue="example_3_slider_receive_state_value"
                sendEventOnChange="example_3_slider_send_event_on_change"
                step="10"
                min="0"
                max="100">
        </ch5-slider>

        <p>
            <b>Sample ch5-textinput</b>
        </p>
        <ch5-textinput
                sendEventOnFocus="example_3_textinput_1_send_event_on_focus"
                sendeventonblur="example_3_textinput_1_send_event_on_blur"
                sendeventonchange="example_3_textinput_1_send_event_on_change"
                feedbackmode="submit"
                receivestatevalue="12">
        </ch5-textinput>

        <p>
            <b>Sample ch5-textinput with <b style="color: red;">required input</b> and a minimum length of 10
                characters. Submit will only become available once the value of the ch5-textinput is valid</b>
        </p>
        <ch5-textinput
                sendEventOnFocus="example_3_textinput_2_send_event_on_focus"
                sendeventonblur="example_3_textinput_2_send_event_on_blur"
                sendeventonchange="example_3_textinput_2_send_event_on_change"
                minLength="10"
                required
                feedbackMode="submit">
        </ch5-textinput>
    </ch5-form>

    <h4 style="padding-top: 24px; color: #3273dc">Custom buttons, in sync with the default ch5-form buttons</h4>
    <p>
        <button id="custom_submit_btn_example_2" class="custom-submit-cancel-btns">Submit</button>
        <button id="custom_cancel_btn_example_2" class="custom-submit-cancel-btns">Cancel</button>
    </p>
</div>