Presenter Query

Liberty Create - Build Advice
1

Hi Folks,

I’m attempting to set up a presenter (very new to this) so that I can dynamically display a font-awesome icon in a field, depending on the displayable value.

So for instance, if the displayable value is ‘x’ then have a specific icon be displayed instead of ‘x’.

Has anyone created something similar? Any advice would be greatly appreciated.

Regards,

Shervin

2

Hi @s.vernon ,

Code Studio presenters uses Vue 3 as the framework and therefore you would need to work this in Vue, but this is very doable to be honest.

There are a few ways of achieving this, but I would use a computed property to determine which Icon to display, then dynamically applying the class based on this.

Firstly, extract the displayable value.

Then, your Computed property will determine which set of classes to display, based on the extracted displayable value (note, A, B and C are my example values here):

computed: {
  iconClass() {
    switch (your-field) {
      case 'A':
        return 'fa-solid fa-user';
      case 'B':
        return 'fa-solid fa-comment';
      case 'C':
        return 'fa-solid magnifying-glass';
      default:
        return '';
    }
  }
}

Your HTML will then be configured as such:

<i :class="iconClass"></i>

Hope this helps! :slight_smile:

3

Hi Ali,

Many thanks for your response :slight_smile:

I did eventually figure something out, although it seems a bit clumsy. I wanted to also apply some css depending on the displayable value.

export default {
		mounted: function() {
	 
	var newClass = this.selected
	const iconElements = document.querySelectorAll(".file-type");

	iconElements.forEach(element => {
    element.className = newClass; 

	if(element.className.includes("pdf")){
		element.classList.add("pdf");
	} else if (element.className.includes("word")){
	element.classList.add("word");
	} else if (element.className.includes("envelope")){
	element.classList.add("msg");
	} else if (element.className.includes("image")){
	element.classList.add("tif");
	} else if (element.className.includes("excel")){
	element.classList.add("xls");
	} else if (element.className.includes("zipper")){
	element.classList.add("zip");
	} else element.classList.add("unknown");
	
	});

    }
}

Regards

Shervin

4

Ah I see! It still does the job, though, which is good :slight_smile:

However, it is using vanilla JavaScript as opposed to binding in Vue, which would be more efficient and better.

Additionally, the method I gave you utilises FontAwesome (Pro version) which is an Icon library readily available for usage in all Liberty Create platforms. You can find all available icons here:

Hope this helps! :slight_smile:

5

That’s quite helpful, thanks Ali! :slight_smile:

1 Like