カンバンボード

KanbanBoardはテーブルの記録をレーン内のカードとして並べて表示し、各列の値(機会の評価、タスクのステータス理由、レコードが属するアカウント)ごとに1レーンずつ表示します。各レーンはビューを通じてページ単位で読み上げられ、グリッドと同じクエリとセキュリティで、ヘッダーにカウントと合計が表示されます。Editableボードでは、カードをキーボードからドラッグするか「移動」メニューを通って別のレーンに移動し、その移動は即座に保存されます。ランク列ではカードも手で並べて並べられます。カードはFluent UIテーマで描かれます。

レーン

LaneColumn (React: laneColumn)レーンが出るビューテーブルの列名を付けます。選択肢は各選択肢にレーン、各理由ごとにステータス理由、2つの値それぞれにYes/No列1、名前を付けたレコードごとにルックアップ列、そして下記の Date lanes が説明する通り、レーンが落ちた日の日付を示します。他の列はボードの代わりにメッセージを表示します。レーンはDataverseの順序に従い、隠されたオプションを省き、オプションの色はレーン名の横に点で表示されます。レコードが空にしておけば、最後のレーン( 値なし)が加わります。

Lanes (React: lanes)どのレーンをどの順序で表示するかをキーで選びます。オプションの値、 1 と 0 はYesとNo、レコードのid、または値のないレーンの空キーです。ルックアップのレーンは、ビューのカード名が1つのグループクエリで読み取られたレコードです。代わりに LookupLanes (React: lookupLanes)で名前を付けて、カードを含まないレーンにします。

カードのないレーンが表示されるので、カードをドロップできます。 ShowEmptyLanes (React: showEmptyLanes)を false に設定すると、その数が判明したら隠します。ユーザーはレーンの名前とカウントの狭い帯に折りたたまれ、ヘッダーのボタンでレーンを隠し、ツールバーの フィルター メニュー( 表示)からレーンを非表示できます。

デートレーン

日付列には、その日付が当たる日数が記載されており、ユーザーのタイムゾーンで日数を数え、週は言語の初日から始まり、ボードがレーンを読み上げるたびに再度計算されます。名前が出ていない場合は、 遅延、 今日、 明日、 今週 — 明後日から週末まで、週の終わり近くは空っぽです — 来週、 後 、 そして日付なしです。

DateLanes (React: dateLanes)代わりに、日付順にレーン名を付けます。プリセットは現在の日付からレーンを設定します: Yesterday、 Today 、 Tomorrow; LastWeek、 ThisWeek 、 NextWeek; LastMonth、 ThisMonth 、 NextMonth;カレンダーの四半期や年( ThisCalendarQuarter や NextCalendarYear、そして ThisFiscalQuarter や LastFiscalYearのようにDataverseが保持する組織の会計年度に続く)、 Overdueは今日より前; Earlier と Laterは、周囲のレーンの前後に該当するものを取る;そして NoDate。自分のレーンには、正確な日数や今日の期間から数えた日数が、それぞれ独自のタイトルで表示されています: Between、 Before 、 Starting (React: between、 before 、 starting)。プリセットも独自のタイトルを持っています。 Close Datesデモで試してみてください。

各カードは1つのレーンに着地します。なぜなら、レーンは前のレーンの終点より早くは始まらないからです。 ThisWeekの後に記載され、 ThisMonth はその月の残りを保持し、その前のレーンはすでにカバーされていると空でカードを取らない状態になります。「No lane」が保持している日付(正確な日の2レーンの間にある)は、そのカードを1レーンに置かないことを意味します。 Earlier から Later で終わるので、すべてのカードを保持します。

別の日付レーンに移動したカードは、そのレーンの初日が与えられます。時間帯は今日の後ろのレーンも保持され、過去の日付となります。そして日付なしに移動すると日付を失います。初日がない場合、例えば「オーバーデュー」や「最初の「より早い」レーン、空きレーンはカードを受け取りません。 DateLaneDrop (React: dateLaneDrop)を None に設定すると、レーン同士のカードは取られず、カードが落ちた時だけカードが表示されます。

DateLaneOrder (React: dateLaneOrder)日付レーンのカードを順番に並べます。 Rank(デフォルト)は、他のレーンと同様にランク順に並べます。レーン内で移動したカードだけがランクが変わります。 Date 代わりに日付順に並べ、ランク列はなしです。他のカードの下に落ちたカードはそのカードの1日を占用し、その時間が1日、上部に落ちたカードはレーンの初日を占拠します。同じ日のカードは時間の順に残ります。 Due Datesデモで試してみてください。

カウントと合計

