零起点入门系列教程⑤:用宜搭简单布局一个首页

简介: 【零起点入门系列教程】将会带给大家从业务视角出发由浅入深地学习用宜搭实现应用搭建。即便是没有任何代码基础的新手只要跟着系列课程,从0开始慢慢修炼,也能找到成功搭建应用的乐趣。今天第五讲,如何用宜搭简单布局一个首页。

【零起点入门系列教程】将会带给大家从业务视角出发由浅入深地学习用宜搭实现应用搭建。即便是没有任何代码基础的新手只要跟着系列课程,从0开始慢慢修炼,也能找到成功搭建应用的乐趣。今天第五讲,如何用宜搭简单布局一个首页。

如何布局首页?

我们以“企业综合防疫”为例,给大家分步教学,如何用宜搭进行首页布局。

首先,访问宜搭首页,在模板中心找到 “企业综合防疫方案”应用,点击并启用此应用,给应用命名并且选择“保留示例数据”。创建完毕之后会自动跳转到该应用的后台管理。

image.png

从后台管理页面可以看到很多类型的页面,其中包含了我们之前没有见过的页面类型,它前面的图标是一个黄色的窗口,代表的是一个自定义页面,在“新建页面”看到有“新建自定义页面”这个选项。

自定义页面主要是给应用提供一些门户或者作为当前应用的首页。我们可以在上面放置一些业务访问入口,或者在这个页面里提供一些资讯信息提供用户去查阅。

image.png

可以看到当前这些页面没有提交按钮,同时也没有数据管理,也就是意味着它只是作为一个展示类的作用,并不是用于提交数据或发起流程。我们可以利用它来做一些首页,并且这些页面内部也提供了很多丰富的前端组件。


通过首页进入到表单设计器内,从“大纲树”可以看到整个页面的布局。从“页面内容”里面可以看到当前页面放了两个轮播图组件。

image.png

下方会有一个“容器”,它的主要功能是提供了一个区域,在这个区域里面会包含各种业务页面的访问入口。在“容器”下面还有 “布局容器”,“布局容器”主要的作用是把当前容器内的一些内容分成了等比例的结构。点击“布局容器”,在“布局容器”的右侧可以看到个“列比例”,它将整个容器分成了6:6:6:6:6:6的结构。


实际上我们在前端设计的时候,把我们这一个页面的一行实际上是把它定义成了12个价格,就12格12个格子,然后我们将我们当前这一行如果设置为6:6的时候,它就会呈现一个左右等比的这样一个状态。

image.png

同样的布局容器下面会包含小的布局,里面会有一个“分组”,“分组”里面有“链接块”,它的作用是用于链接跳转,相当于限定的区域,当用户点击这个区域会跳转到链接块。“链接块”组建里面提供了一些图片和文本。图片对应的是图标,文本对应的是标题。

 

在今天的教程中,我们其实用到了多个报表组件。报表组件包括 基础、布局、筛选和图表四类组件,其中:“基础”和“布局”类组件可以在画布的数据筛选与呈现区域均可使用;“筛选”类组件只能在画布数据筛选区域使用;“图表”和“其他”类组件只能在画布数据呈现组件区域使用。

  • 布局容器:是一种有「布局」能力的容器,我们最常见的是线性顺序布局,即页面自上而下,依次排列。但实际页面设计与实现时,出了线性布局,常常还会遇到 相对布局、绝对布局、弹性布局等诉求。
  • 链接块:是一个容器类型组件,点击该容器内任意元素,都会触发跳转链接
  • 分组:一个官方推荐的区块管理器,用于将功能能力相似的模块,内聚在一个分组中。
  • 布局:是对已有的可视化组件的位置摆放控制,对应英语动词layout,表示了一种动作。
  • … …

在下一讲中,我们将针对企业疫情防控场景,教会大家从表单设计——首页布局——数据查看的全链路应用设计

>>>>第五讲详细步骤,点击收看视频版课程

欢迎钉钉扫码关注“宜搭”服务窗

了解更多宜搭产品培训、最新功能和客户案例

服务窗名片.png

目录
相关文章
|
BI
零起点入门系列教程⑥:如何用钉钉宜搭制定企业疫情防控数字化管理方案
【零起点入门系列教程】将会带给大家从业务视角出发由浅入深地学习用宜搭实现应用搭建。即便是没有任何代码基础的新手只要跟着系列课程,从0开始慢慢修炼,也能找到成功搭建应用的乐趣。今天第六讲,示例如何用钉钉宜搭搭建企业内部疫情防控管理方案。
2029 0
零起点入门系列教程⑥:如何用钉钉宜搭制定企业疫情防控数字化管理方案
|
编解码 运维 监控
4.1 钉钉宜搭大屏介绍|学习笔记
快速学习4.1 钉钉宜搭大屏介绍
1621 0
4.1 钉钉宜搭大屏介绍|学习笔记
|
存储 安全 数据可视化
走进钉钉宜搭|学习笔记(一)
快速学习走进钉钉宜搭
731 0
走进钉钉宜搭|学习笔记(一)
|
4天前
|
JavaScript
基于钉钉的宜搭创建付款流程
基于钉钉的宜搭创建付款流程
14 0
|
4天前
|
JavaScript 数据可视化 前端开发
钉钉宜搭通过js触发子表单数据联动
钉钉宜搭通过js触发子表单数据联动
|
4天前
宜搭直接链接跳转至特定人员钉钉的聊天窗口
宜搭直接链接跳转至特定人员钉钉的聊天窗口
|
4天前
在钉钉宜搭中,要实现单选关联选项设置与图文展示的关联
在钉钉宜搭中,要实现单选关联选项设置与图文展示的关联
147 7
|
10月前
|
数据可视化
钉钉宜搭线上训练营开营啦!
还在独自摸索低代码苦于没有专业人员指导学习吗? 还在烦恼如何将业务场景搬到钉钉宜搭提高效率么? 集成&自动化、连接器、酷应用、数据大屏这些炫酷能力你会用么?
383 0
|
8月前
|
存储 BI
钉钉宜搭报表中,要返回最大值对应的字段
钉钉宜搭报表中,要返回最大值对应的字段
213 1

相关产品