伏地物体部件

沃尔多 加:各种以Volto为主的部件.

特征

此 Volto 附加件提供了多个“ 抽象” 部件, 以允许复杂 由基于图案的表格编辑的信息。 它的中心是 概念 : “ 我们可以通过使用 schema 来创建编辑 JSON 对象的表单 ” , 因此 它现在提供编辑“ JSON 对象列表” 的部件, “映射” JSON对象"和单曲"JSON对象,但我选择了它的"计划.

平面对象

此部件允许您通过创建、编辑和编辑来编辑对象列表 删除可用提供对象编辑的示例 schema 参数. 列表可用拖放排序 。 您也可以提供一个图案扩展器, 带有签名的函数 (schema, data) => schema,将调整,按 它的图谋。 要使用此部件, 在图中设置 widget 字段改为 object_list_inline。 。 。 .

数据对块的外观:

"a55c5053-ba81-4f73-ab29-7cdea74df20f": {
    "@type": "dataTable",
    "columns": [
        {
            "@id": "f899ca76-68be-4ded-aa0b-669c04c27309",
            "column": " PERC_HA_07\n(in %)",
            "renderer": "progress",
            "title": "21"
        },
        {
            "@id": "94315c5a-e031-4b7e-acb2-93887878a252",
            "column": " PERC_HA_07\n(in %)",
            "title": "12"
        }
    ],
}

这个 columns 字段,在此情况下,是该字段生成的数据 FlatListObject。 。 。 . 这个领域的计划可能看起来像(ColumnSchema() 只是生成 另一种适合 column 我们的定义 具体使用情况:

columns: {
  title: 'Columns',
  description: 'Leave empty to show all columns',
  schema: ColumnSchema(),
  widget: 'object_list_inline',
},

绘图部件

此部件允许编辑对象的属性 。 例如,在 继块数据之后 row_colors 值由实例生成 MappingWidget。 。 。 .

"4430a32a-a266-497b-88e7-72fead5ab718": {
  "@type": "dottedTableChart",
  "column_data": "habitat_group",
  "row_colors": {
    "Bad": "#ed1834",
    "F - Heathland, scrub and tundra": "#88c24f",
    "Good": "#3c8000",
    "Poor": "#f2a70e",
    "Unknown": "#8d8d8d"
  },
  "row_data": "assessment",
  "size_data": "quantity"
},

你需要提供 options,该列表为对象列表 {id, title} 编辑 field_props,这些参数是: 将用来编辑数值。 就我们来说,这个计划的定义 用于编辑上述值的是(注意,选项是空的,我们正在充斥) 在编辑组件中,在将图案传递到窗体之前:

row_colors: {
  title: 'Colors',
  widget: 'option_mapping',
  field_props: {
    widget: 'simple_color',
    available_colors: settings.available_colors,
  },
  options: [],
}

要使用此部件, 在图中设置 widget 字段改为 option_mapping。 。 。 .

按类型分列的对象

通过此部件, 您可以选择将使用的值类型, 从 : 预定义的策略列表。 使用这种部件的策略可以 看起来像:

const LinkEditSchema = {
  title: 'Link',
  fieldsets: [
    {
      id: 'default',
      title: 'Default',
      fields: ['link'],
    },
  ],
  properties: {
    link: {
      title: 'Link',
      widget: 'object_by_type',
      schemas: [
        {
          id: 'internal',
          icon: internalSVG,
          schema: InternalLinkSchema,
        },
        {
          id: 'external',
          icon: externalSVG,
          schema: ExternalLinkSchema,
        },
        {
          id: 'email',
          icon: emailSVG,
          schema: EmailLinkSchema,
        },
      ],
    },
  },
  required: [],
};

要使用此部件, 在图中设置 widget 字段改为 object_by_type。 。 。 .

开始

试用多克来装伏托对象

  git clone https://github.com/eea/volto-object-widget.git
  cd volto-object-widget
  make
  make start

转到 http://localhost:3:00

make start 现在默认为 Volto 18. 要运行同样的设置 对沃尔多17,使用:

  VOLTO_VERSION=17 make
  VOLTO_VERSION=17 make start

在您的 Volto 工程中添加 volto- 对象widget

1. 确保你有 Plone 后端 在http://localhost:8080/Plone上运行

   docker compose up backend
   

2. 启动 Volto 前端

• 如果你已经有伏尔托项目,只需更新 package.json数字 :

  "dependencies": {
      "@eeacms/volto-object-widget": "*"
  }
  

财务报告和审定财务报表 volto.config.js数字 :

const addons = ['@eeacms/volto-object-widget'];

• 如果没有,请按照Plone官方文件对Volto 18+的建议,用 Cookieplone 创建一个:

  uvx cookieplone project
  cd project-title
  

1. 安装或更新依赖关系,然后启动项目 :

   make install
   

   对于 Cookieplone 项目, 在单独的终端中启动后端和前端 :

   make backend-start
   make frontend-start
   

   对于一个遗留下来的Volto 17项目,安装软件包 yarn 并像往常一样重新启动前端.

2. 转到 http://localhost:3:00

3. 剪辑愉快!

释放

见 发 言。 。 。 .

如何捐款

见 发达国家d。 。 。 .

版权和许可证

原始守则的初始所有人是欧洲环境署. 所有权利保留.

见 利比里亚 详细情况.

供资

欧洲环境署(欧盟)