各レーンのヘッダーには、所持カード数( 5,000+ 5,000以降の5,000枚)と、 LaneAggregates で指定された合計(React: laneAggregates):数字、金額、日付の列の合計、平均、最小または最大、または任意の列のカウントを、レーンのすべてのカード(ロード済みカードだけでなく)を示します。 LaneAggregateFormats (React: laneAggregateFormats)は各列の数字に C0 や N1などのフォーマットを与えます。これらはボードの開始時の合計です。 合計 ボタンはカードに表示される列から自分で選択でき、保存表示ではそれらを保持できます。ボードがセーブするたびにカウントと合計が読み上げられます。

車線制限

LaneLimits (React: laneLimits)キーごとにレーンに持つべきカード数を示します。制限レーンのヘッダーには、その制限に対するカウントが7 /5として表示され、カウントが通過した時点でマークされます。カウントはレーン内のすべてのカードのカウントで、ユーザーが検索またはフィルタリングしたものを対象にします。リミットは EnforceLaneLimits (React: enforceLaneLimits)が設定されていない限り警告します。その場合、フルレーンは他のレーンからカードを取らず、「 移動先」で提供されず、追加ボタンもありません。これはサーバーのルールではなくボードのルールです。インターセプターで記録を保存する方法すべてに制限を設けます。

カード

カードは、グリッドカードと同様にビューの最初の列をタイトルとして、他の列をタイトルの下に表示し、レーン欄とランク列は省略します。 CardImageColumn (React: cardImageColumn)はタイトルの横に画像列をアバターとして追加します。各レーンは一度に PageSize 枚(React: pageSize)カードを読み込み、デフォルトでは20枚、さらに下部に Load more を割り当てます。 設定から、ユーザーはカードに表示されるフィールド、レーンのカードの並べ替え方法、各レーンの読み込み数を変更できます。

CardTemplate(React: cardRenderer)で自分のやり方でカードを引きます。カードには各カードの記録とレーンが渡されます。Field、Label、DisplayValue(React: field、label、displayValue)はデフォルトのカードと同じ列を示し、OpenAsyncとMoveToAsync(React: openとmoveTo)はレコードを開きカードを動かします。CanOpenとCanMoveが許可している位置です。カードをクリックするとレコードが開き、移動メニューはコンテンツの横に表示されます。テンプレートに表示される列はビューのものでなければならず、ボードは各カードとともにそれらを読み取ります。

ボードのテーブルに記録登録ページがある場合(React: form)、ボードにFormがない場合(React: )、カードのタイトルがリンクされ、カードを開くとそこにリンクされます。ShowRecordLinks(React: showRecordLinks)はそのリンクをオフにします。それ以外は、カードをクリックすると中央のダイアログでレコードが開かれるか、FormLocationで表示された場合(React: formLocation)、左右のサイドパネルで開きます。フォームはKanbanDefaultForm — ボードのテーブルのビュー欄とレーン欄、それぞれそのタイプが取るエディタが含まれる — またはFormのあなたのエディターコンポーネント(React: form)です。レコードはレコードページが読み取るのと同じテーブルアクセスとカラムセキュリティを経て読み取り、Editableボード内でのみ変更可能です。

動くカード

Editableボード(React: editable)では、ユーザーはカードをキーボードからドラッグするか、カードの「移動先へ」メニューを通って別のレーンに移動します。カードは同時に動き、ボードは変更されたものを保存します。レーン列はステータスの理由だけで、サーバーがレコードの状態を移動させるためです。そしてカードのランクはボードにランクを保持します。セーブ失敗するとカードを元に戻し、その通りを示します。

カードはユーザーが変更できる場所でのみ移動します:記録、ポータルのテーブルアクセス、レーンカラムに書き込むこと。レーンは更新時に設定可能で、その列はセキュリティが保留しないものでなければなりません。カードを順番に並べるにはランク列にも書き込みが必要です。ユーザーが動かせないカードはそのままにされ、「移動」メニューはありません。

ステータス理由レーンはそれぞれの状態に従い、テーブルが許可する状態の変化に従い、サーバーはそれを AddStateTransitions に登録します( RecordContext参照)。オポチュニティ、ケース、クォート、オーダーはデフォルトでこれらを持ちます。カードはレコードが自分のレーンから到達できないレーンに取られず、「 移動する」 はそのレーンのみをリストアップします。アップデートによるステータス変更(機会の再開、ケースのキャンセルまたは再有効、見積もりの有効化、注文の提出)はユーザーに先に確認を求め、Dataverse独自のアクションで終了ダイアログが開きます。これは以下の 「クロージングレコード 」で説明されています。クローズ済み状態のカードは、それぞれ別の順序に置かれません。トランジションのないテーブルは自由に動きます。 完了 に移動されたタスクは完了し、再び開かれます。

