0

As per below link we can not add more than 510 characters in helptext. I have a requirement where I want to add more than 1000 character in helptext of Type field field on Account.

So I have decided to use inline VF page which calls LWC that display Type field with customized helptext which has more than 1000 character.

https://trailblazer.salesforce.com/ideaView?id=08730000000BpE1AAK

Code that I have written:

Controller:

public class CurrentRecordIdController {
    public String accountID {get;set;}
    public CurrentRecordIdController(ApexPages.StandardController controller) {
    accountID  = ApexPages.CurrentPage().getparameters().get('id');
    system.debug('Current Record ID is:'+accountID);
    }
}

Inline VF:

<apex:page standardController="Account" extensions="CurrentRecordIdController" lightningStylesheets="true">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<apex:slds />
<style>
    .modal {
        display: none;
    }
</style>
<apex:includeLightning />
    <div id="lightning" />
    <script>
        $Lightning.use("c:displayHelpTextApp", function () {
            $Lightning.createComponent("c:displayCustomHelpTextonAccount", {
                accountID: '{!accountID}'
            },
                "lightning",
                function (cmp) {
                   
                }
            );
        });
    </script>
</apex:page>

Lightning App:

<aura:application extends="ltng:outApp">
    <aura:dependency resource="DisplayCustomHelpTextonAccount" />
</aura:application> 

LWC:

<template>
    <lightning-record-view-form record-id={accountID} object-api-name="Account" density="Comfy">
        <lightning-layout class="slds-wrap" multiple-rows="true">
            <lightning-layout-item class="slds-size_4-of-12">
                <lightning-output-field field-name="Type">
                </lightning-output-field>
            </lightning-layout-item>
            <lightning-layout-item class="slds-size_1-of-12">
                <lightning-button-icon size="small" icon-name="utility:info"
                   variant="bare" tooltip="Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
                   Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
                   Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
                   Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
                   Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
                   Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
                   Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
                   Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
                   "
                  ></lightning-button-icon>
                    
            </lightning-layout-item>
        </lightning-layout>
    </lightning-record-view-form>
    
</template>

LWC JS Code:

import {
    LightningElement,
    api,
    track,
    wire
} from 'lwc';
import {
    getRecord,
    getFieldValue
} from 'lightning/uiRecordApi';
import Account_Type from '@salesforce/schema/Account.Type';
const fields = [Account_Type];
export default class DisplayCustomHelpTextonAccount extends LightningElement {
    @api accountID;
    @wire(getRecord, {
        recordId: '$accountID',
        fields
    })
    AccountExtension;

    get AccountType() {
        return getFieldValue(this.AccountExtension.data, Account_Type);
    }
}

When I add inline VF page to page layout, it does not display full content of tooltip. enter image description here

If I increase height of inline VF page on page layout then it display full content.

enter image description here

If I use alternative-text tag as per below link then it display correctly without adjusting height of inline VF page. but problem of using alternative text is I could not format the content that I want. e.g. I could not change background color to blue or even use bold or other HTML tags to format the content in alternative text.

https://developer.salesforce.com/docs/component-library/bundle/lightning-button-icon/example

enter image description here

I don't want to increase height of inline VF on page layout. Instead I am looking for a solution where I want to see tooltip content outside inline VF page so that I don't need to increase height of inline VF.

If showing custom tooltip outside inline VF page is not possible then can someone please suggest what different approach I should try to solve the challenge.

Can someone please help me here?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.