2017年9月15日金曜日

Nintex入門 第4回 イベント・書式定義

Nintex連載の第4回となる本記事では、前回作成したユーザーインタフェースに対してクリックイベントや書式の定義を追加していきます。

 

1.1.     クリックイベントの定義


まずは、Nintex Formsで作成したフォームにおいて、クリックイベントを登録します。

フォームに複数のボタンを配置した上でアイテム作成時にワークフローを実行する場合、ワークフローに対してどのボタンが押されたのかを通知する必要があります。また、複数の画面を遷移している間に、現在どの承認者まで承認が済んでいるのかや却下済み、差し戻しといった状態を保持し続ける必要もあります。今回は、フォーム上にカスタムリストの選択肢と関連付けたドロップダウンメニューを配置し、ボタンクリック時にドロップダウンメニューの値を変化させることによってカスタムリストの値を変更させ、ワークフロー側でクリックされたボタンがどれであるか、現在のステータスは何かを取得できるようにします。


1.    まずカスタムリストの側で、種類が「選択肢」の列を追加します。前回の記事では、「ButtonType」、「Status」という名称の列を追加しています。


 
2.    ボタンの種別を管理するためのドロップダウンメニュー(カスタムリストの「ButtonType」列と対応する)の右クリックメニューから「設定」を開きます。


 
3.    JavaScript変数にクライアントIDを保存」メニューで「はい」を選択します。



 
4.    「クライアントIDを保存するJavaScript変数名」テキストボックスが表示されるので、任意の文字列を入力します。ここでは、コントロールの「名前」を基に、「ButtonTypeCID」としました。同様に「Status」コントロールにも変数名を指定しておきます。


 
5.    次に、変数「ButtonTypeCID」を操作するためのJavaScriptソースを追加します。編集画面のリボンにある「フォーム設定」をクリックします。



6.    「カスタムJavaScript」をクリックし、テキストボックスに以下のJavaScriptソースを入力します。入力後、「保存」をクリックします。このソースコードの先頭で定義している種別一覧が、各カスタムリスト列の選択肢として設定されている文字列と異なると、値が正しく設定されないため注意が必要です。


 




// ボタン種別に設定すべき値の一覧

var BUTTUN_TYPE_ITEMS = [

    'TempSave',

    'Application',

    'Approval',

    'Rejection',

    'Remand',

    'Cancel'

];

 

// ステータスに設定すべき値の一覧

var STATUS_ITEMS = [

    '未申請',

    '一時保存',

    '申請中',

    '承認者1承認済',

    '承認者2承認済',

    '承認者3承認済',

    '承認者4承認済',

    '承認者5承認済',

    '完了',

    '却下',

    '差戻し'

];

 

// (ボタン種別とステータス)を一括設定する

function SetValues(ButtonTypeValue, StatusValue) {

    SetButtonTypeValue(ButtonTypeValue);

    SetStatusValue(StatusValue);

}

 

// ボタン種別を設定する

function SetButtonTypeValue(ButtonTypeValue) {

    if (BUTTUN_TYPE_ITEMS.indexOf(ButtonTypeValue) >= 0) {

        // 引数に指定された値が選択肢の中に存在する

        NWF$('#' + ButtonTypeCID).val(ButtonTypeValue).trigger("change");

    }

}

 

// ステータスを設定する

function SetStatusValue(StatusValue) {

    if (STATUS_ITEMS.indexOf(StatusValue) >= 0) {

        NWF$('#' + StatusCID).val(StatusValue).trigger("change");

    }

}

 

7.    続いて、各ボタンにJavaScriptの関数を呼び出すための設定を追加します。ここでは、申請ボタンを例にご説明しますが、文言が異なるだけで他のボタンでも同様の手順で設定することが可能です。

       i.          申請ボタンの右クリックメニューから「設定」を開きます。




      ii.          「詳細」配下にある「クライアントクリック」テキストボックスに、以下のJavaScriptソースを入力し、「保存」をクリックします。


 



SetValues('Application','申請中');

 

8.    動作確認のため、編集画面のリボンにある「公開」をクリックします。




9.    カスタムリストを開き、「新しいアイテム」をクリックして作成したフォームを開きます。




10.  すべての入力項目を空文字としたまま「申請」をクリックすると、ドロップダウンメニュー「ButtonType」および「Status」の値が変更されることを確認します。




11.  続いて「タイトル」に任意の文字列を入力して「申請」をクリックします。


 

12.  アイテムが保存(作成)されていることを確認します。




1.2.     書式の設定


続いて、ユーザーの名称や権限に応じて表示内容を切り替えるための処理を追加していきます。

例えば、ボタンやその他のコントロールは、ユーザーの権限に応じて実行可能なものだけが有効化されていることが望ましいと考えられます。このような切り替えを実現するために、ログインユーザー(フォームを閲覧しているユーザー)を取得する処理や画面を切り替える処理を追加します。

 

1.    編集画面のリボンにある「フォーム設定」を開き、「カスタムJavaScript」に以下のソースを追記します。


 



NWF$(document).ready(function() {

    NWF$("#RibbonSaveButton").hide();

    NWF$("#RibbonDeleteButton").hide();

    TimerJobID = setTimeout(TimerJob, 500);

});

 

// 引数に与えられたアクセス許可に応じて、表示するレイアウトを切り替える

// 引数modeには、現在のユーザーがアクセスを許可されていればtrueを、許可されていなければfalseを指定する

