待办事项案例

介绍

主页,顶部包括一个查找框,能够依据Detail、Kind来进行含糊查找,中心是一个
ButtonGroup组成的时刻日期筛选按钮,别离为当天、本周、本月,最后是一个增加Task的按钮,
点击能够跳转到New Todo概况页面

TodoList案例

该页面信息的填写包括使命的种类、需求完成的日期、使命概况、使命的状况

TodoList案例

数据:

TodoList案例

TodoList案例

搭建(新增需求)进程

需求

把Home页面的部分部件进行模块化(封装成独立的Block)

TodoList案例

issue:遇到的问题,聚合、参数、办法都是在同一个Scope内的,一旦拆分,访问规模就会被约束
   剖析:状况数量展现List和PieChar数据是相同的,能够放在同一个Block中

TodoList案例

TodoList案例

依据现有部件增加animate效果

TodoList案例

新增时刻日期的筛选分为天、周、月

   新增一个静态实体,包括Day、Week、Month,在主页Action增加一个ButtonGroup对应实体数据,在TodoList页面新增局部变量,新增Server Action 对时刻做处理,在MyTaskList中的OnParametsChange事情中调用

TodoList案例

时刻日期办法的运用:

   DayOfWeek(CurrDate()):回来的是0~6之间的一个数,依据当天的日期判别星期几
-    0:周日 
-    1:星期一
-    2:星期二
-    3:星期三
-    4:周四
-    5:星期五
-    6:星期六

TodoList案例

CurrentDate2023-04-21
AddDays(CurrDate(),1):  
2023-04-22 00:00:00
AddDays(CurrDate(),-1):  
2023-04-20 00:00:00  
AddDays(CurrDate(), -DayOfWeek(CurrDate())):  
2023-04-16 00:00:00
AddDays(CurrDate(), (7 - DayOfWeek(CurrDate()))):  
2023-04-23 00:00:00
NewDate(Year(CurrDate()),Month(CurrDate()),1):  
2023-04-01
AddMonths(NewDate(Year(CurrDate()),Month(CurrDate()),1),1)  
:  
2023-05-01 00:00:00
AddDays(CurrDate(), 1-DayOfWeek(CurrDate())):  
2023-04-17 00:00:00

增加一个时刻线部件,在概况页面临Task的创建、状况的修正进行记载

效果图:

TodoList案例

首先需求搞清楚需求哪些数据,以及数据之间的联系

操作:新增一个实体(注意数据联系)

TodoList案例

将该部分封装成Block

TodoList案例

关于Changelog,封装了一个Server Action,该办法需求传入更新后的TodoId,获取Todo里最新的数据,
然后新建一个存储Changelog数据的局部变量TodoChangelog,Assign后再作为Sourse输入参数调用CreateOrUpdateTodoChange_log办法对数据进行修正

TodoList案例

在Detail页面引用ChangeLog Block,并对Task的State的修正做事情处理

TodoList案例

还有一个问题需求考虑,咱们在Todo页面的TaskList上也能够修正Task的State,所以需求在Todo页面点击CheckBox的时分调用ChangeLog办法

TodoList案例

新增一个Task删去按钮(增加一个删去提示框)

   这个很简略,在checkBox 旁边加个Button然后点击事情的flowe里调用Todo的Delete办法,可是在删去数据时遇到了删去失利的问题,对旧数据能够删去成功,对于新增的数据删去报错(也就是新增TodoChangelog实体后):

TodoList案例

原因是数据联系产生了改动,经过检查,是跟Todo实体相关的数据TodoChangelog实体的TodoId特点的Delete Rule是Protect,一切会delete失利,将该特点改为Delete

TodoList案例

提示框规划:

TodoList案例

将Screen以PDF的格局进行下载(能够别离下载Today、ThisWeek、ThisMonth的Task页面)

步骤:
1.安装forge【Ultimate PDF】,在本项目中导入依靠项,关于【Ultimate PDF】的运用,能够在另一篇文章

