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:
digital-asset:main
← digital-asset:navigator-customviews-highlight-and-choices-button
opened 12:12PM - 13 Sep 21 UTC
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.