待办事项案例

介绍

主页，顶部包括一个查找框，能够依据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:///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特点进行赋值即可：