Can you update a class attribute from CMS data

Design help Custom code
1

Hi, I am trying to update a class attribute depending on the value of a certain CMS field present on the page.

I built a progress bar going from 0 to 100% with a number next to it. (See below.)
image

The CMS field is updated daily via a script which update the 'X%" to display the correct number but the visual of the progress bar is done manually by changing the width of the inside div to match the “X%”.

I now have several pages like this to update manually and will soon have more so I need to find a solution sooner rather than later.

Is there any way using custom code or something to link the “width:” attribute of my class to the value of the CMS field?

Thank you.

2

Lots of ways to do this.

The way I’ve always done it in the past is to setup a custom code embed with CSS or script, and embed that field in from the CMS. You have a lot of versatility there but it requires a bit of CSS/JS knowledge.

Since then Webflow’s added some very nice features that might work for you here, though I haven’t tested data-binding on them;

  • Custom styles. At the bottom of the style panel, you can add CSS attributes ( like width ) to your elements and you may be able to data bind it there, which keeps you entirely in the designer and using your existing elements.
  • If that doesn’t work, look at Custom elements. You can replace your inner DIV with a custom element that’s a DIV, and data-bind the width property.
3

Hi! thank you for the quick reply. I do have some limited knowledge is CSS/JS. I understand how you could change the class of the div using JS but I am not sure how I should access the CMS value i am looking for. (I don’t know how CMS works under the hood.)

As for custom styles, adding the width CSS attribute says it’s already being supported by basic attibute. ( See below)
image

I tried adding a custom element but I am unsure on how they works or how it differs from a normal div and i wasn’t able to find a way to data-bind the width property.

I think the solution would come from a little JS script but I basically need to find out how to access the CMS value.

Thank you.

4

With a custom element you can set whatever properties you like, and it supports data binding. Here I’ve added width and bound it.

image

With the Embed approach, you’d just drop an embed element inside of your collection page or collection list, and then you can use +Add Field in the top right of the code window. Your end construction will look something like this.

image