动态表单

巴克励步

发布于：2024-07-07

用于模版定义动态字段，设计的表单类型，以达到自定义模版变量的目的：

表单 type: `checkbox`

Param	Description	Input
Type	—	checkbox
Label	—
Default	—	0 1 false true
Info	—

前端变量值

类型：TrueClass

true

前端变量显示

true

示例：

表单代码：

{
  "id": "recommend_to_index",
  "type": "checkbox",
  "label": "推荐到首页展示",
  "default": true
}

表单预览：

表单 type: `color`

Param	Description	Input
Type	—	color
Label	—
Default	—	#00AA00
Colors	—	#FF0000\|#00FF00\|#0000FF
Info	—

前端变量值

类型：String

前端变量显示

#00AA00

示例：

代码：

{
   "id": "text_color",
   "type": "color",
   "label": "Hero 文字颜色"
}

预览：

表单 type: `color_background`

Param	Description	Input
Id	—	bg_color
Label	—
Info	—
Default	—	{"from":"#0F69E8","to":"#1C0597"}
Colors	—	rgba(244, 67, 54, 1)\|rgba(233, 30, 99, 1)

前端变量值

类型：DynamicForm::ColorBackgroundComponent::Value

前端变量显示

linear-gradient(90deg, #0F69E8, #1C0597)

#1C0597

90

#0F69E8

示例：

代码：

{
   "id": "banner_background",
   "label": "Hero 背景色",
   "type": "color_background"
}

预览：

表单 type: `date`

Param	Description	Input
Type	—	date
Label	—	foo
Default	—	2024-01-28
Info	—	这是一个日期选择器

前端变量值

类型：Date

"2024-01-28"

前端变量显示

2024-01-28

示例：

代码：

{
   "id": "start_at",
   "type": "date",
   "label": "开始时间",
   "default": "2025-01-01"
}

预览：

表单 type: `font_picker`

Param	Description	Input
Type	—	font_picker
Label	—
Default	—	arial
Fonts	—	["system-ui", "arial"]
Info	—	选择一个字体

前端变量值

类型：String

"arial"

前端变量显示

arial

示例：

代码：

{
   "id": "font",
   "type": "font_picker",
   "label": "字体",
   "default": "Arial"
}

预览：

表单 type: `header`

动态表单分类标题，用于分组表单字段。

* 没有前端变量

Param	Description	Input
Content	—

示例：

代码：

{
   "type": "header",
   "content": "分组 1"
}

预览：

表单 type: `paragraph`

这是一段文字介绍，用于动态表单的说明文字, 支持安全的 HTML 标签，自动过滤 script 标签。

* 没有前端变量

Param	Description	Input
Content	—

示例：

代码：

{
   "type": "paragraph",
   "content": "paragraph"
}

预览：

表单 type: `html`

Param	Description	Input
Id	—	google_ads
Label	—	谷歌广告代码
Default	—
Info	—	粘贴谷歌广告 HTML 代码

前端变量值

类型：ActiveSupport::SafeBuffer

"<strong style=\"color: blue;\">这是蓝色粗体字</strong>"

前端变量显示

这是蓝色粗体字

示例：

代码：

{
   "id": "third_party_video_url",
   "type": "html",
   "label": "Youtube或其他视频地址",
   "info": "<iframe src='https://www.youtube.com/embed/yrLV3ONB..."
}

预览：

表单 type: `link`

待处理

表单 type: `number`

Param	Description	Input
Id	—	price
Label	—
Default	—	10
Min	—	0
Max	—	10
Step	—	0.5
Info	—	给产品标定一个价格

前端变量值

类型：Float

10.0

前端变量显示

10.0

示例：

代码：

{
   "id": "price",
   "type": "number",
   "label": "商品数量",
   "min": "0",
   "max": "10",
   "step": "0.5",
   "default": "5"
}

预览：

表单 type: `radio`

1. 参数及示例

Param	Description	Input
Id	—	gender
Label	—	性别
Default	—	0
Choices	—	[{"label":"保密","value":"0"},{"label":"男","value":"1"},{"label":"女","value":"2"}]
Info	—

前端变量值

类型：DynamicForm::RadioComponent::Value

"#<DynamicForm::RadioComponent::Value:0x000000011bf68738 label: \"保密\", value: \"0\">"

前端变量显示

保密

0

保密

示例：

代码：

{
  "id": "page_type",
  "type": "radio",
  "label": "页面格式",
  "choices": [{"label":"富文本","value":"0"},{"label":"HTML","value":"1"}],
  "default": "0",
  "info": "*  如果选择 HTML 格式，则整页面只会呈现【html_content】表单信息"
},

预览：

2. 数据引用

引用其他数据源作为候选值。使用时 choices 参数改为 choices_from。以下为choices_from 可选值：

$self.[setting_key] 从当前页面获取动态表单的值，作为 choices 数据
$index.[setting_key] 从首页页面获取动态表单的值，作为 choices 数据
$parent.[setting_key] 从当前页面的上级获取动态表单的值，作为 choices 数据
$site.[setting_key] 从站点(settings_schema.json)获取动态表单的值，作为 choices 数据
$site_user_group 从站点用户组获取数据


# $self.[setting_key]
{
  "id": "keywords",
  "type": "radio",
  "choices_from": "$self.keywords_options"
  "label": "关键词",
  "info": "从当前页面指定的关键词中选择"
}

# $index.[setting_key]
{
  "id": "keywords",
  "type": "radio",
  "choices_from": "$index.keywords_options"
  "label": "关键词",
  "info": "从首页页面指定的关键词中选择"
}

# $parent.[setting_key]
{
  "id": "keywords",
  "type": "radio",
  "choices_from": "$parent.keywords_options"
  "label": "关键词",
  "info": "从当前页面的上级指定的关键词中选择"
}

# $site.[setting_key] 
{
  "id": "city",
  "type": "radio",
  "choices_from": "$site.cities",
  "label": "所在城市"
  "info": "从首页设置城市选择"
}

# $site_user_group 
{
  "id": "user_group_ids",
  "type": "select",
  "choices_from": "$site_user_group",
  "multiple": true,
  "label": "用户组"
}

表单 type: `range`

Param	Description	Input
Id	—	distance
Label	—	可送范围
Default	—	6.5
Min	—	0
Max	—	10
Step	—	0.5
Unit	—	Km
Info	—	选择快递可送范围

前端变量值

类型：Float

6.5

前端变量显示

6.5

示例：

代码：

{
    "id": "distance",
    "type": "range",
    "label": "配送范围",
    "min": "0",
    "max": "100",
    "step": "0.1",
    "default": "15",
    "unit": "km",
    "info": "选择快递可配送范围"
}

预览：

表单 type: `richtext`

Param	Description	Input
Id	—	foo
Label	—
Default	—
Info	—	这是一个HTML输入框

前端变量值

类型：ActiveSupport::SafeBuffer

"<strong style=\"color: blue;\">HTML源代码会被转义</strong>"

前端变量显示

HTML源代码会被转义

示例：

代码：

{
   "id": "richtext_1",
   "type": "richtext",
   "label": "richtext"
}

预览：

表单 type: `select`

1. 参数及示例

select 选项有三种情况：默认下拉框、分组下拉框、多选下拉框。

1.1. default（默认）

Param	Description	Input
Id	—	company_size
Label	—	公司规模
Default	—	1
Choices	—	[{"label":"10 人以下","value":"0"},{"label":"10~50人","value":"1"},{"label":"50~200人","value":"2"},{"label":"200~1000人","value":"3"},{"label":"1000以上","value":"4"}]
Info	—

模前端变量显示

10~50人

示例：

代码：

{
   "id": "source_type",
   "type": "select",
   "default": "0",
   "choices": [{"label":"资源库视频","value":"0"},{"label":"Youtube视频","value":"1"},{"label":"其他","value":"2"}],
   "label": "视频来源"
}

预览：

1.2. Grouped（分组）

Param	Description	Input
Id	—	city
Label	—	城市
Default	—	km
Choices	—	[{"group":"四川省","label":"成都市","value":"cd"},{"group":"四川省","label":"德阳市","value":"dy"},{"group":"云南省","label":"昆明市","value":"km"},{"group":"云南省","label":"大理市","value":"dl"}]
Info	—	选择您所在的城市

前端变量显示

昆明市

km

昆明市

1.3. multiple（多选）

Param	Description	Input
Id	—	city
Label	—	城市
Default	—	["km", "dl"]
Choices	—	[{"group":"四川省","label":"成都市","value":"cd"},{"group":"四川省","label":"德阳市","value":"dy"},{"group":"云南省","label":"昆明市","value":"km"},{"group":"云南省","label":"大理市","value":"dl"}]
Info	—	选择您所在的城市

2. 数据引用

引用其他数据源作为候选值。使用时 choices 参数改为 choices_from。以下为choices_from 可选值：

$self.[setting_key] 从当前页面获取动态表单的值，作为 choices 数据
$index.[setting_key] 从首页页面获取动态表单的值，作为 choices 数据
$parent.[setting_key] 从当前页面的上级获取动态表单的值，作为 choices 数据
$site.[setting_key] 从站点(settings_schema.json)获取动态表单的值，作为 choices 数据
$site_user_group 从站点用户组获取数据


# $self.[setting_key]
{
  "id": "keywords",
  "type": "select",
  "choices_from": "$self.keywords_options",
  "multiple": true,
  "label": "关键词",
  "info": "从当前页面指定的关键词中选择"
}

# $index.[setting_key]
{
  "id": "keywords",
  "type": "select",
  "choices_from": "$index.keywords_options",
  "multiple": true,
  "label": "关键词",
  "info": "从首页页面指定的关键词中选择"
}

# $parent.[setting_key]
{
  "id": "keywords",
  "type": "select",
  "choices_from": "$parent.keywords_options",
  "multiple": true,
  "label": "关键词",
  "info": "从当前页面的上级指定的关键词中选择"
}

# $site.[setting_key] 
{
  "id": "city",
  "type": "select",
  "choices_from": "$site.cities",
  "label": "所在城市"
  "info": "从首页设置城市选择"
}

# $site_user_group 
{
  "id": "user_group_ids",
  "type": "select",
  "choices_from": "$site_user_group",
  "multiple": true,
  "label": "用户组"
}

表单 type: `text`

Param	Description	Input
Id	—
Label	—
Default	—
Info	—

前端变量值

类型：ActiveSupport::SafeBuffer

"&lt;strong style=&quot;color: blue;&quot;&gt;HTML源代码会被转义&lt;/strong&gt;"

前端变量显示

<strong style="color: blue;">HTML源代码会被转义</strong>

示例：

代码：

{
   "id": "slogan",
   "type": "text",
   "label": "站点口号",
   "default": "👋 引领先锋，探码科技"
}

预览：

表单 type: `textarea`

Param	Description	Input
Id	—	foo
Label	—	foo
Default	—
Rows	—	4
Info	—	这是一个HTML输入框

前端变量值

类型：ActiveSupport::SafeBuffer

"&lt;strong style=&quot;color: blue;&quot;&gt;HTML源代码会被转义&lt;/strong&gt;"

前端变量显示

<strong style="color: blue;">HTML源代码会被转义</strong>

示例：

代码：

{
   "id": "textarea_1",
   "type": "textarea",
   "label": "Textarea"
}

预览：

表单 type: `tag_picker`

Param	Description	Input
Id	—	tag
Label	—	产品标签
Default	—
Multiple	—	true
Info	—

前端变量值

类型：Array

[]

前端变量显示

[]

示例：

代码：

{
   "id": "tags",
   "type": "tag_picker",
   "multiple": true,
   "label": "站点热门标签"
}

预览：

表单 type: `video_picker`

Param	Description	Input
Id	—	my_video
Label	—	宣传视频
Default	—
Height	—
Width	—	480
Ratio	—	16:9
Info	—	从资源库中选择视频资源

前端变量值

类型：String

视频地址

前端变量显示

示例：

代码：

{
   "id": "video_url",
   "type": "video_picker",
   "label": "视频",
   "info": "从资源库选择视频"
}

预览：

表单 type: `image_picker`

Param	Description	Input
Id	—
Label	—
Default	—
Width	—	640
Height	—	400
Ratio	比例, 例如 16:9	16:9
Info	—	从资源库中选择图片资源

前端变量值

类型：String

图片路径

前端变量显示

示例：

代码：

{
   "id": "thumb_image_url",
   "type": "image_picker",
   "ratio": "16:9",
   "width": 240,
   "label": "封面图",
   "info": "选择一个 16:9 的图片，默认宽度 240px"
}

预览：

表单 type: `dam_picker`

Param	Description	Input
Id	—
Label	—
Default	—
Info	—	从资源库中选择任意资源

前端变量值

类型：String

资源路径

前端变量显示

示例：

代码：

{
   "id": "source_url",
   "type": "dam_picker",
   "label": "资源地址",
   "info": "选择一个资源"
}

预览：

表单 type: `file_picker`

Param	Description	Input
Id	—
Label	—
Default	—
Info	—	从资源库中选择文件资源

前端变量值

类型：String

文件路径

前端变量显示

示例：

代码：

{
   "id": "pdf_url",
   "type": "file_picker",
   "label": "PDF",
   "info": "选择一个 pdf 文件"
}

预览：

提交反馈

变量和方法

通过 git 安装模板

动态表单

表单 type: checkbox

表单 type: color

表单 type: color_background

表单 type: date

表单 type: font_picker

表单 type: header

表单 type: paragraph

表单 type: html

表单 type: link

表单 type: number

表单 type: radio

1. 参数及示例

2. 数据引用

表单 type: range

表单 type: richtext

表单 type: select

1. 参数及示例

1.1. default（默认）

1.2. Grouped（分组）

1.3. multiple（多选）

2. 数据引用

表单 type: text

表单 type: textarea

表单 type: tag_picker

表单 type: video_picker

表单 type: image_picker

表单 type: dam_picker

表单 type: file_picker

表单 type: `checkbox`

表单 type: `color`

表单 type: `color_background`

表单 type: `date`

表单 type: `font_picker`

表单 type: `header`

表单 type: `paragraph`

表单 type: `html`

表单 type: `link`

表单 type: `number`

表单 type: `radio`

表单 type: `range`

表单 type: `richtext`

表单 type: `select`

表单 type: `text`

表单 type: `textarea`

表单 type: `tag_picker`

表单 type: `video_picker`

表单 type: `image_picker`

表单 type: `dam_picker`

表单 type: `file_picker`