Html 字段

表单中的富 HTML 内容


属性

html 字段可用的属性,按用途分组:

属性 说明
basic
name
string / 必填 / 唯一

Field name
Alfanumeric + underscore + dash

This attribute represents the name of the form field.

type
string / 必填

Field type

Other attributes might only be available for some field types.

值:
html
label
string

Field label
Free text

A friendly name/label for the field. Note: if not set, the field name is used as label, but not when type is html.

Since 6.0.3: Supports placeholders for dynamic labels (e.g., Label: $(fieldname)).

data
expression
string

A javascript expression.
Valid javascript

By default this javascript is evaluated on the server side and limited to predefined functions (for security). However in combination with runLocal, the evaluation is ran in the browsers sandbox and allows the full javascript power. An html field always evaluates its expression in the browser, as with runLocal: true: it never runs on the server. When used in an enum field, the expression must return a flat array or array of flat objects, to make it presentable in a dropdown box.
An expression supports placeholders: $(fieldname) is replaced by the value of that field before the expression runs.
On the server, the predefined functions are called as fn.<name>(...), for example fn.fnTime().

tip: use the alias local (type=’expression’,runLocal=true,hide=true,output=false)
tip: use the alias local_out (type=’expression’,runLocal=true,hide=true)
tip: use the alias credential (type=’expression’,runLocal=true,hide=true,asCredential=true)

interaction
dependencyFn
string
在版本 4.0.0 中添加

The dependency logical function

This attribute represents the logical function between multiple dependencies.

选项:
  • and(默认)
  • or
  • nand
  • nor
dependencies
list / elements=object

Show/hide this field based on the values or other fields
Reference to other formfields and their values

Each dependency element is either an object with the following 2 attributes:

  • name: holds the fieldname.
  • values: a list of valid values for the referenced field.

Or with the following 2 attributes:

  • name: holds the fieldname.
  • isValid: a boolean to check if the referenced is validated or not.

Use in combination with attribute dependencyFn.

output
output
boolean
在版本 6.2.0 中添加

Include field value as extravar

Form fields are by default sent as extravars.
Set to false to exclude a field from the extravar output.

默认值:
true
security
noLog
boolean
在版本 2.2.3 中添加

Disable backend logging

Disables logging in the backend, to hide passwords for example.

默认值:
false
validation
ignoreIncomplete
boolean

Allow form submit on non-evaluated placeholders

When an expression-based field has placeholders,
the default form behaviour is not to allow form submit until all placeholders are resolved. When this attribute is true, the form does not wait for placeholder completion for this field.

默认值:
false
visualization
group
string

The field group name
Free text

With this attribute you can group fields together.
When all fields in a group are hidden (due to dependencies), the group is also hidden.

line
string
在版本 4.0.3 中添加

The field line name
Free text

With this attribute you can group fields in a single line together.
Use together with the width parameter to set the width, if not, the width is auto.

width
string
在版本 4.0.3 中添加

The field width
A valid Bootstrap Column width

With this attribute you can set the width of a field.
Use together wit the line parameter to put fields on 1 line. see https://getbootstrap.com/

选项:
  • col-1
  • col-2
  • col-3
  • col-4
  • col-5
  • col-6
  • col-7
  • col-8
  • col-9
  • col-10
  • col-11
  • col-12

示例

html 字段示例(YAML):

Alert

字段定义(YAML):

- type: html
  name: alert
  expression: |
    '<div class="alert alert-danger" role="alert"> 
      danger mister robinson !
    </div>'
- type: html   
  name: image
  expression: |
    '<img src="https://dummyimage.com/16:9x1080" />' 
- name: header
  type: html
  expression: | 
    '<h3 class="title is-3">Your own title</h3>'          

字段定义(YAML):

- type: html
  name: documentation
  expression: |
    '<a href="https://ansibleforms.com/" target="_blank">Read the documentation</a>'