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

ポップアップウィンドウの動的なサイズ変更

Last updated
Save as PDF

ポップアップウィンドウを実行時に自動的に拡大したり縮小したりするにはどのようにすればよいですか？

例: Popup_Editorを使用してTableRecordsを含むポップアップウィンドウを作成しました。TableRecordsの内容はポップアップウィンドウから変更できます。さらに、TableRecordsのサイズに応じてポップアップウィンドウのサイズが自動的に変更されるようにします。

回答

ポップアップを内容に応じて自動的に拡大させるには、Popup_EditorのAutoResizeプロパティを「True」に設定します。

Pop-up AutoResize

AutoResizeプロパティは、ポップアップウィンドウの自動拡大にのみ影響を及ぼします。 -ポップアップを内容に応じて自動的に縮小させるには、以下の手順を実行します。

ポップアップWeb画面のJavaScriptプロパティに以下のJavaScriptスニペットを追加します。

function PopupEditor_ForceResize() {
    var popupDiv = window.top.$(".os-internal-ui-dialog-content");
    var popupDivOldHeight = popupDiv.height();
    // インラインフレームのdivの高さをコンテンツまで減らします
    popupDiv.height($(".MainPopup").innerHeight());
    // ポップアップエディタはすでに自動拡大されており、さらに自動縮小に対応する必要があります
    if (popupDiv.height() >= popupDivOldHeight) {
        return false;
    }
    var result = window.top.RichWidgets_Popup_Editor_resize(popupDiv, -1, -1, false, {target: popupDiv});
    if (!result) {
        // サイズ変更に誤りがある場合はインラインフレームのdivの高さをリセットします
        popupDiv.height(popupDivOldHeight);
    }
}

このJavaScriptスニペットは、実行時にポップアップウィンドウを縮小するときに使用する関数PopupEditor_ForceResize()を定義します。

HTTPRequestHandlerエクステンションのRunJavaScriptアクションを追加し、ポップアップの内容を縮小させるすべてのアクションに対して、Scriptプロパティを「"PopupEditor_ForceResize()"」に設定します。

これにより、PopupEditor_ForceResize() JavaScriptアクションが呼び出されます。

Training

Documentation