新しいダイアログの追加

リボンコンテナに新しいダイアログを追加してダイアログを開いたり閉じたりするコマンドをマップできます。

ダイアログを開く

コンテキストメニューで[署名の挿入]オプションを選択して、[署名ダイアログ]ダイアログを表示するには、次の手段を実行します。

デフォルト構成を取得します。

JavaScript	コードのコピー
// ワークブックとワークシートを構成します。 var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); var activeSheet = spread.getActiveSheet(); // デフォルトconfigを取得します。 var config = GC.Spread.Sheets.Designer.DefaultConfig;

JavaScript

コードのコピー

// ワークブックとワークシートを構成します。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var activeSheet = spread.getActiveSheet();

// デフォルトconfigを取得します。
var config = GC.Spread.Sheets.Designer.DefaultConfig;

「contextMenu」タグに「署名の挿入」オプションを追加し、プロジェクトのcommandMapに設定します。

JavaScript	コードのコピー
// configコンテキストメニューにコンテキストメニュー項目を追加します。 if (config && config.contextMenu) { config.contextMenu.unshift("insertSignatureMenu"); } // 新しいコンテキストメニュー項目のコマンドを作成します。 config.commandMap = { "insertSignatureMenu": { text: "署名の挿入", commandName: "insertSignatureMenu", visibleContext: "ClickRowHeader", // execute_InsertSignature、以下は簡単なデモコードスニペットです。 execute: () => { // ここに、手順4で登録したダイアログテンプレート名を追加します。 GC.Spread.Sheets.Designer.showDialog("signature"); } } }

JavaScript

コードのコピー

// configコンテキストメニューにコンテキストメニュー項目を追加します。
if (config && config.contextMenu) {
    config.contextMenu.unshift("insertSignatureMenu");
}

// 新しいコンテキストメニュー項目のコマンドを作成します。
config.commandMap = {
    "insertSignatureMenu": {
        text: "署名の挿入",
        commandName: "insertSignatureMenu",
        visibleContext: "ClickRowHeader",

        // execute_InsertSignature、以下は簡単なデモコードスニペットです。
        execute: () => {
            // ここに、手順4で登録したダイアログテンプレート名を追加します。
            GC.Spread.Sheets.Designer.showDialog("signature");
        }
    }
}

カスタマイズ可能な構成のために「config」パラメータを渡すデザイナのインスタンスを初期化します。

JavaScript	コードのコピー
// デザイナのインスタンスを初期化します。 var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config, spread);

コンテキストメニューの「署名の挿入」オプションのクリックで「署名」ダイアログを開くには、プロジェクトで「insertSignature」ダイアログテンプレートを作成して登録します。

JavaScript	コードのコピー
let insertSignature = { templateName: "insertSignature", title: "署名ダイアログ", content: [ { type: "FlexContainer", children: [ { type: "TextBlock", margin: "5px -4px", text: "範囲を挿入します" }, { type: "RangeSelect", title: "範囲を選択します", absoluteReference: true, needSheetName: false, margin: "5px -5px" } ] }, ] } // registerTemplateを使用してダイアログテンプレートインスタンスを登録します。 GC.Spread.Sheets.Designer.registerTemplate("signature", insertSignature);

JavaScript

コードのコピー

let insertSignature = {
    templateName: "insertSignature",
    title: "署名ダイアログ",
    content:
        [
            {
                type: "FlexContainer",
                children: [
                    {
                        type: "TextBlock",
                        margin: "5px -4px",
                        text: "範囲を挿入します"
                    },
                    {
                        type: "RangeSelect",
                        title: "範囲を選択します",
                        absoluteReference: true,
                        needSheetName: false,
                        margin: "5px -5px"
                    }
                ]
            },
        ]
}

// registerTemplateを使用してダイアログテンプレートインスタンスを登録します。
GC.Spread.Sheets.Designer.registerTemplate("signature", insertSignature);

上記の手順に従うと、以下の出力が生成されます。

プログラムでダイアログを閉じる

プログラムでダイアログを閉じるには、Designer.closeDialogメソッドを使用します。このメソッドはパラメータとして、登録されたテンプレート名と、ダイアログを閉じた後でダイアログ値を送信するかどうかを受け入れます。

上記の手順に従って作成した「署名ダイアログ」に次の変更を加えると、「署名ダイアログ」を自動的に閉じることができます。

手順2のコードを変更して、既存のcommandMapにcloseDialog メソッドを追加します。

JavaScript	コードのコピー
config.commandMap = { "insertSignatureMenu": { text: "署名の挿入", commandName: "insertSignatureMenu", visibleContext: "ClickRowHeader", // execute_InsertSignature、以下は簡単なデモコードスニペットです。 execute: () => { // {既存のコード} // ダイアログを閉じる実行コードを追加します。 var showTips = document.querySelector(".show-tips"); var i = 4; var showTipsInterval = setInterval(() => { showTips.innerText = "" + i + "秒以内に有効な値を入力する必要があります。"; i--; if (i === -1) { clearInterval(showTipsInterval); GC.Spread.Sheets.Designer.closeDialog("signature", false); // タイムアウトした場合ダイアログを閉じます。 } }, 1000); } } }

JavaScript

コードのコピー

config.commandMap = {
    "insertSignatureMenu": {
        text: "署名の挿入",
        commandName: "insertSignatureMenu",
        visibleContext: "ClickRowHeader",            
        // execute_InsertSignature、以下は簡単なデモコードスニペットです。
        execute: () => {
            
            // {既存のコード}

            // ダイアログを閉じる実行コードを追加します。
            var showTips = document.querySelector(".show-tips");
            var i = 4;
            
            var showTipsInterval = setInterval(() => {
                showTips.innerText = "" + i + "秒以内に有効な値を入力する必要があります。";
                i--;
                if (i === -1) {
                    clearInterval(showTipsInterval);
                    GC.Spread.Sheets.Designer.closeDialog("signature", false); // タイムアウトした場合ダイアログを閉じます。
                }
            }, 1000);
        }   
    }
}

手順4のコードを変更して、ダイアログテンプレートに新しいテキストブロックを追加します。

JavaScript	コードのコピー
let insertSignature = { templateName: "insertSignature", title: "署名ダイアログ", content: [ // {既存のコード} // ダイアログのテンプレートに新しいテキストブロックを追加します。 { type: "TextBlock", text: "5 秒以内に有効な値を入力する必要があります。", className: "show-tips" }, ] }

JavaScript

コードのコピー

let insertSignature = {
    templateName: "insertSignature",
    title: "署名ダイアログ",
    content: 
    [
        // {既存のコード}

        // ダイアログのテンプレートに新しいテキストブロックを追加します。
        {
            type: "TextBlock",
            text: "5 秒以内に有効な値を入力する必要があります。",
            className: "show-tips"
        },
    ]
}

上記の手順に従うと、以下の出力が生成されます。