Live App: View Link Styles

[Jessie]

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:

How will it work?

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:

1. Page links: any links going to child pages to view more details or edit a record
2. Action links: any links that trigger actions
3. 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
• Size
• 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.

Feedback requests

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.

[JulianKirkness]

This is great news - I change all the links in my apps to buttons by using the following in the link text:

Edit

and then the defining CSS:

.blueButton {
background: #2d6bb3;
border: 0px solid #2d6bb3;
border-radius: 4px;
padding: 10px 30px;
color: #ffffff;
display: inline-block;
font: normal 600 14px/1 “Calibri”, sans-serif;
text-align: center;
text-shadow: none;
}
.blueButton:hover {
background: #4689c0;
}

I generally set up blue, orange, green, yellow, and red buttons as a minimum in an app.

I also always style the Delete link (and capitalise the first letter).

So this would be quite a time saver.

However, I may often have several links in a single table or details view - these may be action links etc. I would need to be able to specify the colour of each separately so they stand out - ideally from a predefined set of colour options so I don’t have to remember colour codes.

As a starting point for a new app I would probably also set the following:

.kn-scene {
background: #eaeaea !important;
border: 10px solid #eaeaea !important;
border-radius: 7px !important;
}

.kn-detail-label {
background: #d5d5d5!important;
border: 1px solid #d5d5d5 !important;
border-radius: 1px !important;
}

.kn-list-item-container {
border: 1px solid #2D6BB3;
background: #ffffff;
text-align: center;
}

My hope is that soon NONE of this will be necessary!

[CarlHolmes]

What @JulianKirkness said - He kindly shared all the button tips and tricks with me a couple of years ago, and showed me how to do them. It’s great that this will be for action links too.

The below is a typical table, would look even better with the archive as a button

As mentioned, I would like to see the ability to set “favorite” color options as having to copy and paste the Hex code each time would require more work. It’s important to me that the link colors are consistent across the app. Would it be possible to either save the color as a favorite in the color picker panel or even better, add it to the app settings when we setup the “Live App Design”.

This news is AWESOME!! so excited…

[JulianKirkness]

Hi @CarlHolmes - you can already use this for Action Links:

Live:

[CarlHolmes]

Whoop whoop Every days a school day, thanks @JulianKirkness
Not sure why I hadn’t worked that one out, it’s exactly the same process…doh!

[MichaelG]

WONDERFUL!!!

I will see it in details later but great.

This functionality could be applied to Title.

Maybe adding distance options between the text and the border.

[MichaelG]

@Jessie

As always we’re trying to strike the balance between features and simplicity

yes, very important. Keep it simple.

[Jessie]

Thank you for the responses here so far! We’re reviewing and continuing to build this out, will post here again when there’s another update from us.

---

Just wanted to add something I did not include on the original post:

These options (along with all other new design settings) will not be available on legacy themes. Legacy themes are only available for old apps that had that setting before the new Builder, if you have an app on a legacy theme, you would find that here:

Thanks again for following along and helping us out with your great feedback!

[MichaelG]

It would be useful an option to style a Text Formula.

Since one of the objectives is to combine various factors in one field, maybe there is a way to style them diferently for better UX.

ex: Alex, Team A

[JulianKirkness]

Hi @MichaelG

You can already add styling to a text formula - for example:

<b>Flight Travel Info</b><br />Arriving or Departing: {Arriving or Departing Ireland}<br />From / To: {Patient Test Origin (Country).country} ==> {Patient Test Destination (Country).country}<br />Flight Info: {Flight Number 1} - {Flight Date 1}<br />Passport No: {Passport Number}<br />Name on Passport: {Name on Passport}

Which will look like:

Flight Travel Info
Arriving or Departing: {Arriving or Departing Ireland}
From / To: {Patient Test Origin (Country).country} ==> {Patient Test Destination (Country).country}
Flight Info: {Flight Number 1} - {Flight Date 1}
Passport No: {Passport Number}
Name on Passport: {Name on Passport}

