空ステータスの図をカスタム画像で上書きする

デフォルトの空ステータスの図を独自のカスタム画像で変更または上書きして、ビジュアル要素に会社のブランディングが反映されるようにします。

始める前に

画像をテーマ可能にするには、カスタム SVG を テーマビルダー にアップロードする前に、お好みのテキストエディターを使用して、次の 2 つのデザイントークンをコードに追加します。

• --empty-state--main-object--fill

• --empty-state--main-object—outline

詳細については、「画像スタイルの操作」を参照してください。

必要なロール：admin

このタスクについて

重要:

カスタムイメージはワークスペースに適用され、 コア UIではサポートされていません。

手順

1. 移動先 すべて > Now Experience フレームワーク > テーマ > テーマビルダー.
   テーマビルダーランディングページが新しいタブで開き、ホームページビューに表示されます。
2. [ページ] ドロップダウンリストを使用して、[エディター] ページビューを選択します。

   図 : 1. エディターページビュー

   

3. [テーマ] ドロップダウン リストから、編集するテーマを選択します。
4. 一般スタイルパネルから [ 画像スタイル ] タブを選択します。
   空ステータスの図がメインステージに表示され、タイプ別にグループ化されます。

   図 : 2. [画像スタイル] タブが選択されました

   

5. 次のいずれかのオプションを使用して、上書きする空ステータスの図を選択します。
   • フィルターアイコン アイコンを選択し、空状況カテゴリを展開して、上書きする特定の空ステータスの図を選択します。
   • メインステージ内の空状態のイラストのリストをスクロールします。
   プロパティパネルが自動的に開きます。
6. プロパティパネルで、[ イメージ ] タブを選択します。

   図 : 3. プロパティパネルの [画像] タブ

   

7. 上書きするイラストレーションの大、中、小の画像ファイルを選択します。
   注:

   一度に上書きできる画像サイズは 1 つだけです。
   画像のアップロードモーダルが表示されます。

   図 : 4. 画像をアップロードモーダル

   

8. カスタム画像をアップロードするには、次のいずれかのオプションを使用します。
   • [参照] を選択し、コンピューターのファイル ブラウザーからカスタム イメージ ファイルを選択して、[開く] を選択します。
   • コンピューターのファイルブラウザーからカスタム画像ファイルをドラッグし、画像を直接モーダルにドロップします。
   サイズと形式の制限事項については、「画像をアップロード」モーダルを参照してください。カスタム画像が必要なサイズと形式を満たしていない場合、画像は保存されません。

   図 : 5. サイズと形式が制限された画像モーダルをアップロード

   

9. [Save (保存)] を選択します。
   カスタム画像は、選択した空ステータスカテゴリのメインステージに表示されます。

   図 : 6. カスタム画像が表示されたデータ空の状況カテゴリを追加

   

   図 : 7. データを追加 カスタム画像が表示された空ステータスのカテゴリ (画像に適用されたデザイントークン)

   

10. オプション: デフォルトの空ステータスの図を復元する場合は、[上書きを削除] 記号を選択します。

    図 : 8. イメージの上書きを削除

    

11. オプション: テーマをインスタンスに公開する前に、編集内容をプレビューします。
    1. [グローバルスタイル] パネルから [エクスペリエンスプレビュー ] タブを選択します。

       

    2. [エクスペリエンス] ドロップダウンリストからプレビューするエクスペリエンスを選択します。

       

    3. [新しいタブで開く] アイコン を選択して、エクスペリエンスを新しいタブで開きます。

タスクの結果

2 つのデザイントークンを適用したカスタム画像をアップロードしたら、デフォルトの空状態の図の場合と同じように、 テーマビルダー を使用して色をカスタマイズできます。色のカスタマイズの詳細については、「 空ステータスの図とカスタム画像の色をカスタマイズする」を参照してください。

テーマが公開されると、リフレッシュ時にテーマが適用されているユーザーにカスタム画像が表示されます。テーマの発行の詳細については、「 でテーマを公開する テーマビルダー」を参照してください。