How to highlight selected custom filter button in Navigator? How to use the Choice field in a custom view?

When I select a default view in Navigator (Contracts of Templates), the button for the template is highlighted:

When I select a custom view, the button isn’t highlighted. How can I set the same highlighting behavior for custom view buttons?

Also: how can I use the Choice field in a custom view?

We do not recommend this level of customization of the Navigator, as it is only intended to be a visual aid during the development process. For a customized UI, you should really use the JavaScript Client Libraries

That said with the following modifications on the code I could achieve both:

diff --git a/navigator/frontend/src/applets/customview/index.tsx b/navigator/frontend/src/applets/customview/index.tsx
index 644a2337fe..07505408dc 100644
--- a/navigator/frontend/src/applets/customview/index.tsx
+++ b/navigator/frontend/src/applets/customview/index.tsx
@@ -198,7 +198,7 @@ function createColumns(config: ConfigType, viewId: string)
                   route={Routes.contract}
-                  params={{id: encodeURIComponent(id), name}}
+                  params={{id: encodeURIComponent(id), choice:name}}
                 >
diff --git a/navigator/frontend/src/components/Frame.tsx b/navigator/frontend/src/components/Frame.tsx
index db850ead0b..8ca953d88e 100644
--- a/navigator/frontend/src/components/Frame.tsx
+++ b/navigator/frontend/src/components/Frame.tsx
@@ -74,7 +74,7 @@ const Frame: React.FC<FrameProps> = ({
               title={title}
-              isActive={false}
+              isActive={activeRoute === Routes.customView && window.location.pathname.split("/")[2] === id}
               route={Routes.customView}

The choices button you can include in your custom views by defining a column like:

{
  key: "choices",
  title: "Lehetőségek",
  createCell: ({rowData}) => ({
    type: "choices-button"
  })
}
1 Like

@gyorgybalazsi We’ve merged the changes to fix the highlight issue:

Thank you!

1 Like