1. Sitecore Formsのチュートリアル

チュートリアル: Button要素のスタイルを設定するためのBootstrap CSSクラス オプションの作成

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

このチュートリアルでは、次の図に示すように、フォーム デザイナーがフォームにSubmit button要素を追加するときに、BootstrapフレームワークのCSSオプションを追加してStylingセクションで使用できるようにする方法について説明します。

CSS class options available for a form element

Sitecoreに必要なスタイルとスクリプトを追加した後、次の画像に示すように、ライブWebサイトでスタイルを適用するとSubmit button要素が変更されます。

Live website showing the CSS styling applied to the Button element

このチュートリアルでは、次の方法について説明します。

  • CSSクラスオプションの作成

  • フィールド タイプの変更

CSSクラスオプションの作成

使用状況に基づいてCSSクラス オプションを分類し、フィールドの種類ごとにフォルダーを作成することをお勧めします。また、任意のフィールドタイプに適用できるCSSクラスオプション用の共有フォルダを作成することもできます。

CSSクラスオプションを作成するには:

  1. コンテンツ エディタで、/sitecore/System/Settings/Forms/Meta Dataに移動します。

  2. CSS Class Optionsフォルダを右クリックし、Insert, Folderをクリックします。次に、Messageダイアログボックスに「 Button」と入力し、「 OK」をクリックします。

  3. Buttonフォルダを右クリックし、Insert, Insert From Templateをクリックします。

  4. Insert from Templateダイアログボックスで、/System/Forms/Meta Dataに移動し、CSS Class Optionテンプレートをクリックして、Item Name Fieldに「Default」と入力します。

    Insert from Template dialog box

  5. 「 Insert」をクリックします。

  6. 作成したDefaultアイテムをコンテンツ ツリーで選択した状態で、ContentタブのValueフィールドに値btn btn-defaultを入力し、変更を保存します。

    メモ

    Valueフィールドには、スペースで区切られたクラス名の組み合わせを指定できます。

  7. 手順3から6を繰り返して、次の表に示す各項目を作成します。

    アイテム名

    価値

    原発

    btn btn-プライマリ

    情報

    btn btn-情報

    成功

    btn btn-サクセス

    警告

    btn btn-警告

    危険

    BTN BTN -危険

  8. 他の要素と共有できるCSSオプションを保持するSharedというフォルダーを作成します。

  9. Sharedフォルダを右クリックし、Insert, Insert From Templateをクリックして、次の表に示す値と一致するように、次の項目と値を関連付けて追加します。前の手順と同じテンプレートを使用します /System/Forms/Meta Data/CSS Class Option.

    アイテム名

    価値

    能動

    能動

    無効

    無効

  10. 変更を保存します。

    コンテンツツリーは次のようになります。

    Final tree structure showing all CSS class options.

    これで、フォーム デザイナーがフォームを開き、キャンバス上のSubmit buttonをクリックしてCSSクラス名をCSS classフィールドに入力し始めると、使用可能なクラスが表示されます。

フィールド タイプの変更

CSSクラスとラベル フィールドのCSSクラスの両方のオートコンプリート リストを作成するときに使用するオプションを指定するのは、各フィールド タイプのCss Class Autocomplete Optionsフィールドにありますが、これら2つのフィールドは同じである必要はありません。 CSSクラス オプションをフォルダに分類すると、オプションを1つずつ選択する代わりに、フォルダを選択するだけで、フィールド タイプにクラス オプションを簡単に適用できます。

フィールドタイプを変更するには:

  1. コンテンツ エディタで、/sitecore/System/Settings/Forms/Field Types/Structure/Submit buttonに移動します。

  2. ContentタブのSettingsセクションのCSS Class Autocomplete Optionsフィールドで、ボタン フォルダーと 共有 フォルダーをダブルクリックしてSelectedフィールドに移動します。

    選択したCssクラス オートコンプリート オプションは、フォーム デザイナのCSS classフィールドとCSS class for labelフィールドの両方で使用されます。

    Selected CSS class options folders

  3. 変更を保存します。

    オートコンプリート リストがフォーム デザイナーで使用できるようになりました。

この記事を改善するための提案がある場合は、 お知らせください!