Skip to main content

 

 

 

 

 
Language:
 
 
 
OutSystems

SilkUIFrameworkのアクティブなタブの保存と復元

質問

ビジット間でSilkUIFrameworkのアクティブなタブを復元するには、どのようにすればよいですか?

代わりにRichWidgets「Tabs_ClientSide」コンポーネントを使用する必要がありますか?

回答

SilkUIFrameworkのアクティブなタブを復元するには、JavaScriptのonclickハンドラで以下を行います。

  • 非表示の入力にタブ番号を保存します。

  • それを非表示のボタンでサーバーに送信し、セッション変数を設定します。

例:

  1. 現在のタブを保存するTabs Identifierデータ型のセッション変数(SelectedTabなど)を追加します。

  2. 画面またはWebブロックに入力フィールドを追加し、プロパティを以下のように設定します。

    1. Style Classes = RememberTabInput

    2. Extended properties: name = style, value = "display:none;"

    3. 変数も設定します(TabNumberなどを新しく作成します)

  3. 画面またはWebブロックにボタンを追加し、プロパティを以下のように設定します。

    1. Style Classes = RememberTabButton

    2. Method = Ajax Submit

    3. Extended properties: name = style, value = "display:none;"

  4. Expressionに以下のスクリプトを追加し、Escape Contentプロパティを「No」に設定します。

"<script language='javascript'>
 $('.Tabs__tab').click(                                                  
    function() {                                       
        var  activeTabNumber = $(this).attr('value');      
        $('.RememberTabInput')[0].value = activeTabNumber; 
        $('.RememberTabButton')[0].click(); 
    }
)             
</script>"
  1. 手順3で作成したボタンのターゲットとして、画面アクションを追加します。入力に関連付けられた変数にタブ番号(1、2、3...)が保持されます。手順1で作成したセッション変数を設定するためのロジックを追加します。

  2. Tabウィジェットで、ActiveTabパラメータに手順1で作成したセッション変数を入力します(Session.ActiveTabなど)。

改善された回答

このソリューションは、元のページに戻る際にうまく機能します。しかし、以下の場合はブラウザにキャッシュされたバージョンのページが表示されます。

  • ユーザーがページを再読み込みした場合。

  • ユーザーがブラウザの履歴を使用して元のページに戻った場合。

ページがキャッシュされないようにするには、レスポンスヘッダーを追加します。たとえば、*Cache-Control="NO-STORE"*というヘッダーを追加します。

タブを含む画面のPreparationで、以下に示すようにHttpRequestHandler > *AddHeaderアクションを追加します。

画像のaltテキスト

追加情報

ブラウザキャッシュの詳細については、以下をご覧ください。

  • Was this article helpful?