Insert field value in a kn-crumbtrail / breadcrumb

API & Customization Ask Developers
1

Hi,

Does anyone know how to change/rename text in a crumbtrail / breadcrumb?
It is the “Selected customer” text, where I would like to insert a value from a specific field instead, as the text.

image
image1812×238 22.7 KB

2

Hi @Alteco

You can do this with some JavaScript could you tell me if the field you get the value from is in a details view or a table?

Craig

3

It is in a table, thanks :slight_smile:

4

One more question which record in the table? Is there a unique value in the record that we can use to look up? If you could share a screenshot that would be helpful.

Craig

5

I have a grid view with my Customers, when I click on a customers name, it goes directly to a details view with a tab menu and it goes directly to the first tab. And I would like the Customers name to appear instead of “Selected Customer”.

image
image1872×393 14.8 KB

image
image1869×299 9.63 KB

Every Customer has a unique “BC Account Number”, it is not shown in the grid view though in the first screenshot, but both “Customer” and “BC Account Number” are in the same table called Customers in the builder.

image
image794×60 2.77 KB

image
image798×58 3.3 KB

Let me know if you need anything else.
There are not made any views (grid, details, lists etc.) on the Overview tab, yet.

6

Hi @Alteco

The first thing you need to do is make sure that the Client Name (field_1) is on all pages that show from the menu in your screen shot. i.e. Overview (Beta), Tech Doc (Beta)…

You will also need the view id of that menu view.

Then copy this code into the JavaScript pane:

// Scene Render Will run on every scene
    $(document).on("knack-scene-render.any", function () {
        if($('#view_xyz') && $('.field_1 .kn-detail-body')[0]){ //Defensive coding to ensure the view and field exist on page
             // Get clientName .first() get only the first field in case more than 1 of the same field on the page
             // .text() get the text from the field
            // .trim() remove any white space either side of the name
            const clientName = $('.field_1 .kn-detail-body').first().text().trim();
            // Update the breadcrumb with the client name
            $('.kn-crumbtrail a:contains("Selected Customer")').text(clientName);
        }
    });

You must replace the view_xyz with the view id of the menu view. You can also remove all the comments to if you want.

If you don’t already have or don’t want the client name to display on those pages you can use display rules in the details view to hide it from view.

If you need any further help please ask.

Craig

1 Like
7

Works perfectly, thank you so much Craig!