# How to highlight selected custom filter button in Navigator? How to use the Choice field in a custom view? **URL:** \ **Category:** App Development\ **Created:** [September 8, 2021, 8:14pm UTC](https://forum.canton.network/t/how-to-highlight-selected-custom-filter-button-in-navigator-how-to-use-the-choice-field-in-a-custom-view/3088 "2021-09-08T20:14:35Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![gyorgybalazsi](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/gyorgybalazsi/32/684_2.png) [@gyorgybalazsi](https://forum.canton.network/u/gyorgybalazsi)\ **Post date:** [September 8, 2021, 8:14pm UTC](https://forum.canton.network/t/how-to-highlight-selected-custom-filter-button-in-navigator-how-to-use-the-choice-field-in-a-custom-view/3088/1 "2021-09-08T20:14:35Z")
When I select a default view in Navigator (Contracts of Templates), the button for the template is highlighted: ![image](https://canada1.discourse-cdn.com/flex028/uploads/daml/original/2X/1/15cd059566bfe063706cf8bc5a0fe9d39fdbe440.jpeg) When I select a custom view, the button isn’t highlighted. How can I set the same highlighting behavior for custom view buttons? ![image](https://canada1.discourse-cdn.com/flex028/uploads/daml/original/2X/9/94f71818e8e4e595115d6ab7f2645593a53435c0.jpeg) Also: how can I use the Choice field in a custom view? ---
**Author:** ![Mate\_Varga](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/mate_varga/32/2308_2.png) [@Mate\_Varga](https://forum.canton.network/u/Mate_Varga)\ **Post date:** [September 10, 2021, 10:33pm UTC](https://forum.canton.network/t/how-to-highlight-selected-custom-filter-button-in-navigator-how-to-use-the-choice-field-in-a-custom-view/3088/2 "2021-09-10T22:33:55Z")
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](https://docs.daml.com/app-dev/bindings-ts/index.html) That said with the following modifications on the code I could achieve both: ```haskell 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 = ({ 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: ```haskell { key: "choices", title: "Lehetőségek", createCell: ({rowData}) => ({ type: "choices-button" }) } ``` ---
**Author:** ![Mate\_Varga](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/mate_varga/32/2308_2.png) [@Mate\_Varga](https://forum.canton.network/u/Mate_Varga)\ **Post date:** [September 14, 2021, 12:15pm UTC](https://forum.canton.network/t/how-to-highlight-selected-custom-filter-button-in-navigator-how-to-use-the-choice-field-in-a-custom-view/3088/3 "2021-09-14T12:15:29Z")
@gyorgybalazsi We’ve merged the changes to fix the highlight issue: > > > These 3 lines fix the following minor aesthetic issues in the Navigator: > > 1. W…hen custom views are defined, highlighting of the currently viewed custom view in not present on the sidebar button. > 2. When using the \`choices-button\` cell type on a contract table custom view, the list of choices does not link to the specific choice on the contract, only the contract. > 3. Custom theme definitions are not respected by the login screen. > > The first two is related to this forum post: \[How to highlight selected custom filter button in Navigator? How to use the Choice field in a custom view?\]( https://discuss.daml.com/t/how-to-highlight-selected-custom-filter-button-in-navigator-how-to-use-the-choice-field-in-a-custom-view) > The last one was discovered by DA staff internally > > Before: > !\[Screenshot from 2021-09-13 15-14-03\](https://user-images.githubusercontent.com/77833827/133092273-6ccd35ff-c80f-4da3-a8dc-19dd3b893a68.png) > > After (note background color, highlighted sidebar button and link url in the statusbar): > !\[Screenshot from 2021-09-13 15-18-18\](https://user-images.githubusercontent.com/77833827/133092328-0b9f68df-c2cf-48c9-bb69-670ac89b3326.png) > > > \### Pull Request Checklist > > \- \[x\] Read and understand the \[contribution guidelines\](https://github.com/digital-asset/daml/blob/main/CONTRIBUTING.md) > \- \[\] Include appropriate tests > \- \[x\] Set a descriptive title and thorough description > \- \[x\] Add a reference to the \[issue this PR will solve\](https://github.com/digital-asset/daml/issues), if appropriate > \- \[x\] Include changelog additions in one or more commit message bodies between the \`CHANGELOG\_BEGIN\` and \`CHANGELOG\_END\` tags > \- \[\] Normal production system change, include purpose of change in description > > NOTE: CI is not automatically run on non-members pull-requests for security > reasons. The reviewer will have to comment with \`/AzurePipelines run\` to > trigger the build. ---
**Author:** ![gyorgybalazsi](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/gyorgybalazsi/32/684_2.png) [@gyorgybalazsi](https://forum.canton.network/u/gyorgybalazsi)\ **Post date:** [September 14, 2021, 6:54pm UTC](https://forum.canton.network/t/how-to-highlight-selected-custom-filter-button-in-navigator-how-to-use-the-choice-field-in-a-custom-view/3088/4 "2021-09-14T18:54:41Z")
Thank you!