（※このトピックスは、Valence開発元（米CNX社）のブログ記事を翻訳・再編集したものとなります。原文記事は、コチラとなります。）
有名な童話『ヘンゼルとグレーテル』では、ヘンゼルが見知らぬ場所から家に戻るための方法として、パンくずを道しるべにするという斬新なアイデアを思いつきます。
App Builder のアプリでも、これと同じようなことがデジタル上で実現できるようになりました（もちろん、パンくずを鳥に食べられる心配はありません）。
この機能を使えば、ユーザーがブラウザ上で現在どのプロセスや画面にいるのかを明確に示すことができ、操作の流れや階層をわかりやすく伝える手段として役立ちます。
App Builder のビルド 6.2.20230927 で導入されたパンくず（Breadcrumb）機能は、ユーザーを段階的な処理へと導く場面でよく使われます。たとえば、新しい部品番号を登録する際に、複数のフォームを順番に入力していく必要がある場合などが典型的な用途です。あるいは、ドリルダウン型の照会画面で、ユーザーが複数ページを移動する際に、自分が今どの位置にいるのかを視覚的に示す手がかりとしても活用できます。
この概念をわかりやすくするために、基本的な受注照会アプリを例にして、パンくずをどのように設定できるかを見てみましょう。このアプリはドリルダウンのロジックに基づいており、3つの異なるグリッドウィジェットで構成されています：（1）顧客の一覧、（2）選択された顧客の注文一覧、（3）選択された注文の明細行一覧です。
（1）ドリルダウンまたはステップ形式で使用するウィジェットを作成する
最初のステップは、3つのシンプルな NAB データソースと、それぞれに対応するグリッドウィジェットを作成することです。今回のデモでは、Valence 6.2 に付属しているサンプルグリッドを使用します。具体的には、「Customer List」「Order List」「Order Lines」という名前のグリッドウィジェットです。これらのウィジェットを確認するには、NAB Designer のオブジェクトリスト上部にある歯車アイコンをクリックし、「Show Examples（サンプルを表示）」のチェックボックスをオンにしてください。
（2）ウィジェットを NAB アプリに挿入し、パンくずを有効化する
ウィジェットの準備ができたら、新しい App Builder アプリを作成し、デフォルトである「Main」セクションに加えて、「Orders」と「Lines」という2つのセクションを追加します。パンくず機能を使用するうえでセクションの追加は必須ではありませんが、ウィジェットの表示／非表示を切り替える作業がしやすくなるため、推奨されます。
それぞれのセクションに対応するグリッドウィジェットを配置したら、「App-level breadcrumbs（アプリレベルのパンくずリスト）」というチェックボックスをオンにしてパンくずナビゲーションを有効にします。
すると、以下のような構成になります。
（3）ウィジェット間のドリルダウン処理を行うための動作内容のロジックを追加する
このドリルダウン形式の照会では、「Main」セクションにある Customers グリッドの行をクリックすると、選択された顧客の注文一覧を表示し、さらにその注文をクリックすると、選択された注文の明細行が表示されるようにしたいと考えています。
これを実現するために、動作内容のセクションに2つのクリックイベントを追加します。
1つ目のクリックイベントは Customers グリッドに追加し、クリックされた顧客番号に基づいて Orders グリッドをフィルターし、Orders セクションを表示させます。
2つ目のクリックイベントは Orders グリッドに追加し、選択された注文番号に基づいて Lines グリッドをフィルターし、Details セクションを表示します。
設定後の 動作内容の一覧は、次のような形になります。
（4）各クリックイベントに表示したいパンくずのテキストを設定する
ここから、パンくずの設定を始めます。具体的には、先ほど追加した2つのクリックイベントにアクションを追加していく形になります。パンくずに表示したいテキストを管理するためのアプリ変数を用意します（「Step 1」などの汎用的な固定文字列を使うこともできますが、それではあまり実用的とは言えません）。
まず、Customers グリッドのクリックイベントに対して、「Set App Variable（アプリ変数の設定）」アクションを追加します。
ここでは、クリックされた顧客の名前をアプリ変数に設定します。変数名は自由に決められますが、この例では「crumbText」とします。
1つ目のパンくずに表示する論理的なテキストとしては、クリックされた顧客名が適切です。
次のように設定します。
Orders グリッドのクリックイベントについても、同様にアプリ変数を設定します。
ただしこの場合は、アプリ変数に「Order: 」という文字列と、選択された注文番号を連結して設定します。
設定内容は次のようになります。
（5）パンくずにテキストを連携し、クリック時の処理を実行させるイベントを設定する
いよいよパンくずそのものを連携させる準備が整いました。このアプリが初めて起動されたときには、まだどこにもドリルダウンしていないので、パンくずは表示しないようにしておきます（いわば「ホーム」の状態です）。
しかし、ユーザーが最初のグリッドである Customers グリッドの顧客をクリックしたタイミングで、パンくずを2つ表示します。1つは「ホーム」（＝顧客一覧）を表すもの、もう1つは選択された顧客名を表すものです。
ここで活用するのが、「Breadcrumbs(パンくずリスト)」アクションです。このアクションは、ステップ2でアプリレベルのパンくず機能を有効化している場合にのみ利用できます。
このアクションを使うことで、パンくずの表示内容やクリック時の挙動をコントロールできるようになります。
表示したい最初のパンくずは、単純に「Customers」というラベルにし、
ユーザーがそれをクリックしたときには、“backtomain” というイベントを発生させて、ユーザーを「Main」グリッドに戻すようにします（このイベントの詳細は後ほど説明します）。
したがって、この最初のパンくずの設定は次のようになります：
- クリック時のイベント名：backtomain
- ラベル：Customers
この設定により、ユーザーがパンくずの「Customers」をクリックすると、アプリはメインの顧客一覧グリッドに戻る動作を実行します。
2つ目に表示されるパンくずは、選択された顧客の名前になります。
そのため、もう1つパンくずを追加し、リンクテキストの欄にはステップ4で設定したアプリ変数「crumbText」を指定します。
さらに、このパンくずがクリックされたときには、ユーザーを注文一覧（Order List）に戻すためのイベントを発生させます。
このイベントは “backtoorders” という名前にしておきます。
したがって、2つ目のパンくずの設定は以下のようになります。
- クリック時のイベント名：backtoorders
- ラベル：[crumbText]（アプリ変数の値で設定）
これにより、ユーザーが選択した顧客名のパンくずをクリックすると、その顧客に紐づく注文一覧へと戻れるようになります。
最後に表示したいパンくずは、Orders グリッドでクリックされた注文番号です。これは明細行（Lines）を表示しているときに表示されるもので、ユーザーがどの注文を見ているのかを示すためのものです。
そのため、Order List グリッドのクリックイベント内でも、ステップ4で設定したアプリ変数「crumbText」を再び使用してリンクテキストとして指定します。
ただし、このパンくずはリストの最後に表示されるもので、現在表示中の内容そのものを表しているため、クリックできる必要はありません。したがって、このパンくずにはイベントは設定しません。
この設定により、3つ目のパンくずは先ほどの顧客名のパンくずとほぼ同じ構成になりますが、イベントが発生しない点だけが異なります。
最終的な 動作内容の ツリーは、次のような構成になります。
（6）発生したイベントに応答するロジックを追加する
最後のステップは、各パンくずに設定されたクリックイベントに対して適切に応答するロジックを追加することです。
この処理は、動作内容のリスト最上部にある「Event Listeners（イベントリスナー）」セクションで行います。
まず対応すべきイベントは、ローカルイベントとして設定した backtomain です。
このイベントでは、ユーザーを最初のグリッド（顧客一覧）に戻し、パンくずをすべて消去する処理を行います。
Event Listeners に新しいイベントを追加し、「Local（ローカル）」をクリックして、backtomain を選択します。
このようにして、パンくずのクリック操作と画面遷移・状態復元の処理をつなげていきます。続くイベントも同様の手順で設定します。
次に、「Clear All Breadcrumbs（すべてのパンくずをクリア）」アクションと「Show Section（セクションの表示）」アクションを追加して、ユーザーを Main グリッド（顧客一覧）に戻します。
同様に、backtoorders イベントに対する別のイベントリスナーを追加し、ユーザーを Orders グリッド（注文一覧）に戻すように設定します。
最終的なイベントリストは、次のような形になります。
ここまで設定が完了したら、アプリを保存して実行し、パンくず機能が実際にどのように動作するかを確認してみましょう。
複数のグリッドウィジェットを順にドリルダウンしていくと、ヘンゼルも満足するようなパンくずのリストが表示されるはずです！
なお、アプリ内の別のボタンなどから特定のパンくずを擬似的にクリックしたような動作を実行したい場合は、
「Navigate to Breadcrumb（パンくずリストに移動）」という動作内容のアクションを使用することもできます。
このアクションでは、たとえば「1」と指定すれば最初のパンくずを、「2」と指定すれば2番目のパンくずをクリックした場合と同じ動作が行われます。