Qiita Engineer Festa20242024年7月17日まで開催中！

日本の伝統的な通達文書をPower Appsで作成する

PowerApps

Posted at 2024-07-01

はじめに

歴史の長い企業では、人事異動を中心に通達という香ばしいものをメールやPDFで配信する企業が多いのではないでしょうか。
伝統的な業務です。なかなか変えがたくなるハードルも生まれるでしょう。

大した手間も発生しないということから、業務課題に感じず、そのまま運用しているケースもあるのではないでしょうか？
「テンプレートの文章を編集し、一部の情報を置き換えるだけだから」といってそのままにしておくことも、あまり褒められたものではないでしょう。チリツモで負担は溜まっていきます。こういった細かな業務こそ、効率化はじめの一歩に適しているのでは？と思います。

今回は、Power Appsで通達文書を作成するアプリを考えてみました。

そもそもそのような運用やめようという観点はなしでお願いします

通達のイメージ

今回の通達文書は、人事異動をテーマにしたものです。具体的には、以下のような文章をイメージしています。

伝統的な企業ではよく見られる形式だと思います。

右上に発行日付
お決まりの左から始まる従業員各位
また右端に戻って会社名、部長名
書類の名前
メールのような挨拶文
表形式で旧部署と新部署が並ぶ

私の想像です。あくまで私の想像です。
~~こういった文書を一太郎で作成するまでがテンプレートだと思っています~~

Power Appsでのアプローチ

この通達文書を作成するために、Power Appsでは以下のような機能で対応を考えてみました。

DraftScreen
PreviewScreen
DraftScreen(入力画面)
- ScreenContainer1 - 垂直コンテナー
  - HeaderContainer1 - 水平コンテナー
    - Header1 - ヘッダーコントロール
  - BottomContainer1 - 水平コンテナー
    - SidebarContainer1 - 垂直コンテナー
      - galUser - 垂直ギャラリー
        
        Container1 - デザイン用のコンテナ
        
        imgUser 社員の画像
        
        lblName - 社員の名前
        
        lblDept - 社員の部署
        
        newDept - 移動先の入力
      - BadgeCanvas1 - バッジコントロールで映えを狙う
        Control: Badge
    - MainContainer1 - HTMLテキストの格納する垂直コンテナー
      - txtHTML - HTML テキストコントロール
      - btnSubmit - 画面遷移用のボタン
PreviewScreen:
Variant: printableLayout_A4Portrait_ver2.0
- PDFContainer - HTMLテキストを挿入するコネクタ、PDFのソース
  - PreviewHTML:
    Control: HTML テキストコントロール
- PrintContainer - 水平コンテナー
  - PDFTitle - 画面のタイトル
  - btnPDF - PDF保存用のボタン
  - LinkCanvas1 - 保存されたPDFを表示するリンク

機能の詳細

Office 365 Usersコネクタによって、社員情報をギャラリーコントロールで一覧にし、異動先部署を入力

ギャラリーコントロールのItemsプロパティには、Office 365 Usersコネクタでユーザー情報を表示しています。

関数は下記のようになります。

items

Office365ユーザー.SearchUserV2({isSearchTermRequired:false}).value

isSearchTermRequiredはtrueが既定です。
falseを設定しない場合、検索文字列がない限り表示されません。

ユーザーの写真は丸みを帯びたデザインにし、テキストラベルを並べるだけです。移動先の部署を入力するためにテキストインプットを配置します。

ギャラリーコントロールの値に応じた動的なHTML テキストの作成

肝になるのはメインコンテナーのHTML テキストコントロールです。HTML テキストコントロールは関数芸です。

HtmlText

$"<div style='text-align: right; margin-bottom: 20px;'>
    <p>{Today()}</p>
</div>
<div style='text-align: left; margin-bottom: 20px;'>
    <p>従業員各位</p>
