追記型のコメント機能を作る（承認コメントを残す機能）

はじめに

TIPS本投稿は1年ほど前に自社ブログで書いた内容のリライト版です。

よく承認操作のあるアプリを作成する場合には、コメント欄を用意して入力しその内容を履歴として保持しておきたいケースは多いと思います。
多段階の承認や複数人の承認の場合は追記して削除できないようにする機能です。
普通にフォームで複数行コントロールなどでコメント用の列を作ると、以前のコメントも変更や削除ができる状態となってしまいます。

今回の投稿ではフォームを調整して、以下のような「追記型のコメント欄」を作成する方法をお伝えしようと思います。

• 以前のコメントは変更・削除ができないようにする
• コメント時間、コメント者の情報を自動で入力する
• ついでに見た目も調整する

NOTESPOリスト上で直接編集もさせる場合は編集不可の制御は完全ではありませんが、
リストを見せない工夫をされアプリ上の編集メインとされる前提の実装となります。

完成イメージ

注意：SPOリストの複数行テキスト列の追記型はアプリでは使えない

NOTE今回データソースはSharePointリスト（以降SPOリスト）の複数行テキスト列で実装しています。
実はSPOの機能で複数行テキスト列には追記型にできる機能があります。
※列の作成時に「既存のテキストに変更を追加する」にチェックを入れて作成すればOK。併せてバージョン履歴機能をオンにしておく必要があります

追記型にすると通常の複数行とは異なる形式となり、ビュー上では「エントリの表示」となり、フォームを開くと以前のコメントが入力者と入力日時と合わせて表示され編集はできない状態になっています。

ただし、追記型にしたこの複数行テキスト列は、現時点ではPower Appsで作成するフォーム上では使えません。
正確にはフォームに追加はできますが、以前の内容は表示されず、最新の内容が出てくるだけになっているので実質使えないです。

NOTE追記型の複数行テキストにした場合は、SPOのデータの保持の形式が変わりバージョン履歴の機能も絡んでくるのでアプリ上ではうまく扱えないという感じです。

その他の対応としてAutomateでバージョン履歴から取ってきて再現する方法などがありますが、難易度は高めですしなかなかの労力がかかると思います。
上記のため、複数行の追記型にする機能は使わずに、アプリ上でカスタムして同等の機能を実装します。

実装

① SPOリストにコメント用の複数行テキスト列を作成

まず、SPOリストにコメント用の複数行列を作成します。
さきほどの追記型のものではなく通常の複数行列となります。サンプリアプリ用に以下の列を用意しました。

• タイトル：　（1行テキスト）
• 依頼内容：（複数行テキスト）　
• コメント（追記型）：（複数行テキスト）※今回の調整対象の列

② アプリを作成

今回はSPOリストから自動でモバイルレイアウトアプリを作成する方法で作りました。
※もちろんタブレットレイアウトでも問題ありません。

編集フォームは以下のように対応する入力コントロールが作られていますが、以前の内容を含めて編集できる状態なので上書きや削除も出来ますし、追記するには改行して一番上または一番下に承認者に書いてもらう必要があります。
また、誰がいつコメントしたのかも残っていないので、複数人が使うコメント欄としては使えません。

一旦は上記の状態から追記型のコメント欄にカスタムしていきます。

③ 閲覧用と追記用のコントロールを作る

概要は以下です。細かい部分は割愛しています。

1. コメント欄データカードのロックを解除（カスタムするため）
2. テキスト入力コントロールのモードを単一行から複数行に変更
3. コントロールをコピーし同じカード内に貼り付け　→履歴用
4. それぞれリネーム（任意）※サンプルでは「DataCardValueAddComment」（追記用）、コピーしたものを「DataCardValueComment」（履歴用）としています
5. データカードの高さを高くし履歴用のコントロールを上、追記用を下に配置

続けて、履歴用と追加用のコントロールを調整します。

1. 履歴用コントロールのDisplayModeをViewに変更
2. Fillを白→灰色とし閲覧用の見た目にする（任意）
3. 追記用コントロールのヒントテキストを設定する（任意）※コメントを入力してくださいの部分
4. 追記用コントロールのDefaultプロパティを空にする　※履歴用のDefaultはThisitem.コメント（追記型）になっている．

④ データカードのUpdateを調整

次にコメント欄のUpdateプロパティを以下のように調整します。

• 追記コメントが空の場合は履歴用の内容で更新する（実質変更なし）
• それ以外は、元の内容＋空行（改行2つ）＋ 現在時刻＋入力者情報 ＋改行＋追記コメントの内容で更新する
• 元の内容が空の場合は最初の空行（改行２つ）は入れないように調整する

CodeIf(IsBlank(DataCardValueAddComment.Text),
DataCardValueComment.Text,
Concatenate( DataCardValueComment.Text ,If(!IsBlank(DataCardValueComment.Text),Char(10)&Char(10)),
Text(Now(),”yyyy/mm/dd hh:mm”),”　”,User().FullName, Char(10),
DataCardValueAddComment.Text)
)

TIPS※追記分を上部に追記する、ユーザー名でなくメール情報を出したいなどの場合は、上記サンプルをベースに適宜調整ください。

動作を確認

プレビューで動作を確認すると、最初にコメントを入れた状態で編集で開くと追記欄は空になります。
コメントを入力して保存し、再度開くと履歴用コントロール側へ時間、更新者情報と合わせて追加したコメントが追記されます。
また、履歴用コントロールは閲覧モードにしているで以前のコメント部分は編集できないようになっています。

⑤ 表示非表示と位置の調整

この状態でも普通に機能しますが、既存コメントがない場合でも閲覧用コントロールが表示されるので、
既存コメントがない場合は履歴を非表示にして動的に位置を調整します。

１．履歴用コントロールのVisibleを変更する　
　　→既存コメントが空の場合は非表示にする

Code!IsBlank(Self.Text)

２．追記用コントロールのYを調整　
　　→履歴用が表示されている場合は20PX下に配置、表示されていない場合は同じ高さに配置

CodeIf(DataCardValueComment.Visible, DataCardValueComment.Y + DataCardValueComment.Height +20, DataCardValueComment.Y)

３．コメント欄データカードのHeightプロパティは縮めておく　
　　→両方のコントロールが表示される場合は動的に広がってくれます。

そうすると以下のように既存コメントがない場合は履歴用コントロールは表示されなくなりスッキリします。

TIPSサンプルでは別画面で閲覧フォームが作成されており、もともと自動伸縮のラベル表示なので調整不要ですが、同一フォームで作成される場合はモードに応じた表示調整をいただければいい感じになると思います。

おわりに

今回は以前記載した追記型のコメント機能を実装する方法を一部リライトして投稿しました。
最近のアップデートで更新があれば反映する予定でしたが、特に状況変わらずだったのでほぼ内容は変わっておりません💦すいません。
人気のある記事だったので自社ブログへたどり着かない人向けに、こちらにも出しておこうと思いリライトしました。

その他の方法として、（しっかりやろうとすると）この部分を別リストで複数レコード保持しメインリストと紐づけて表示するなどのカスタムも可能ではありますが、データ量やメンテナンスなど考えるとあまりやりたくない内容だと思います。
シンプルかつ機能的に実装するには本投稿の実装はよい感じかと思います。それでは。