0

I try to create a component which has the possibility to change the URL, IMAGE-Link and DESCRIPTION in the right bar. For example at the standard component Report I can choose which report should be displayed. How can I add this option for custom components. I googled at lot but I didn't find something about this.

I created a custom template in lightning builder with a lot of fields like a tablet. Now I want to put in to each field the custom component with different content. My actual solution is to add for each field a component.

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    
<a href="http://www.google.com" onclick="http://www.google.com" target="_blank">
        <img src="https://mydomain--xxx--c.visualforce.com/resource/1234567891011/image2display?"/>  
        Description
</a> 
    
</aura:component>




({
    doSomething : function(component, event, helper) {
        console.log('Hey There .. the anchor was clicked');
        console.log(event) ;
        var href = event.srcElement.href;
        console.log(href);
        
    }
})

1 Answer 1

1

Aura Component Design Resources is the solution to your problem. Official SF documentation can be found here. Within your Aura component directory, you need to create a .design file and include the component attributes that you want to expose as design:attribute. So, your aura component could be as given below:

<aura:component implements="flexipage:availableForAllPageTypes" access="global">

    <aura:attribute name="url" type="String"/>
    <aura:attribute name="imagelink" type="String"/>
    <aura:attribute name="description" type="String"/>
    
    <a href="{!v.url}" target="_blank">
            <img src="{!v.imagelink}"/>  
            {!v.description}
    </a> 
    
</aura:component>

And, the design attributes (in .design file) could be defined as shown in the code snippet below:

<design:component label="<Component Label>">
    <design:attribute name="url" label="URL" description="Placeholder for the url value"/>
    <design:attribute name="imagelink" label="Image Link" description="Provide the image url here"/>
    <design:attribute name="description" label="Description" description="Brief overview of the link"/>
</design:component>

You may specify default values for the design attributes, make it as a picklist, specify form factor support etc. The component attributes of different instances of this component (in the same or different lightning pages) would get the value provided via the design attributes (in the properties pane within Lightning App Builder).

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .