Foxit Developer

form-group component ​

The <form-group> component adds controls with a specific structure to a form. It organizes inputs with labels and optional help text.

Code example ​

Label text ​

Label text describes the associated input.

Label layout ​

The form-group label supports three layouts: ltr, rtl, and ttb:

  • ltr and rtl are horizontal: the label and input appear on one row.
  • ltr places the label to the left of the input.
  • rtl places the label to the right of the input.
  • ttb is vertical: the label appears above the input.

The example below shows all three layouts:

html
<html>
<template id="layout-template">
    <webpdf>
        <toolbar>
            <group-list>
                <group name="home-tab-group-hand">
                    <hand-ribbon-button></hand-ribbon-button>
                    <open-file-ribbon-dropdown></open-file-ribbon-dropdown>
                    <download-file-ribbon-button></download-file-ribbon-button>
                </group>
            </group-list>
        </toolbar>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
        <template name="template-container">
            <layer class="center" visible="true" backdrop style="width: 640px">
                <layer-header title="form-group component example" @draggable="{type: 'parent'}"></layer-header>
                <layer-view>
                    <fieldset>
                        <legend>direction="ltr"</legend>
                        <form-group label="Name">
                            <input>
                        </form-group>
                        <form-group label="Email">
                            <input type="email">
                        </form-group>
                        <form-group label="Address">
                            <input type="address">
                        </form-group>
                    </fieldset>
                    <fieldset>
                        <legend>direction="rtl"</legend>
                        <form-group label="Name" direction="rtl">
                            <input>
                        </form-group>
                        <form-group label="Email" direction="rtl">
                            <input type="email">
                        </form-group>
                        <form-group label="Address" direction="rtl">
                            <input type="address">
                        </form-group>
                    </fieldset>
                    <fieldset>
                        <legend>direction="ttb"</legend>
                        <form-group label="Name" direction="ttb">
                            <input>
                        </form-group>
                        <form-group label="Email" direction="ttb">
                            <input type="email">
                        </form-group>
                        <form-group label="Address" direction="ttb">
                            <input type="address">
                        </form-group>
                    </fieldset>
                </layer-view>
            </layer>
        </template>
    </webpdf>
</template>
</html>
<style>
    .fv__ui-form-group-label {
        width: 5em;
    }

    .fv__ui-form-group {
        margin-bottom: 10px;
        color: #666;
    }

    input {
        border: 1px solid #ddd;
        margin-right: 1em;
    }
</style>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        }
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: document.body,
        appearance: CustomAppearance,
        addons: []
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

Label delimiter ​

In the examples above, when direction is ltr or ttb, a : delimiter is shown automatically. To hide it, set delimiter to an empty string:

html
<html>
<template id="layout-template">
    <webpdf>
        <toolbar>
            <group-list>
                <group name="home-tab-group-hand">
                    <hand-ribbon-button></hand-ribbon-button>
                    <open-file-ribbon-dropdown></open-file-ribbon-dropdown>
                    <download-file-ribbon-button></download-file-ribbon-button>
                </group>
            </group-list>
        </toolbar>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
        <template name="template-container">
            <layer class="center" visible="true" backdrop style="width: 640px">
                <layer-header title="form-group component example" @draggable="{type: 'parent'}"></layer-header>
                <layer-view>
                    <fieldset>
                        <legend>direction="ltr" delimiter=""</legend>
                        <form-group label="Name" delimiter="">
                            <input>
                        </form-group>
                        <form-group label="Email" delimiter="">
                            <input type="email">
                        </form-group>
                        <form-group label="Address" delimiter="">
                            <input type="address">
                        </form-group>
                    </fieldset>
                    <fieldset>
                        <legend>direction="ttb" delimiter=""</legend>
                        <form-group label="Name" direction="ttb" delimiter="">
                            <input>
                        </form-group>
                        <form-group label="Email" direction="ttb" delimiter="">
                            <input type="email">
                        </form-group>
                        <form-group label="Address" direction="ttb" delimiter="">
                            <input type="address">
                        </form-group>
                    </fieldset>
                </layer-view>
            </layer>
        </template>
    </webpdf>
</template>
</html>
<style>
    .fv__ui-form-group-label {
        width: 5em;
    }

    .fv__ui-form-group {
        margin-bottom: 10px;
        color: #666;
    }

    input {
        border: 1px solid #ddd;
        margin-right: 1em;
    }
</style>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        }
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: document.body,
        appearance: CustomAppearance,
        addons: []
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 400px"
  }
}

Help text ​

Help text is optional and describes the control. Set it with the description attribute; values support i18n keys.

The example below shows help text in each layout:

html
<html>
<template id="layout-template">
    <webpdf>
        <toolbar>
            <group-list>
                <group name="home-tab-group-hand">
                    <hand-ribbon-button></hand-ribbon-button>
                    <open-file-ribbon-dropdown></open-file-ribbon-dropdown>
                    <download-file-ribbon-button></download-file-ribbon-button>
                </group>
            </group-list>
        </toolbar>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
        <template name="template-container">
            <layer class="center" visible="true" backdrop style="width: 640px">
                <layer-header title="form-group component example" @draggable="{type: 'parent'}"></layer-header>
                <layer-view>
                    <fieldset>
                        <legend>direction="ltr"</legend>
                        <form-group label="Name" description="让我们知道你的名字">
                            <input>
                        </form-group>
                    </fieldset>
                    <fieldset>
                        <legend>direction="rtl"</legend>
                        <form-group label="Email" direction="rtl" description="用于验证和接收提醒">
                            <input type="email">
                        </form-group>
                    </fieldset>
                    <fieldset>
                        <legend>direction="ttb"</legend>
                        <form-group label="Address" direction="ttb" description="用于邮寄">
                            <input type="address">
                        </form-group>
                    </fieldset>
                </layer-view>
            </layer>
        </template>
    </webpdf>
</template>
</html>
<style>
    .fv__ui-form-group-label {
        width: 5em;
    }

    .fv__ui-form-group {
        margin-bottom: 10px;
        color: #666;
    }

    input {
        border: 1px solid #ddd;
        margin-right: 1em;
    }
</style>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        }
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: document.body,
        appearance: CustomAppearance,
        addons: []
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 400px"
  }
}

Change properties dynamically ​

All form-group properties can be updated in the template or from JavaScript. Example:

html
<html>
<template id="example-dialog-template">
    <layer class="center" backdrop style="width: 640px" @var.comp="$component">
        <layer-header title="form-group component example" @draggable="{type: 'parent'}"></layer-header>
        <layer-view>
            <fieldset>
                <legend>参数调整（模板语法）</legend>
                <form-group label="设置签名">
                    <input @model="comp.label">
                </form-group>
                <form-group label="设置帮助文本">
                    <input @model="comp.description">
                </form-group>
                <form-group label="设置分隔符">
                    <input @model="comp.delimiter">
                </form-group>
                <form-group label="设置布局" tag="div">
                    <radio name="form-group-direction" @model="comp.direction" value="ltr" text="水平-靠左"></radio>
                    <radio name="form-group-direction" @model="comp.direction" value="rtl" text="水平-靠右"></radio>
                    <radio name="form-group-direction" @model="comp.direction" value="ttb" text="垂直"></radio>
                </form-group>
            </fieldset>
            <fieldset>
                <legend>参数调整（js API）</legend>
                <button @on.click="comp.resetLabel()">重置标签文本</button>
                <button @on.click="comp.resetDescription()">重置帮助文本</button>
                <button @on.click="comp.resetDirection()">随机布局</button>
            </fieldset>
            <fieldset>
                <legend>效果预览</legend>
                <form-group
                        @setter.label="comp.label"
                        @setter.description="comp.description"
                        @setter.delimiter="comp.delimiter"
                        @setter.direction="comp.direction"
                        @init="comp.formGroupComponent = $component"
                >
                    <input>
                </form-group>
            </fieldset>
        </layer-view>
    </layer>
</template>
<template id="layout-template">
    <webpdf>
        <toolbar>
            <group-list>
                <group name="home-tab-group-hand">
                    <hand-ribbon-button></hand-ribbon-button>
                    <open-file-ribbon-dropdown></open-file-ribbon-dropdown>
                    <download-file-ribbon-button></download-file-ribbon-button>
                </group>
            </group-list>
        </toolbar>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
        <template name="template-container">
            <exp:example-dialog visible="true"></exp:example-dialog>
        </template>
    </webpdf>
</template>
</html>
<style>
    .fv__ui-form-group {
        margin-bottom: 10px;
        color: #666;
    }

    input {
        border: 1px solid #ddd;
        margin-right: 1em;
    }
</style>
<script>
    class ExampleDialog extends UIExtension.SeniorComponentFactory.createSuperClass({
        template: document.getElementById('example-dialog-template').innerHTML
    }) {
        static getName() {
            return 'example-dialog'
        }

        init() {
            super.init();
            this.delimiter = ':';
            this.description = '帮助文本';
            this.label = '标签文本';
            this.direction = 'ltr';
        }

        resetLabel() {
            this.formGroupComponent.setLabel(
                    this.label = new Date().toUTCString()
            );
            this.digest();
        }

        resetDescription() {
            this.formGroupComponent.setDescription(
                    this.description = '帮助文本：' + new Date().toUTCString()
            );
            this.digest();
        }

        resetDirection() {
            this.formGroupComponent.setDirection(
                    this.direction = ['ltr', 'rtl', 'ttb'][Math.floor(Math.random() * 3)]
            );
            this.digest();
        }
    }

    UIExtension.modular.module('exp', []).registerComponent(ExampleDialog);
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        }
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: document.body,
        appearance: CustomAppearance,
        addons: []
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

API ​

form-group component template ​

html
<form-group delimiter=":" direction="ltr" label="" description="">
    <input>
</form-group>

form-group attributes:

PropertyDescriptionTypeDefaultVersion
delimiterDelimiter after the label; ignored when direction is rtlstring':'8.5.0
directionLayout of label and input'ltr' | 'rtl' | 'ttb''ltr'8.5.0
labelLabel textstring''8.5.0
descriptionHelp text below the inputstring''8.5.0

Methods ​

Methods on the form-group component:

MethodDescriptionVersion
setDelimiter(delimiter: string)Set the delimiter8.5.0
`setDirection(direction: 'ltr''rtl''ttb')`
setLabel(label: string)Set the label8.5.0
setDescription(description: string)Set the help text8.5.0

Events ​

The form-group component does not define events.