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>