0

i have list of values to display.The requirement is if the length of value greater than 10,the remaining characters should be removed and add "..." to end .And on hovering the trimmed value ,the full value should be shown.

apex code

public static List<opportunityRoles> getOppRoles(String oppId){
        Opportunity oppObj = [select id, Roles__c from Opportunity where id = : OppId limit 1];
        List<OpportunityRoles> oppRoleList = new List<OpportunityRoles>() ;
            if(oppObj != null && oppObj.Roles__c != null){
                for(String eachValue : oppObj.Roles__c.split(';')){                 
                        OpportunityRoles oppRL = new OpportunityRoles();
                        eachValue = eachValue.trim(); 
                        oppRL.rlName = eachValue;  
                        oppRoleList.add(oppRL);                                                
                }
                oppRoleList.sort();
            } 
            else{
                return null;
            }
        return oppRoleList;
    }

The list contains value like {rlName: 'Value1'}{rlName :'Value2'} etc.

Could someone help me with this and also on hover text?

1

1 Answer 1

2

You can use the title attribute in your HTML code like this -
title="fullvalue"

Create a list of objects to store trimmed value and full value and then you can refer to that variable in your HTML. For example -

this.OppRoleList.push({trimmed:trimmedValue, full: fullValue})

The above example is just for reference. You have to modify based on your requirements.

Or you can add create one more variable in your apex wrapper to store trimmed value.

And use this modified HTML code -

<template>           
    <template if:true={oppRoleList} for:each={oppRoleList} for:item="rlSet" >        
            <div key={rlSet.rlName} title={rlSet.Name} class="values">                                       
                {rlSet.rlTruncatedValue}                               
            </div>      
    </template>
</template>

You can also use CSS for truncation. But you need truncation after 10 characters, so you can modify your apex code something like this -

OpportunityRoles oppRL = new OpportunityRoles();
eachValue = eachValue.trim(); 
oppRL.rlName = eachValue;  
oppRL.rlTruncatedValue = eachValue.length() > 10 ? eachValue.substring(0,10) + '--' : eachValue;

I cannot write complete code for you as I want you to put in some efforts now. I have given you logic. Now you need to modify your apex wrapper and method little bit.

5
  • If you will put in a little effort based on my answer, you will achieve the desired output. But if you need more help, please putHTML code also as I don't know what you have done in HTML. Also, put Apex code if possible. Nov 4, 2022 at 12:34
  • Can you also provide the error screenshot? Nov 4, 2022 at 17:40
  • And you can modify your wrapper and add truncated value in that wrapper only. Nov 4, 2022 at 17:45
  • @MaryJohn I have edited my answer and provided most of the things. Now you need to adjust your code a little bit and incorporate these changes. I hope it helps. Nov 4, 2022 at 18:02
  • Hi @Gaurav Suthar Thank you !
    – user124380
    Nov 4, 2022 at 19:09

You must log in to answer this question.