待办事项案例

介绍

首页，顶部包含一个搜索框，可以根据Detail、Kind来进行模糊搜索，中间是一个
ButtonGroup组成的时间日期筛选按钮，分别为当天、本周、本月，最后是一个添加Task的按钮，
点击可以跳转到New Todo详情页面

该页面信息的填写包含任务的种类、需要完成的日期、任务详情、任务的状态

数据：

搭建（新增需求）过程

需求

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

issue：遇到的问题，聚合、参数、方法都是在同一个Scope内的，一旦拆分，访问范围就会被限制


   分析：状态数量展示List和PieChar数据是一样的，可以放在同一个Block中

根据现有部件添加animate效果

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

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

时间日期方法的使用：

   DayOfWeek(CurrDate()):返回的是0~6之间的一个数，根据当天的日期判断星期几
-    0：星期日 
-    1：星期一
-    2：星期二
-    3：星期三
-    4：星期四
-    5：星期五
-    6：星期六

CurrentDate：  
2023-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的创建、状态的修改进行记录

效果图：

首先需要搞清楚需要哪些数据，以及数据之间的关系

操作：新增一个实体(注意数据关系)

将该部分封装成Block

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

在Detail页面引用ChangeLog Block，并对Task的State的修改做事件处理

还有一个问题需要考虑，我们在Todo页面的TaskList上也可以修改Task的State，所以需要在Todo页面点击CheckBox的时候调用ChangeLog方法

新增一个Task删除按钮（增加一个删除提示框）

   这个很简单，在checkBox 旁边加个Button然后点击事件的flowe里调用Todo的Delete方法，但是在删除数据时遇到了删除失败的问题，对旧数据可以删除成功，对于新增的数据删除报错（也就是新增TodoChangelog实体后）：

原因是数据关系发生了改变，经过检查，是跟Todo实体相关的数据TodoChangelog实体的TodoId属性的Delete Rule是Protect，所有会delete失败，将该属性改为Delete

提示框设计：

将Screen以PDF的格式进行下载（可以分别下载Today、ThisWeek、ThisMonth的Task页面）

步骤：

1.安装forge【Ultimate PDF】，在本项目中导入依赖项，关于【Ultimate PDF】的使用，可以在另一篇文章

查看（https://juejin.cn/post/7217795738692042789）

2.在Todo页面添加Download按钮，事件流如下：
    

这样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来实现的，具体如下：

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

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

第二步

将PDF的URL修改成对应的

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

经过测试，已经可以成功下载每个日期下的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，并设计邮件内容

然后再Server Action 新建一个SendEmail的方法，以及输入参数邮箱地址、附件，为附件添加属性

在Todo页面，设计SendEmail事件，将PDF附件传递给SendEmail，操作如下：

开发已经实现，但是还差一步，需要在Service Center中配置邮箱，可以使用的邮箱代发官网如下：
(mailtrap.io)
进入官网注册，注册完成后进入Inboxes->My Inbox,点击Show Credentials,会显示相关的配置信息，

在Server Center 中进行相关信息的配置，然偶save and apply

发送成功：

也可以在Serve Center中检测到email发送记录：

新增用户注册功能

待办事项添加一个优先级属性，并在Table 中以不同的效果展示出来

新增一个Priority静态实体，并新增一个Color属性，为每条Records分配特定的颜色，然后与Todo实体建立数据关系，1-to-many，具体如下：

然后在Todo Table中新增一列为Priority，添加一个Tag进行包裹，对Tag的Color属性进行赋值即可：