Static Side Bar

App Development
18

@intelligroup Sure! First set up your field in whatever table you want, it’s going to be a count field - and it’s counting records in a connected table.

For me, the count field was created in the Users table, and it counted the number of Notes (from a connected Notes tabled) that the User was assigned to.

On a page, create a HTML component and below I’ll post the foundation of the design.

The HTML for the field is going to contain the count field. For the example here I’ll just use the number 6 and a link to the Notes page. Here’s the code.

<a href="https://yourapp.com/notes"> Notes <span class="num flag">6</span></a>

By giving the span 2 classes - num and flag, you can style the num (the returned value of your count field) separately from the “badge”. For example, if you wanted to create different color badges for different purposes.

Here’s the CSS, styling the link a bit too.

a {
  color: #000;
  font-weight: 100;
  display: block;
  text-decoration: none;
  font-size: 18px;
}

.num {
  line-height: 0;
  border-radius: 3px;
  font-size: 14px;
  color: #fff;
  padding: 0px 5px;
}
.flag {
  background-color: #f35959;
}

Now you’ll just add whatever field you want in the element.

Here’s the result, you can play around with it - https://codepen.io/tyoung560/pen/yLOgdLp

1 Like