Forum

Thread tagged as: Discussion

Advice on building a features table that's editable by the user

I need to build a table like this: https://cl.ly/0j2z3N2E020d

The user will ideally be able to add rows and choose wether or not a feature is available using a 'check' icon.

I understand the rows, I can use a repeater here, but what would be the best way to give the user the ability to add a 'check' icon?

Also, some options have tooltips, would I be able to handle them via Perch as well?
Danny Turley

Danny Turley 0 points

  • 4 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

4 years ago

Start with the HTML that you need, then add Perch tags to turn that into a template. All of what you describe is possible.
Danny Turley

Danny Turley 0 points

4 years ago

I guess the tooltips and ✅ are what's stumping me. How would the user add those via Perch if say, I'm using FontAwesome for the icons? I imagined each table cell would be an input field in which they could add: "✅", "X", "some text". It's food to know this is possible :)
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

It's up to you, really. You could use a checkbox, or a select box, or a set of radios - whatever makes sense to your editors.
Danny Turley

Danny Turley 0 points

4 years ago

Here's how I ended up doing this:

<p class="m-b-0">
<perch:content id="course_time" type="select" label="Available" options="yes,no" allowempty="false" required="true" />              
</p>

var replaced = $(".divTableCell p").html().replace('yes','<i class="fa fa-check text-complete" aria-hidden="true"></i>');
$(".divTableCell p").html(replaced);

var replaced = $(".divTableCell p").html().replace('no','-');
$(".divTableCell p").html(replaced);
Jonathan Elliman

Jonathan Elliman 27 points

4 years ago

Hi Danny

I'm curious as to why would you need to resort to Javascript to do this? Just output the html that generates the font awesome icon you want using <perch:if> on the condition set by the select fieldtype. The user doesn't have to see the tick from inside the control panel do they?

Ideally you only want work in Perch once you've already sorted all this out in html and css. That's the whole beauty of Perch and I think it will make your life a lot easier separating the two processes out.