</div>
<div style='text-align: right; margin-bottom: 20px;'>
    <p>出戻りコーポレーションホールディングス株式会社<br>人事部長　荒賀　翼</p>
</div>
<div style='text-align: center; margin-bottom: 20px;'>
    <h1 style='margin: 0; font-size: 24px;'>人事異動社内通知書</h1>
</div>
<div style='margin-bottom: 20px;'>
    <p>{Today()}付で下記の人事異動が発令されましたので、お知らせします。</p>
</div>
<table border='1' cellpadding='5' cellspacing='0' style='width: 100%; border-collapse: collapse; margin-bottom: 20px;'>
    <thead>
        <tr>
            <th style='text-align: left; padding: 8px;'>氏名</th>
            <th style='text-align: left; padding: 8px;'>新部署</th>
            <th style='text-align: left; padding: 8px;'>旧部署</th>
        </tr>
    </thead>
    <tbody>
        {Concat(
    Filter(
        ForAll(
            galUser.AllItems,
            {
                氏名: DisplayName,
                旧部署: Department,
                新部署: ThisRecord.newDept.Value
            }
        ),
        !IsBlank(新部署)
    ),
    $"<tr><td style='padding: 8px;'>{氏名}</td><td style='padding: 8px;'>{新部署}</td><td style='padding: 8px;'>{旧部署}</td></tr>"
)}
    </tbody>
</table>"

データソースの評価は、下記の部分ですね。

Filter(
    ForAll(
        galUser.AllItems,
        {
            氏名: DisplayName,
            旧部署: Department,
            新部署: ThisRecord.newDept.Value
        }
    ),
    !IsBlank(新部署)
)

ForAll 関数を使ってギャラリーAllItemsプロパティからHTML テキストコントロールの値を設定します。

これによって動的にギャラリーコントロールの入力情報から文書が作成されるロジックです。

こちらにFilter 関数を使って入力されている人だけ反映されるようにしています。

テキストインプットを使っているため、IsBlank 関数による空白か否かの判定ロジックを設定していますが、チェックボックスのコントロールで判定する方法が個人的には好きです。

動的なHTMLテーブルの作成について過去に書いていますので、ぜひご覧ください。

PDFの発行

次にPDF 関数を使ってファイルのバイナリを取得し、Power Automateを使ってSharePointにアップロードします。

PDF関数は試験段階の機能です

Power Automateは下記のとおりです

ファイルの作成
- Power Appsからファイル名を設定 - @{triggerBody()?['file']?['name']}
- PDF関数の戻り値を渡す - @{triggerBody()?['file']?['contentBytes']}

アップロード先のリンクURLをPower Appsに戻し、印刷画面を用意することで便利に作成できます。

OnSelect

UpdateContext(
    {
        pdfLink: PowerAppsPDFCreate.Run(
            {
                name: Text(
                    Now(),
                    "yyyymmdd_hhmmss" // ファイル名を現在日時で設定
                ) & ".pdf",
                contentBytes: PDF(PDFContainer)
            }
        )
    }
);

実際に入力してみると、文字の動的な変更が確認できます。

固定的な文字を増やす

荒業ですが、固定的な文章も入力に応じて増やせます。
下記は入力された項目に応じて

【対象社員】{氏名}
【旧部署】{旧部署}
【新部署】{新部署}

のフォーマットで情報が表示されています。

関数はコチラ！

Text

Concat(
    Filter(
        ForAll(
            galUser.AllItems,
            {
                氏名: DisplayName,
                旧部署: Department,
                新部署: ThisRecord.newDept.Value
            }
        ),
        !IsBlank(新部署)
    ),
    $"【対象社員】{氏名}
【旧部署】{旧部署}
【新部署】{新部署}

"
)

このように、伝統的な通達文書の作成もPower Appsを使うことで効率化できます。ぜひ試してみてください。

おわりに

ちょこっとした改善?テクニックを載せてみました。
ご参考までに。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up