function toggleLayoutMode(mode) {

    // パネルの要素を取得

    var permittedClass = document.getElementsByClassName("permitted");

    var notpermittedClass = document.getElementsByClassName("notpermitted");

 

    // パネルが2種類とも表示されない状況にはならないようチェックする

    if (permittedClass && notpermittedClass) {

        // 画面上に2種類のパネルが存在するとき

        if (mode) {

            // アクセスが許可されている場合

            setDisplayValues(permittedClass, "block");

            setDisplayValues(notpermittedClass, "none");

        } else {

            // アクセスが許可されていない場合

            setDisplayValues(permittedClass, "none");

            setDisplayValues(notpermittedClass, "block");

        }

    }

}

 

// 表示、編集権限があるかチェック 無ければブラウザバック

function TimerJob() {

    // ログオンユーザーを取得する

    var UserID = NWF$('#' + LogonUserCID).val();

 

    // ステータスの獲得

    var ButtonType = NWF$('#' + ButtonTypeCID).val();

 

    // ログオンユーザーが

    if ((UserID != undefined) && (ButtonType != undefined)) {

        NWF$('#' + LogonUserCID).val("").trigger("change");

 

        // 閲覧、編集可能ユーザーの獲得

        var MembersString = NWF$('#' + MembersStringCID).val();

        if (MembersString == undefined) {

            MembersString = '';

        }

 

        if (MembersString.indexOf(UserID) < 0 && ButtonType != 'TempSave') {

            // 閲覧、編集可能ユーザーにログインユーザーが含まれない場合

            // 「このアイテムにアクセスするための権限が必要です。」画面を表示する

            toggleLayoutMode(false);

        } else {

            // 編集画面を表示する

            toggleLayoutMode(true);

        }

    } else {

        // 再試行

        var TimerJobID = setTimeout(TimerJob, 300);

    }

}


2.    前項のJavaScriptコードの中でログオンユーザー名を取得するために、ログオンユーザーを格納するコントロールを作成し、フォームの側で値を格納する必要があります。

 
       i.          まず、「一行テキストボックス」コントロールを配置します。


 

      ii.          配置した「一行テキストボックス」の「設定」を開きます。


 

    iii.          「名前」に「LogonUser」と入力した後、「既定値」をクリックしてフォーカスを合わせます。


 

    iv.          右側の「参照の挿入」パネルにある「現在のユーザー (Login ID)」をダブルクリックし、「既定値」テキストボックスに挿入します。


 

      v.          「既定値」テキストボックスに値が挿入されたことを確認します。


 

    vi.          「詳細」の配下にある「JavaScript変数にクライアントIDを保存」で「はい」を選択した後、「クライアントIDを保存するJavaScript変数名」に「LogonUserCID(先程JavaScriptソース内で指定したもの)を入力する。入力後、「保存」をクリックします。


 

3.    動作確認のため、フォームの編集画面から「公開」を実行します。


 
4.    カスタムリストを開き、「新しいアイテム」をクリックします。



5.    ユーザーIDがテキストボックス「LogonUser」に格納されていることを確認します。



6.    続いて、ログオンユーザーに応じてコントロールの有効/無効を切り替える設定を追加します。まず、承認ボタンを例に、設定手順をご紹介します。承認ボタンの表示状態と切り替えの条件は以下の表の通りとします。



       i.          「承認」ボタンをクリックしてフォーカスを当てた状態で、リボンにある「ルールの追加」をクリックします。


 
      ii.          区別のために、判りやすい名前に変更しておく。


 
    iii.          「条件」をクリックしてフォーカスを当てた状態で右隣にある「f(x)」をクリックします


 
    iv.          「数式パレット」が表示されるので、先程表に示した条件を表すような数式を入力します。ここに入力した式が「真(true)」と評価されたときにコントロールが無効化または非表示となります。


 
      v.          入力が完了したら、「OK」をクリックします。




    vi.          「ルール」パネルの「書式設定」にあるチェックボックス「無効」にチェックを入れます。


 

7.    動作確認のために、編集画面のリボンにある「公開」をクリックした後、カスタムリストを開いて「新しいアイテム」をクリックします。



8.    「承認」ボタンが無効化されていることを確認します。



9.    「タイトル」に適当な文字列を入力し、「申請」をクリックします。


 
10.  新しいアイテムが追加されていることを確認します。



11.  タイトルをクリックして開きます。



12.  「表示モード」でアイテムが開かれるので、リボンにある「アイテムの編集」をクリックします。



13.  承認者の立場で開いたときのフォームが表示されます。本来はここで「承認」ボタンが有効化されていて欲しいところですが、まだワークフローロジックを設定していないため、カスタムリスト列「MembersString」が設定されておらず、無効化されたままになっています。この部分については、ワークフローロジック作成後に再度確認します。


 
14.  残りのコントロールも同様に書式設定を行います。

1.3.     まとめ


今回は、ユーザーインタフェース側の設定方法についてご紹介いたしました。次回の記事では、ワークフローシステム作成のメインであるワークフローロジックの作成方法についてご紹介できればと考えております。

ブログアーカイブ

前回までのブログと今後の予定
Nintex Workflow
 第5回 Nintex ワークフローロジックの定義 10月初旬予定
 
その他以下ブログを発信中です。
 
機械学習(Azure Machine Learning)の入門からビジネス活用へ