As we recently announced, we want to start sharing our plans for improving the design of the live app so we can keep you informed and incorporate your feedback. Next up is a feature we’re calling View Link Styles.
This feature will allow builders to globally customize the style of links used throughout your live app views.
We’re still in active development, so while the preview below shows a functioning Builder UI, nothing is set in stone! That’s why we’re sharing these plans well ahead of it is release.
Here you can see a demo of how the links to view details from a table view will look and feel more like a button that can be customized. Here’s what the fill options look like:
And here’s what the outline options look like:
The following outlines our current plans for this feature and some of our ideas for expanding it in the future.
This will not be a breaking change. The current theme renders these as simple text links, which will be the default for all existing apps. If you choose a ‘fill’ or ‘outline’ format then it is possible that the HTML will change. We’ll try to limit all changes to new classes to add to the HTML, like knViewLink-outlined.
We will likely choose a different button style to be the default for new apps, especially if a particular style is overwhelmingly popular.
You can add separate styles for three different link types:
- Page links: any links going to child pages to view more details or edit a record
- Action links: any links that trigger actions
- Delete links: any links that delete a record
It’s possible that these styles could apply to every view, regardless of what type it is. But we’re currently leaning towards breaking them up into table type views and detail type views. So any links that display in detail type views (like a calendar if you click on an event) would use those detail styles. We considered allowing a separate configuration for each individual view type, but that seemed like overkill.
Currently, the styling options are:
- Format: text, outline, or fill
- Color: using the default or custom
- Uppercase text
- Rounded: available if the format is ‘outline’ or ‘fill’
- Border thickness: available if the format is ‘outline’
- Raised: available if the format is ‘fill’ (this adds a subtle drop-shadow)
- Default icon
As always we’re trying to strike the balance between features and simplicity, so we likely won’t be adding too many additional options beyond these, but we’re open to hearing other suggestions.
In the future, we want to add options to override these on the view or link level. So if you want a particular link to be bigger or a different color, you can change that individual link’s style while everything else uses the defaults.
The plan is also to use similar options for customizing menu views, along with the page links in the header.
Please let us know if you think these options will be valuable, along with anything else you’d like to see for customizing view links like this. In particular, we’re interested in hearing feedback about:
- The best way to manage global settings with individual overrides
- Any additional formats or style options we should consider
- Any concerns with class changes or breaking changes
Thank you for helping us with this feature! In addition to hearing from you, we’ll continue using this topic to provide updates from our end about the feature’s development and upcoming release.