Skip to main content
Created for OutSystems 10. Not working on your version? Tell us about it!

 

 

フロントエンド

 

 

OutSystems

Editable TableからのAddまたはDelete機能の削除

Editable Tableレコード追加機能とレコード削除機能を無効にし、エンドユーザーが既存レコードの情報のみを編集できるようにするにはどのようにすればよいですか?

回答

レコード追加機能を削除する

はじめに、Source Record Listプロパティ(この場合は「GetStores.List」)を設定し、Editable TableのEvent>On Row Saveプロパティに新しいサーバーアクション(この場合は「UpdateRecord」)を割り当てます。

Editable Tableのレコード追加機能を無効にするには、以下の手順を実行します。

  1. Editable TableのEvent>On Row Saveプロパティに割り当てられたアクションを変更します。(1)CreateOrUpdate<エンティティ>エンティティアクションをUpdate<エンティティ>エンティティアクションに変更し、(2)新しいレコードの作成に関連するロジックを削除します。この場合、Set Row Id Assignノードを削除します。

    これにより、Editable Tableを使用して新しいレコードを作成できなくなります。

  2. Editable Tableが使用されているWeb画面に以下のCSSスニペットを追加します。

    .EditableTable tfoot {
        display: none;
    }
    

    これにより、Editable Tableのレコード追加アイコン/リンクが非表示になります。

  3. Editable Tableの最後の入力フィールドのStyle Classesプロパティを固有クラス(この場合は「LastColumn」)に設定します。

  4. .EditableTableが使用されているWeb画面に以下のJavaScriptスニペットを追加します。

    $(document).ready(function() {
        // Editable Tableの最後から2番目の行(最後の入力行)から最後の列を選択します(最後の入力行)
        $(".LastColumn").eq(-2).on("keypress keyup keydown", function (event) {
            var keyCode = event.keyCode ? event.keyCode : event.which;
            //  SHIFTではなくTAB
            if (keyCode === 9 && !event.shiftKey) {
                event.preventDefault();
                return false;
            }
        });
    });
    

    このスニペットは、Editable Tableの入力の最後の行の最後の列についてのみ、TABキーに関連するアクションを無効にします。デフォルトでは、Editable Tableの最後の行の最後の入力を選択しているときに、プラットフォームにより新しいレコードを挿入するための新しい行が自動的に追加されます。

これらの手順の後、以下のようになります。

  • Add Recordイベントに関連付けられたアクションで新しいレコードが作成されません。
  • レコード追加アイコン/リンクが表示されなくなります。
  • Editable Tableの最後の行の最後の列を選択しているときにTABキーを押しても、新しい行が作成されません。

レコード削除機能を削除する

Editable Tableのレコード削除機能を無効にするには、以下の手順を実行します。

  1. Event>On Row Deleteプロパティはのままにしておきます。

    これにより、削除アイコンが押されたときにサーバー側のアクションが実行されません。

  2. Editable Tableが使用されているWeb画面に以下のCSSスニペットを追加します。

    /* 削除アイコンとリンクを非表示にします */
    .EditableTable tr.OnEdit + tr.RowControlGroup .ControlActions a.DeleteRowAction  {
        display: none;
    }
    /* アクションボックスを再度、中央に配置します */
    .EditableTable tr.OnEdit + tr.RowControlGroup .ControlActions, .EditableTable tr.Selected + tr.RowControlGroup .ControlActions {
        margin-left: -57px;
    }
    

    このCSSスニペットは、削除アイコン/リンクを非表示にし、追加アイコン/リンクとキャンセルアイコン/リンクをアクションボックスの中央に再配置します。

これらの手順の後、Delete Recordイベントによってサーバー側のアクションがトリガーされなくなり、レコード削除アイコン/リンクが表示されなくなります。