honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

documentation

This commit is contained in:
petkir 2020-06-30 14:34:40 +02:00
parent eba25acb32
commit 0cdd47efc4
2 changed files with 94 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
samples/react-kanban-board/src/kanban/KanbanComponent.tsx
View File

@ -400,7 +400,6 @@ const hasprocessIndicator = buckets.filter((b)=> b.showPercentageHeadline).lengt
private getItems = () => { private getItems = () => {
if (this.props.allowAdd) { if (this.props.allowAdd) {
//TODO
return [ return [
{ {
key: 'newItem', key: 'newItem',

128
samples/react-kanban-board/src/kanban/Readme.md
View File

@ -65,70 +65,130 @@ Task
The KanbanBoard control can be configured with the following properties: The KanbanBoard control can be configured with the following properties:
### IKanbanBucket ### IKanbanBucket
| Property | Type | Required | Description | Default | | Property | Type | Required | Description | Default |
| ---- | ---- | ---- | ---- | ---- | | ------------------ | ------ | -------- | ------------------------------------------------ | ----------------------- |
|bucket|string|*|internalname|| | bucket | string | * | internalname | |
|bucketheadline|string||Optional Headline|name of property bucket| | bucketheadline | string | | Optional Headline | name of property bucket |
|percentageComplete| number||Percentage of Bucket shows in bar under Headline| | percentageComplete | number | | Percentage of Bucket shows in bar under Headline |
|color|string|||| | color | string | | | |
### IKanbanTask ### IKanbanTask
| Property | Type | Required | Description | Default | | Property | Type | Required | Description | Default |
| ---- | ---- | ---- | ---- | ---- | | ----------------- | ----------------------- | -------- | ----------- | ------- |
| taskId | string | * | | | | taskId | string | * | | |
| title | string | * | | | | title | string | * | | |
| assignedTo | IPersonaProps | | | | | assignedTo | IPersonaProps | | | |
| htmlDescription | string | | | | | htmlDescription | string | | | |
| priority | string | | | | | priority | string | | | |
| bucket | string | * | | | | bucket | string | * | | |
| mamagedProperties | IKanbanTaskManagedProps | | | | | mamagedProperties | IKanbanTaskManagedProps | | | |
### IKanbanComponentProps ### IKanbanComponentProps
| Property | Type | Required | Description | Default | | Property | Type | Required | Description | Default |
| ---- | ---- | ---- | ---- | ---- | | -------------- | ------------------------ | -------- | ----------- | ------- |
| buckets | IKanbanBucket[] | * | | |
| tasks | IKanbanTask[] | * | | |
| tasksettings | IKanbanBoardTaskSettings | * | | |
| taskactions | IKanbanBoardTaskActions | * | | |
| showCommandbar | boolean | | | false |
| renderers | IKanbanBoardRenderers | | | |
| allowAdd? | boolean | | | false |
#### IKanbanBoardTaskSettings #### IKanbanBoardTaskSettings
| Property | Type | Required | Description | Default | | Property | Type | Required | Description | Default |
| ---- | ---- | ---- | ---- | ---- | | --------------------- | ------- | -------- | ----------- | ------- |
| showPriority | boolean | * | | |
| showAssignedTo | boolean | * | | |
| showTaskDetailsButton | boolean | * | | |
#### IKanbanBoardTaskActions #### IKanbanBoardTaskActions
| Property | Type | Required | Description | Default | | Property | Type | Required | Description | Default |
| ---- | ---- | ---- | ---- | ---- | | --------------- | ----------------------------------------------------------------------------------- | -------- | ----------- | ------- |
| toggleCompleted | (taskId: string) => void | | | |
| allowMove | taskId: string, prevBucket: IKanbanBucket, targetBucket: IKanbanBucket) => boolean | | | |
| moved | (taskId: string, targetBucket: IKanbanBucket) => void; | | | |
#### IKanbanBoardRenderers #### IKanbanBoardRenderers
| Property | Type | Required | Description | Default | | Property | Type | Required | Description | Default |
| ---- | ---- | ---- | ---- | ---- | | --------------- | ------------------------------------- | -------- | ----------- | ------- |
| task? | (task:IKanbanTask) => JSX.Element | | | |
| bucketHeadline? | (bucket:IKanbanBucket) => JSX.Element | | | |
| taskDetail? | (task:IKanbanTask) => JSX.Element | | |
#### IKanbanTaskManagedProps #### IKanbanTaskManagedProps
| Property | Type | Required | Description | Default | | Property | Type | Required | Description | Default |
| ---- | ---- | ---- | ---- | ---- | | ----------- | --------------------------------------------------------------------------------- | -------- | ----------- | ------- |
| name | string | * | | |
| displayName | string | | | |
| type: | KanbanTaskMamagedPropertyType | * | | |
| value | string /number/ IPersonaProps/ IPersonaProps[] / any | * | | |
| renderer | (name: string, value: object, type: KanbanTaskMamagedPropertyType) => JSX.Element | | | |
IPersonaProps reference to Office UI Fabric IPersonaProps reference to Office UI Fabric
#### KanbanTaskMamagedPropertyType
| Type | Value | Description |
| ------- | ----- | ------------------------------------------- |
| string | 1 | value |
| number | 2 | value |
| percent | 3 | value * 100 % |
| html | 4 | value with html string |
| person | 5 | Office Ui Persona (value:IPersonaProps) |
| persons | 6 | Office Ui Persona's (value:IPersonaProps[]) |
| complex | 7 | JSON.stringify(value) |
}
## Samples ## Samples
### Custom Detail View Renderer ### Custom Detail View Renderer
```typescript
```typescript
renderers.taskDetail?: (task:IKanbanTask) => JSX.Element ;
```
```typescript
renderers.taskDetail?: (task:IKanbanTask) => JSX.Element ;
private _taskDetailRenderer(task:IKanbanTask): JSX.Element {
return (<div>My Cool Content!!!</div>)
}
``` ```
### Use SharePoint New and Edit Form ### Use SharePoint New and Edit Form
this is the Classic Form on the ListItems
´´´typescript
taskactions.taskEdit?: (task: IKanbanTask) => void ;
taskactions.taskAdd?: (bucket?: IKanbanBucket) => void ;
´´´
Open in Dialog (Iframe) or new Tab (NewForm.aspx od EditForm.aspx) or make your custom Form
```typescript ```typescript
private _taskAdd(bucket?: IKanbanBucket): void {
window.open(this.listurl+'/NewForm.aspx)
}
private _taskEditd(task: IKanbanTask): void {
window.open(this.listurl+'/EditFrom.aspx?ID='+task.taskId')
}
``` ```
### Use EditSchema to Configure New and Edit Form in this Component
this functionality supports only some Field Types
```typescript
### Disallow Move from One Bucket to an Other (allowMove)
´´´typescript
taskactions.allowMove: (taskId: string, prevBucket: IKanbanBucket, targetBucket: IKanbanBucket) => boolean;
``` ```
### Disallow Move from One Bucket to an Other
this functionality supports only some Field Types
```typescript ```typescript
private _allowMove(taskId: string, prevBucket: IKanbanBucket, targetBucket: IKanbanBucket): boolean {
if (prevBucket.bucket === 'Test2' && targetBucket.bucket === 'Test3') {
return false;
}
return true;
}
``` ```
## Leanings ## Leanings