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

App Development4 posts340 views2 likesLast activity Sep 2021

gyorgybalazsiOP

Sep 2021

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?

Mate_Varga

Sep 2021

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"
  })
}

Mate_Varga

Sep 2021

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

github.com/digital-asset/daml

Navigator customviews highlight and choices button, apply custom theme on the login screen

digital-asset:main ← digital-asset:navigator-customviews-highlight-and-choices-button

opened 12:12PM - 13 Sep 21 UTC

matevarga-da

+3 -3

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.

gyorgybalazsi

Sep 2021

Thank you!

← Back to Discussions