CMS Development

jestlinbaum
Participant

Custom Module - Separate styles for an object in repeater

SOLVE

Hi!

I'm building a custom module that has a repeater field. In the repeater are a series of number fields for the user to enter numbers (as %). I want to use those numbers to make a pie chart. So for each number(%) I am setting variables to convert the % to degrees (like x of 360) like this:

 

{% set use_brny = 3.6 * item.recommendation.use_brny %}

 

I'm making the pie chart with something like this:

 

.piechart {
width: 200px;
height: 200px;
padding:30px;
border-radius: 50%;
background-image: conic-gradient(
pink 54deg,
lightblue 0 126deg,
purple 0 144deg,
blue 0
);
}

 

So I want to use the data from the repeater in the css:

 

.piechart {
width: 200px;
height: 200px;
padding:30px;
border-radius: 50%;
background-image: conic-gradient(
pink {{ use_brny }}deg,
lightblue 0 126deg,
purple 0 144deg,
blue 0
);
}

 

So the question is, is it possible to have the class .piechart css dynamically change based on the {% for item in ... %} loop?

 

 

 

0 Upvotes
1 Accepted solution
Anton
Solution
Thought Leader | Partner
Thought Leader | Partner

Custom Module - Separate styles for an object in repeater

SOLVE

Hi @jestlinbaum

yes it's possible but since you can't access loop-data from outside, you have to do it like this:

{% for item in module.recommendations %}
{% set use_brny = 3.6 * item.recommendation.use_brny %}

{% require_css %}
<style>
{% scope_css %}
.piechart.instance-{{loop.index}}{
width: 200px;
height: 200px;
padding:30px;
border-radius: 50%;
background-image: conic-gradient(
pink {{ use_brny }}deg,
lightblue 0 126deg,
purple 0 144deg,
blue 0
);
}
{% end_scope_css %}
</style>
{% end_require_css %}

<div class="piechart instance-{{loop.index}}"></div>
{% endfor %}

 

If you'd like to have your code to be more readable you can do it like this:

{% for item in module.recommendations %}
{% set use_brny = 3.6 * item.recommendation.use_brny %}

{% require_css %}
<style>
{% scope_css %}
.piechart.instance-{{loop.index}}{
width: 200px;
height: 200px;
padding:30px;
border-radius: 50%;
background-image: conic-gradient(
pink {{ use_brny }}deg,
lightblue 0 126deg,
purple 0 144deg,
blue 0
);
}
{% end_scope_css %}
</style>
{% end_require_css %}
{% endfor %}
...

{% for item in module.recommendations %}
<div class="piechart instance-{{loop.index}}"></div>
{% endfor %}

 

best, 

Anton

Anton Bujanowski Signature

View solution in original post

2 Replies 2
Anton
Solution
Thought Leader | Partner
Thought Leader | Partner

Custom Module - Separate styles for an object in repeater

SOLVE

Hi @jestlinbaum

yes it's possible but since you can't access loop-data from outside, you have to do it like this:

{% for item in module.recommendations %}
{% set use_brny = 3.6 * item.recommendation.use_brny %}

{% require_css %}
<style>
{% scope_css %}
.piechart.instance-{{loop.index}}{
width: 200px;
height: 200px;
padding:30px;
border-radius: 50%;
background-image: conic-gradient(
pink {{ use_brny }}deg,
lightblue 0 126deg,
purple 0 144deg,
blue 0
);
}
{% end_scope_css %}
</style>
{% end_require_css %}

<div class="piechart instance-{{loop.index}}"></div>
{% endfor %}

 

If you'd like to have your code to be more readable you can do it like this:

{% for item in module.recommendations %}
{% set use_brny = 3.6 * item.recommendation.use_brny %}

{% require_css %}
<style>
{% scope_css %}
.piechart.instance-{{loop.index}}{
width: 200px;
height: 200px;
padding:30px;
border-radius: 50%;
background-image: conic-gradient(
pink {{ use_brny }}deg,
lightblue 0 126deg,
purple 0 144deg,
blue 0
);
}
{% end_scope_css %}
</style>
{% end_require_css %}
{% endfor %}
...

{% for item in module.recommendations %}
<div class="piechart instance-{{loop.index}}"></div>
{% endfor %}

 

best, 

Anton

Anton Bujanowski Signature
jestlinbaum
Participant

Custom Module - Separate styles for an object in repeater

SOLVE

@Anton  Makes sense and works perfectly!! Thank you so much 👍

0 Upvotes