随着移动互联的飞速发展,手机成为人们工作、生活中必不可少的工具,移动数据分析也被越来越多的企业所重视。无论是一线人员还是企业管理者,都可以通过手机了解业务情况。它具有实时性、准确性、便携性等特点,打破时间与空间限制,让企业信息传递更加快速,助力企业经营决策
然而在开发移动端模板的过程中,由于屏幕的限制和对交互性能的高要求,开发出来的模板总是感觉哪里差了点什么,不够精致,一改再改,最终效果却还是差强人意。
追求”炫酷“的效果一定离不开时间的打磨吗?如何在保证模板开发效率的同时,让模板呈现更加精致美观呢?
为了帮助大家提高移动端模板开发效率,快速打造精美的移动端报表,此次移动端报表更新了6大新功能,让移动端报表更加实用、美观。
![22a169778588ff5bfcaa6fc506345f72.png](https://i-blog.csdnimg.cn/blog_migrate/dbf31ef4a591a724bb84aed095975360.jpeg)
NO.1移动端弹窗
移动端“寸土寸金”,要求我们在模板开发时合理利用每一处空间。超链接可以帮助我们在移动端展示更加丰富的内容,同时却也会让我们徘徊在模板间的跳转和返回之间,为了提高移动模板的层次感和空间利用率,小编给大家带来了一个新插件:移动端弹窗
不仅可以通过弹窗的方式直接查看子模版内容(无需页面跳转),而且也可以使用纯文本加入一些注释性内容,直接上图
这个报表也可以直接让管理层在手机上管理500家门店,6000名员工,真正做到了全局管理。
![0d343356a551d5e4daa8db2a9cb911fd.png](https://i-blog.csdnimg.cn/blog_migrate/65c7a3646421afba41bd0629e86089d8.jpeg)
![8cb0d11e0e9e7ccb111bb2afb0d89f1b.png](https://i-blog.csdnimg.cn/blog_migrate/c6de625dfc5d3614a966f131e015a6b1.jpeg)
点击门店出现门店详情弹窗
![a63e110bc0c596501552582584c0d617.png](https://i-blog.csdnimg.cn/blog_migrate/5f846aee3c4fbfe5e5b333e647202444.jpeg)
自定义注释文本
下面重点来了!
这样的效果怎么做?首先需要下载插件移动端弹窗,然后,打开超级链接>添加链接>移动端弹窗,可以添加模板/本文,弹窗的边框、背景和大小皆可自定义设置
![9d6a073970c6ebbbf683df75dd3f5a87.png](https://i-blog.csdnimg.cn/blog_migrate/61c966fabc8dab5b6b5395b3d7e8bf15.jpeg)
NO.2展开与折叠样式
如何在移动端展示多行数据?门店销售分析、员工业绩排行等动辄几十行的数据放在移动端可能就变成了传统报表,满屏幕数据抓不到重点,除此之外美观也大打折扣。
用上全新上线的移动端展开折叠样式,重点展示头部数据,核心内容精简清晰,一键展开查看更多数据,数据要怎么查看你说了算
![e10d0d9e568b761dd4bf46030e4504cf.png](https://i-blog.csdnimg.cn/blog_migrate/a7460a0a829ca9a400a73e4192864651.jpeg)
![82923bed0111c18bce15dd70f24d661f.png](https://i-blog.csdnimg.cn/blog_migrate/6c0a916a013b5d16de78dd2bf4b6b7ef.jpeg)
![8f4062f0787aea270e76b85af92afcfe.gif](https://i-blog.csdnimg.cn/blog_migrate/070b783e65faf1400c54c7841109c046.gif)
实现方式:
1.首先拖入报表块/图表块,这里以报表块为例,拖入字段,进行字体大小样式的调整,不再过多赘述
2.点击报表块>移动端>展开收起>自定义,可以设置收起行及文字提示内容
PS:报表块必须设置标题才可实现此效果
![1d16ba6df8115e7de712429a29ae41d9.png](https://i-blog.csdnimg.cn/blog_migrate/540f63e8a0dd71afabb65a81dd2077f5.jpeg)
![d0ac680fe08ba225b863d47a32f8518f.png](https://i-blog.csdnimg.cn/blog_migrate/f380f31d3d979e0f7fd75532dd7ff9c1.jpeg)
NO.3侧边导航
当移动端展示内容较多时,仅能通过下拉才能查看多屏页面,内容冗长,也没办法快速查看某一板块。数据展示太多,毫无重点,没有价值
本次带来「移动导航栏」,右侧可自定义编辑导航样式,快速定位到报表指定位置,交互体验极佳
![974183621468efad7b17ced342bf2c27.gif](https://i-blog.csdnimg.cn/blog_migrate/39cf0d64fb34f93737ee4860f6b5c475.gif)
实现方式:
1.给报表块/图表块设置导航名称,便于定位。点击报表块>移动端,勾选使用导航,设置导航名称
![43676db785ac590cb31cc31571981f30.png](https://i-blog.csdnimg.cn/blog_migrate/5f927aeef9030e1523b892b50725f649.jpeg)
2.点击body>移动端>导航样式>侧边导航,自定义设置背景颜色、字体等
![36d2f760885b0f263f4c46a18d39bd71.png](https://i-blog.csdnimg.cn/blog_migrate/c468ccfcf5d8cf2d1a937bf7b5d46cd2.jpeg)
NO.4全新控件
门店销售分析、员工日报、财务情况等诸多场景中,日期和下拉框都是必不可少的查询维度,控件的组合使用也是实际业务中常见的场景。如何让控件和模板的配色协调、搭配合理?
本次上线「移动端简约日期样式」和「移动端简约下拉样式」插件,日期控件和下拉框控件设置自定义,边框、背景、图标等,想什么配置就怎么配置,整张模板的视觉效果完全由你说了算!
实现方式:
选择日期控件,打开移动端>样式模板,选择简约日期样式,进行任意配置
![930a426fe10500ac9910ae9020a7aca2.png](https://i-blog.csdnimg.cn/blog_migrate/7f635ae3795a52ed97185956f5bce2bb.jpeg)
效果演示:
1.日期区间的查询模板,所见即所得
2.下拉框与日期控件的组合,多维度查看数据
![e9d2fd21d0095ac7cdecddf5d1c28492.png](https://i-blog.csdnimg.cn/blog_migrate/6e02a582728654dfc0131012017bfa65.jpeg)
![84a922bcefbc68013b6eb3a4f54e735b.png](https://i-blog.csdnimg.cn/blog_migrate/58bc627ee6dca7ed7e860573f49a54c1.jpeg)
下拉框+日期,与模板协调统一
NO.5 H5填报
官宣,H5支持填报了,再也不用担心cpt模板仅能在app上使用了,摒弃纸质化流程,移动终端操作,一键填报,快速提升工作效率。
大家心心念念的功能,小编就直接上效果图了,XX公司可直接通过钉钉收集信息,员工每日健康打卡的移动端填报模板:
![2c183fa85d8c17ad3af5b9026f553801.png](https://i-blog.csdnimg.cn/blog_migrate/bc2885255c99848d545d557ed4e8ae08.jpeg)
NO.6联排TAB样式
tab在移动端报表中应用非常多,除上菜单、下菜单和滑动式外,本次更新了联排tab样式,丰富tab样式
![f6b7ecd00a35b2110a5d99535d665190.png](https://i-blog.csdnimg.cn/blog_migrate/8e8afb3256d2fc35bd4efe67038b64d5.jpeg)
效果展示:
![d2a9002166af49d91dae70010feb4858.png](https://i-blog.csdnimg.cn/blog_migrate/a819d08863ef29c0a551745906116a03.jpeg)
NO.7其他
- 钉钉集成后同时支持PC端,单点登录后显示PC端效果
- H5首页支持底部切换
- 自定义填报控件图标支持自定义是否显示