Live App: View Link Styles

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:
fill-sm

And here’s what the outline options look like:
outline-sm

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.

3 Likes

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!

2 Likes

What @JulianKirkness said :laughing: - 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 :rocket:

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”. :man_shrugging:

This news is AWESOME!! so excited…:grin:

image

1 Like

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

Live:

3 Likes

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

2 Likes

WONDERFUL!!! :smiley:

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.

1 Like

yes, very important. Keep it simple.

2 Likes

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:
image

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

2 Likes

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

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.

3 Likes

Great @JulianKirkness that it can be done!!

I assume you paste it in the Equation Editor?

It doesn’t work…?


image

Ok, now it does. Fantastic!! :clap::clap::clap::hugs: thanks @JulianKirkness !

image

@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!!

image

2 Likes