カードの追加

Editableボードの各レーンのヘッダーには「追加」ボタンがあり、そのレーン内の新しいレコードをボードの形で開きます。ページのForm(React: form)またはKanbanDefaultFormです。この表示はテーブルのレコードを作成しレーン列を設定するユーザーにのみ表示され、閉じたレコードのレーンには表示されません。レコードが開かれている間に。保存されると、カードはレーンの上部に表示されます。AllowNew(React: allowNew)でカードを閉じます。フォームを開く前に新しいレコードに新しい値を付与するためにPrepareNewRecordを処理(React: prepareNewRecord)してください:レコード、すでにレーンの値、レーンが与えられます。ツールバーのボタンもカードを追加できます。KanbanBoardContext(React: canCreate newCard)の CanCreate と NewAsync は、レーンが新しいカードを取り、その形態を開くかどうかを示します — レーン名が指定されていない最初のカードを取る場合は。

閉鎖記録

ステータス理由のボードでは、Dataverseが独自のアクションで記録を閉じるレーンにカードが置かれると(機会の獲得・敗北、ケースの解決済み、見積もりの獲得または終了、注文の履行またはキャンセル)、ステータス理由、開始レーン、クローズが記録する内容、つまり獲得機会の実際の収益とクロージング日;失われた機会のクロージング日と、ユーザーが競合他社を選べる相手への閉鎖日;ケースの解決および請求可能な時間;見積もりや注文のクロージング日;そして説明。確認されると、Dataverse独自のメッセージ( WinOpportunity や CloseIncidentなど)でレコードが閉じられます;キャンセルされるとカードは戻ります。オープンレーンに引き戻されると、チャンスが再開され、ユーザーが確認するとケースが再有効化されます。 Pipelineデモで試してみてください。同じダイアログはレコードフォームの閉じボタンの後ろにあります。例えば WinOpportunityButton: RecordContextを参照してください。

クローズはレコードの状態の変化として判断されます。ユーザーはレコードおよびそのステータスカラムを変更し、名前を挙げた競合他社を指し示すことを許可されなければなりません。Dataverseはクローズをレコードの下に独自のアクティビティ(opportunityclose、 incidentresolution、 quoteclose、 orderclose)としてファイルし、あなたのテーブルアクセスを必要としません。ポータルのアプリケーションユーザーは、レコードのテーブルにAppendTo、アクティビティを作成・追加し、競合他社のAppendToの機会については Dataverse Connectionを参照。

カードの並べ方

RankColumn(React: rankColumn)を挙げると、ユーザーは各レーンのカードを手札ごとに順番に並べます。レーンはランク順に並べ替えられ、次にビューのソート順で並べられ、2枚の間に置かれたカードはそのカード間のランクが与えられます。通常、そのランクはドロップが書き込むだけです。ランクのないカードは最初にソートされ、カードがその間やそのすぐ下に置かれると順番にランク付けされます。2枚のカードの間にランクが空きがないレーンは、表示された順番で新たにランク付けされます。これらのランクは移動によって1回の取引で保存されます。5,000枚以上のカードがあるレーンは手で並べることができず、またユーザーが変更できないランクのカードを置くこともできません。ランク列がなければ、レーンはビューのソートに従い、カードは別のレーンにしか移動しません。

ランク列は盤面の小数点列で、その範囲はマイナス数を許容します。なぜなら、最初のランクより上に落ちたカードはその下にランク付けされるからです。その精度がレーンのランク付けの頻度を決めます。カードは100万個間隔で始まり、2つのハーフの間でそれぞれ落ちるスペースが広がるため、小数点10位の列は1か所で約50個のドロップを取ってから再びランク付けされ、20点あたりで1つが全く落ちません。

セーブは自分で動く

SaveChangeを操作して自分のペースで移動を保存する(React: onCardMove)。自分の手を動かすために、ユーザーに尋ねた後、自分のサービスを通じて、あるいは全く動かさないか。カードにはKanbanCardMove、カードのRecord、そのカードがToFromIndex、そこにあるとRank、ボードが書くUpdate、同じ取引に属するOtherUpdates(その後に書かれる他のカードのランク、または閉じられたレーンを出るカードの場合は、ステータスが再開された後のランク)が記されます。そして、レーンを閉じるレーンに落としたカードに対しては、ユーザーが確認したClose(React: close)を追って送ります。カードを落とした場所に残すためにtrueを返すか、元に戻すためにfalseします。ボードは保存しなかった手の後に何も読み戻さないので、ページはそのページだけに手を残すことができます。

