未加星标

Flowable's REST API - Part 3

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2019 | 作者 红领巾 ] 0人收藏点击收藏

In a previouspost, I wrote about using Angular, Angular Material and Flowable's REST API to create a bespoke Task List component:


Flowable's REST API - Part 3

In this post, we'll use Angular, Angular Material and Flowable's REST API to create a bespoke Task component:


Flowable's REST API - Part 3
Master/Detail Components

At the moment, we have a Task List component that displays a list of tasks. When a user clicks a task in the tasks list, we also want to display the selected task's details.

Keeping all your features in one component is never a good idea so we'll create a new component responsible for displaying the selected task's details.

Task Component

Use the Angular CLI to generate the Task component in the flowable library:

ng generate component components/task --project=flowable --skip-import Write the template <div *ngIf="task" class="task-header"> <div class="task-header-content"> <h2> {{ task.name }} </h2> <button mat-raised-button color="accent" [disabled]="!isValid()" (click)="onComplete()"> {{ completeButton }} </button> </div> </div> <div *ngIf="taskFormGroup" class="task-content"> <dynamic-form autocomplete="off" [className]="'crm-nested-grid-container'" [formGroup]="taskFormGroup" [model]="taskModel"> </dynamic-form> </div> Add the @Input() task property

The Task component template binds to the component's task property. The task property is an Input property, annotated with the @Input() decorator:

import { TaskModel } from '../../models/task-list.model'; ... export class TaskComponent implements OnInit, OnChanges, OnDestroy { @Input() task: TaskModel; ... } Update the Task List component template

The Task component selector is 'flow-task'. Add a <flow-task> element near the bottom of the Task List component template:

<div class="crm-task-list-container"> <mat-nav-list> ... </mat-nav-list> </div> <div class="crm-task-container"> <flow-task [task]="selectedItem"> </flow-task> </div>

And bind the TaskListComponent.selectedItem to the element's task property.

Now when you select a task the task's details will be displayed:


Flowable's REST API - Part 3
Source Code: GitHub: Serendipity GitHub: Serendipity - Flowable library GitHub: Serendipity - Dynamic Forms library References: Angular docs: Master/Detail Components

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Flowable's REST API - Part 3
本站链接:https://www.codesec.net/view/628012.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(26)