检查(https:///post/7217795738692042789)

2.在Todo页面增加Download按钮,事情流如下:

TodoList案例

这样PDF下载的功用就完成了,能够成功下载,可是现在只能下载Today下的使命列表页面,咱们需求完成三种日期都能够下载的功用
剖析:从后往前推,PDF是依据页面的URL来下载的,所以咱们需求别离给三种日期不同的URL,我的想法
第一步:是在每个URL后面增加他们对应的FilterByPeriod,也就是在日期ButtonGrop的参数改动时对应的修正当时的URL
第二步:在点击Download按钮事情流中将对应的URL传给PDF
详细步骤:
第一步
如安在日期ButtonGrop的参数(FilterByPeriod)改动时修正对应的URL?
因为FilterByPeriod是MyTaskList Block 的的输入参数,Task list也是因此而更新的,
所以能够依据MyTaskList Block 的FilterByPeriod改动触发OnParametersChange事情
,在该事情流中做URL的处理就行了,我这里运用JS来完成的,详细如下:

TodoList案例

TodoList案例

GetBookmarkableURL函数:数据类型文本 回来当时正在处理的屏幕的URL。 这个函数回来的URL是一个完好的URL,格局为http://server/module/personal_area/screen?param1=value&param2=value… 当参数是可选的且未设置其值时,不包括参数及其值。

例子: GetBookmarkableURL() = “myserverat.outsystemscloud.com/Customers/E…”

第二步
将PDF的URL修正成对应的

TodoList案例

基本完成,去操作一下,操作后发现虽然点击ButtonGroupURL产生了改动,*可是下载的页面都是Today页面的数据*,遇到这种情况,最好去**Debug**一下,检查URL的变化,发现PDF下载的URL总是同一个,并没有产生改动,问题就出来了,在第二步处理的URL并没有拿到最新的,详细操作如下:

TodoList案例

TodoList案例

经过测试,已经能够成功下载每个日期下的PDF了,可是又出现了新的问题,**下载后的PFD布局款式存在问题**
PDF布局款式问题解决办法:
在需求下载的页面新增一下CSS款式即可
@page {
    size: A3;
    margin: 0;
}
.cm.popup-dialog-body {
    max-height: 100% !important;
    overflow: initial;
}
@media all {
  .page-break {
    display: none;
  }
}
@media print {
  html, body {
    height: initial;
    overflow: initial !important;
    -webkit-print-color-adjust: exact;
    background: rgba(192,192,165,.2);
    background-color: #fff;
  }
}
@media print {
  .page-break {
    margin-top: 1rem;
    display: block;
    page-break-before: auto;
  }
}

测验在该demo中运用Sent Email功用(将本周的待办事项以PDF的格局发送到邮箱)

Send Email功用的简略完成

  首先在UI Flow内新建Email,并规划邮件内容

TodoList案例

然后再Server Action 新建一个SendEmail的办法,以及输入参数邮箱地址、附件,为附件增加特点

TodoList案例

在Todo页面,规划SendEmail事情,将PDF附件传递给SendEmail,操作如下:

TodoList案例

开发已经完成,可是还差一步,需求在Service Center中装备邮箱,能够运用的邮箱代发官网如下:
(mailtrap.io)
进入官网注册,注册完成后进入Inboxes->My Inbox,点击Show Credentials,会显现相关的装备信息,

TodoList案例

TodoList案例

Server Center 中进行相关信息的装备,然偶save and apply

TodoList案例

发送成功:

TodoList案例

也能够在Serve Center中检测到email发送记载:

TodoList案例

新增用户注册功用

TodoList案例

TodoList案例

待办事项增加一个优先级特点,并在Table 中以不同的效果展现出来

新增一个Priority静态实体,并新增一个Color特点,为每条Records分配特定的色彩,然后与Todo实体建立数据联系,1-to-many,详细如下:

TodoList案例

然后在Todo Table中新增一列为Priority,增加一个Tag进行包裹,对Tag的Color特点进行赋值即可:

TodoList案例