キーボード、タッチスクリーンリーダー

動けるカードには...ボタンがあり、移動可能なレーンメニューがあり、キーボードからタッチやスクリーンリーダーで同様に動作します。カードはキーボードから直接移動することも可能です。フォーカスしてSpaceキーで拾い、矢印キーで別のレーンや別の場所に移動させ、再度スペースキーで移動させます。タッチスクリーンではカードがグリップで引きずられるため、指の下でレーンはスクロールします。スクリーンリーダーはカードの移動(レーンに移動した)と失敗した動きを聞こえます。

ツールバー

ツールバーはグリッド状に配置されており、左側にビューピッカー、または1つのビューだけの場合は Title (React: title)、右側には自分のコントロール、 合計、検索ボックス、 フィルター、 リフレッシュ 、 設定があります。コントロールは ToolbarItems (React:ボードの子)で追加します。クリックすると KanbanBoardButton がボードを渡されます:テーブル、表示されるビュー、順番通りのレーン、そしてすべてのレーンを読み返すための RefreshAsync (React: refresh)。

閲覧数、検索およびフィルター

ボードはViewの記録(Dataverseのものかページが定義したもの)を示し、そのテーブルはビューのものです。DefaultViewId(React: defaultViewId)はビューが開くビューで、ビューピッカーが提供する他のビュー(React: viewIds)は同じテーブルのものをViewIdsします。検索ボックスはグリッドの検索が行を探すようにカードを探します:検索列の値の先頭や、先頭の*の後からどこかです。カードが表示されている列を調べ、ツールチップで名前を付け、カード上のマッチにマークします。AllowSearchで終了します(React: allowSearch)。

AllowFiltering(React: allowFiltering)では、ツールバーのフィルターメニューに「編集フィルター」があり、グリッドのフィルターボタンがダイアログを開きます。このダイアログは、ユーザーが別のビューを選択するまでビューのフィルターの代わりになります。デフォルトではオフにされており、ユーザーはビューのすべてのフィルターを削除できます。

AllowSavedViews(React: allowSavedViews)では、サインインしたユーザーは自分の配置したボードを、フィルター付きのビュー、カードのフィールドとソート、レーンの合計、各レーンが読み込むカード、そしてレーンを閉じたまたは非表示の表示を自分のビューとして保存し、デフォルトのビューを選び、使わないものはフィルターメニューから非表示にできます。SavedViewsKeyがない場合(React: savedViewsKey)、ボードは自分のビューをグリッド、カレンダー、テーブルのボードと共有し、それぞれが独自のレイアウトを維持します。ビューの保存、変更、共有方法は「保存済みビュー」ページに記載されています。

ページはグリッドのビュー定義 CustomViewDefinitions (React: customViewDefinitions)を使ってコード内で独自のビューを定義できます。それらはピッカーで表示され、そこには表示されませんが、 ViewIds の隣で提供されており、 DefaultViewId 一つ名付けることができ、ボードだけでこれらを持てます。それぞれはユーザーのテーブルアクセス内で独自のFetchXMLで読み取り、ボードのレイアウトは次のように表示されます。 PageSize はレーンが読み込むカード、列の Hidden とカードフィールドの隠しやタイトル変更 DisplayLabel 、 Aggregates はレーンの合計です。リストを一度フィールドに構築すると、新しいリストがボードを再び起動します。

URL内の位置を保つこと

PersistedStateQueryParameter(React: persistedStateQueryParameter)でクエリパラメータを指定すると、ボードはビューを選択し、レーンはそこに閉じたままなので、リロードや共有リンクで元のまま開きます。本来開くはずの場所は除外されます。検索もまたIncludeSearchInPersistedStateで保持されます。ユーザーが検索する内容が機密になるため、デフォルトで除外されます。各変更はブラウザの履歴エントリを置き換え、両方のスタックは同じ値を書き込むため、一方でリンクが作られればもう一方で同じボードが開きます。

テーマ

ボードはFluent UI独自のコントロールとデザイントークンで描かれており、テーマ(明暗かアクセント色)に合わせ、レーンの点はDataverseからオプションの色を取っています。レーンは横並びに280ピクセル幅で、合わないと横スクロールします。スマホでは画面の大部分を占めてスナップで固定されます。 Height (React: height)はボードの高さ(ツールバー付き)を設定し、デフォルトで600ピクセルです。各レーンはその中のカードをスクロールします。リスタイリングには、ボード、レーン、カードごとにクラスが分かれており、 ppp-kanban、 ppp-kanban-lane、 ppp-kanban-lane-header 、 ppp-kanban-cardがあります。 Class と Style (React: className style)も独自のクラスを追加できます。