You can also use styling in Conditional Rules.

[MichaelG]

Great @JulianKirkness that it can be done!!

I assume you paste it in the Equation Editor?

It doesn’t work…?

[MichaelG]

Ok, now it does. Fantastic!! thanks @JulianKirkness !

@JulianKirkness gave me more help on styling Text Formula with this example for color and text size:

<span style="font-size:20px;color:red;">{DOB}</span>

and the italic is with <i>text</i>

Very useful in my use-cases!!

[Jessie]

View Link Styles coming soon!

Hey everyone , we’ve wrapped up development on view links! Here to share some details about what to expect with this feature.

Release date

We’re hoping to release this in mid to late December. Development is complete and we’re now testing and finalizing release materials. We’ll update this topic again when we have an exact date.

Edit 1/21/22: There have been some unforeseen delays with the release of this feature. We are still planning on releasing view link styles and the other live app design updates in the near future. Thank you for your continued interest and patience!

Custom code impact

This feature will not include any breaking changes. We’re including a “text” style that is the equivalent of the current text link. The markup will remain the same, including the existing classes like .kn-text-link. We are adding some new classes for these new links, like .knViewLink.

New apps will look different, with the following defaults for these settings:

• Style: fill
• Size: medium
• Fill color: #e7e7e7

We may eventually add an account level option that lets you set the defaults for new apps.

Final settings

From the Live App Design area of your App Settings, you’ll now see a new section called “View Links” where you can globally set the style of links throughout your app. There are three styles [Fill, Outline, Text] each with a subset of options, and and you can separately control three different link types: page links, delete links and action links.

What’s next

Right now these settings control the links for every view. Because table views look so different than list/detail views, we’re planning to add separate options for both.

We also plan to add options to override link settings 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. For now, you can change the icon and text color with display rules, but further control at a view input level will still require customization.

Your feedback

Thank you for those of you who provided feedback on this feature! While the options here may not cover every customization you’ve shared, we believe that these design options represent the best start for everyone to create modern looking sites with less effort. With that said, the process isn’t over! Once this is released we’ll continue to ask for your feedback to inform future iterations.

[CarlHolmes]

Hey @Jessie - I was thinking about this today and wondered how things were coming along

The ability to set at the app level and then tweak per view is very welcome and will save quite a few clicks

Very much looking forward to this feature being launched.

[JulianKirkness]

I have similar comments about this as I do for menu styles - I think there is a definite need to be able to have several colours for buttons - and I don’t just mean by type. For example, there may be a few different pop up edit forms accessed from a table an I would need these to be differentiated by colour - same with Action Links, etc.

In my view it would probably be better to implement the full features for these rather than introducing a partial solution which would then mean that we users would have to re-visit apps and change them when the full feature set is available.

[Jessie]

Hi @JulianKirkness - thanks for following up here with those thoughts as well. View and input level overrides are being worked out, as we totally understand that the global settings will not meet all of the needs outlined here by all of you!

This was part of our development plan to release the feature in stages, and that may mean that the value is not yet unlocked for you. If that’s the case, please stay tuned for a new topic where we’ll discuss those overrides, where we’ll especially appreciate your feedback.

[Yoshiaki]

amazing, i never though of this!

[Jessie]

Hi everyone - we are excited to let you know that View Link Styles has been released! We hope this can make your life easier with a little less custom code to work through.

You can now update the style of page links, action links and delete links by customizing the formatting, color, border, size, text and icons.

For further documentation, refer to our knowledge base and our dev docs. And be sure to continue following the parent topic, 📣 It's time for an improved live app!, for more design setting updates including upcoming conversations around view level overrides and menu design settings.

Thank you for your patience as we worked through some delays and the final details to get this functionality into your hands. It paves the way for more design setting updates to come that we’re excited to share with all of you.

[MichaelG]

Excellent!!

…and soon “view level overrides and menu design settings” fantastic!

Go Knack Team!!