Button

Button Colors

Use FormButton color classes to style them in driffrent colors.

default style

Primary Button

hf-formbutton-primary is used.

primary style

<div class="grid column3">
    <div class="r1 c1">
        <div id="pri_small"
            class="hf-formbutton-primary"
            data-win-control="HFWinJSCtrl.ButtonControl"
            data-win-options="{
                buttonType: 'small',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"></div>
    </div>
    <div class="r1 c2">
        <div id="pri_medium"
            class="hf-formbutton-primary"
            data-win-control="HFWinJSCtrl.ButtonControl"
            data-win-options="{
                buttonType: 'medium',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"></div>
    </div>
    <div class="r1 c3">
        <div id="pri_large"
            class="hf-formbutton-primary"
            data-win-control="HFWinJSCtrl.ButtonControl"
            data-win-options="{
                buttonType: 'large',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"></div>
    </div>
</div>

Warning Button

hf-formbutton-warning is used.

warning style

<div class="grid column3">
    <div class="r1 c1">
        <div id="war_small"
            class="hf-formbutton-warning"
            data-win-control="HFWinJSCtrl.ButtonControl"
            data-win-options="{
                buttonType: 'small',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"></div>
    </div>
    <div class="r1 c2">
        <div id="war_medium"
            class="hf-formbutton-warning"
            data-win-control="HFWinJSCtrl.ButtonControl"
            data-win-options="{
                buttonType: 'medium',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"></div>

    </div>
    <div class="r1 c3">
        <div id="war_large"
            class="hf-formbutton-warning"
            data-win-control="HFWinJSCtrl.ButtonControl"
            data-win-options="{
                buttonType: 'large',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"></div>

    </div>
</div>

Error Button

hf-formbutton-error is used.

error style

<div class="grid column3">
    <div class="r1 c1">
        <div id="err_small"
            class="hf-formbutton-error"
            data-win-control="HFWinJSCtrl.ButtonControl"
            data-win-options="{
                buttonType: 'small',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"></div>
    </div>
    <div class="r1 c2">
        <div id="err_medium"
            class="hf-formbutton-error"
            data-win-control="HFWinJSCtrl.ButtonControl"
            data-win-options="{
                buttonType: 'medium',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"></div>
    </div>
    <div class="r1 c3">
        <div id="err_large"
            class="hf-formbutton-error"
            data-win-control="HFWinJSCtrl.ButtonControl"
            data-win-options="{
                buttonType: 'large',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"></div>
    </div>
</div>

Button Style

Use button style utility to quickly style checkboxes like buttons.

button style

<div class="r1 c1 hf-button-style">
    <input id="doku-check1" type="checkbox" value="value" 
        data-win-control="HFWinJSCtrl.CheckBox"
        data-win-options="{ label: 'Test Checkbox' }" />
</div>
<div class="r1 c1 hf-button-style hover">
    <input id="doku-check2" type="checkbox" value="value" 
        data-win-control="HFWinJSCtrl.CheckBox"
        data-win-options="{ label: 'Test Checkbox Hover' }" />
</div>
<div class="r1 c1 hf-button-style disabled">
    <input id="doku-check3" type="checkbox" value="value" 
        data-win-control="HFWinJSCtrl.CheckBox"
        data-win-options="{ label: 'Test Checkbox Disabled', disabled: true }" />
</div>

Button Inline

Use button inline utility to quickly place a small button inline with a TextField under a label.

button inline

<div class="r1 c1 hf-button-inline">
    <input type="text" id="doku_input" data-win-control="HFWinJSCtrl.TextField" 
        data-win-options="{
            label: 'Test Button Inline'
        }" />
    <div id="doku_reverseGeolocator" class="pdf-hide" 
        data-win-control="HFWinJSCtrl.ReverseGeolocatorButton"
        data-win-options="{
            buttonType: 'small',
            targetFields: {
                'address_zip_code':'postal_code', 
                'address_city': 'locality', 
                'address_street_and_no':'route + street_number' 
            },
            typesSeperator: ', '
        }"></div>
</div>

FormControl with error text has to be wrapped in a hf-button-inline-input container to work properly.

button inline with validation

<div class="r1 c1 hf-button-inline">
    <div id="email_label"
        data-win-control="HFWinJSCtrl.Label"
        data-win-options="{
            label: 'E-mail address',
        }"></div>
    <div class="hf-button-inline-input">
        <input type="email"
            placeholder="name@domain.com"
            id="gastro_patient_email"
            data-win-control="HFWinJSCtrl.TextField"
            data-win-options="{
                validator: {
                    type: 'email',
                    errorText: 'The entered e-mail address is invalid.'
                }
            }" />
    </div>
    <div id="mailButton_gastro_patient"
        class="pdf-hide"
        data-win-control="HFWinJSCtrl.MailButton"
        data-win-options="{
            mailId: 'gastro_patient_email',
            mailSubject: '[HybridForms]%20Demo%20-%20Info-Mail',
            buttonLabel: 'Open mail',
            buttonType: 'small',
            buttonHeading: 'Mail',
        }">
    </div>
</div>