1. Sitecoreフォームのウォークスルー

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

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

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

このウォークスルーでは、フォームデザイナーがフォームに**「送信」ボタン要素を追加した際に、BootstrapフレームワークのCSSオプションをスタイリング**セクションで利用可能にする方法を説明します(以下の画像参照)。

CSS class options available for a form element

必要なスタイルやスクリプトをSitecoreに追加した後、ライブウェブサイトでは、スタイリングを適用すると送信ボタンの要素が変わります(以下の画像に示されています)。

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」をクリックします。次にメッセージダイアログボックスで「Button」を入力し、「**OK」**をクリックします。

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

  4. テンプレート から挿入 ダイアログボックスで、/System/Forms/Meta Dataに移動し、CSSクラスオプション テンプレートをクリックし、アイテム名欄 にDefaultを入力してください。

    Insert from Template dialog box

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

  6. コンテンツツリーで作成したDefaultアイテムを選択し、コンテンツ タブのValue欄でbtn btn-defaultを入力し、変更を保存してください。

    !注Valueフィールドは、クラス名をスペースで区切った組み合わせで作成できます。

  7. ステップ3から6を繰り返して、以下の表に挙げられた各項目を作成します。

    アイテム名

    価値

    小学校

    BTN BTN-プライマリー

    情報

    BTN BTN-Info

    成功

    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.

    フォームデザイナーがフォームを開き、キャンバスの 「送信」ボタン をクリックし、CSSクラス名をCSSクラス フィールドに入力すると、利用可能なクラスが表示されます。

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

CSSクラスのオートコンプリートリストを入力する際のオプションを指定するのは、各フィールドタイプのCssクラスの自動補完オプション欄で、CSSクラスのラベルフィールドのCSSクラスの入力時に指定しますが、これら2つのフィールドは必ずしも同じである必要はありません。CSSクラスのオプションをフォルダごとに分類することで、オプションを一つずつ選ぶのではなく、単にフォルダを選択するだけでクラスオプションをフィールドタイプに適用しやすくなります。

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

  1. コンテンツエディターで*/sitecore/System/Settings/Forms/Field Types/Structure/Submit ボタン*に行ってください。

  2. コンテンツタブの設定セクションのCSSクラス自動補完オプションフィールドで、Buttonフォルダと共有フォルダをダブルクリックしてSelectedフィールドに移動します。

    選択されたCssクラスのオートコンプリートオプションは、フォームデザイナーのCSSクラス フィールドおよび ラベルフィールド用のCSSクラス の両方に使用されます。

    Selected CSS class options folders

  3. 変更を保存してください。

    オートコンプリートリストはフォームデザイナー向けに利用可能になりました。

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