So essentially, a component that allows other components to be dragged in or a component with 4 rich text areas to allow the admin to add content.
Is this something that is possible with lightning components or visualforce? I looked everywhere and don't even know if its possible.
Hi Coraliz,
There was a better reference.
https://developer.salesforce.com/forums#!/feedtype=SINGLE_QUESTION_DETAIL&dc=Developer_Forums&criteria=OPENQUESTIONS&id=9060G0000005lljQAA (https://developer.salesforce.com/forums#!/feedtype=SINGLE_QUESTION_DETAIL&dc=Developer_Forums&criteria=OPENQUESTIONS&id=9060G0000005lljQAA)Hi Coraliz,
I made a custom component.
The contents of the rich text are described in the controller.component
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
<aura:handler name="init" value="{! this }" action="{! c.init }" />
<aura:attribute name="richtext1" type="String"/>
<aura:attribute name="richtext2" type="String"/>
<aura:attribute name="richtext3" type="String"/>
<aura:attribute name="richtext4" type="String"/>
<lightning:layout horizontalAlign="spread" multipleRows="true">
<lightning:layoutItem padding="around-xx-small" flexibility="grow" size="12" mediumDeviceSize="12" largeDeviceSize="12">
<div class="slds-box slds-box_xx-small slds-text-align_left slds-m-around_xx-small slds-theme_shade">
<lightning:layout verticalAlign="left" multipleRows="true">
<div class="slds-size_3-of-12 ">
<div class="slds-m-around_xx-small slds-theme_default">
<lightning:formattedRichText value="{!v.richtext1}"/>
</div>
</div>
<div class="slds-size_3-of-12 ">
<div class="slds-m-around_xx-small slds-theme_default">
<lightning:formattedRichText value="{!v.richtext2}"/>
</div>
</div>
<div class="slds-size_3-of-12 ">
<div class="slds-m-around_xx-small slds-theme_default">
<lightning:formattedRichText value="{!v.richtext3}"/>
</div>
</div>
<div class="slds-size_3-of-12 ">
<div class="slds-m-around_xx-small slds-theme_default">
<lightning:formattedRichText value="{!v.richtext4}"/>
</div>
</div>
</lightning:layout>
</div>
</lightning:layoutItem>
</lightning:layout>
</aura:component>
controller
({
init : function(component, event, helper) {
var content1 = "<h1>Hello!</h1>";
component.set("v.richtext1", content1);
var content2 = "<h1>Hello!</h1>";
component.set("v.richtext2", content2);
var content3 = "<h1>Hello!</h1>";
component.set("v.richtext3", content3);
var content4 = "<h1>Hello!</h1><br/> line breake";
component.set("v.richtext4", content4);
},
})
You mean a custom page template? There's no way of creating a separate component that you can drag into an existing template that can contain a grid with rich text areas? Hi Coraliz,
I don't think the existing template is divided into four at the top.
I think you have no choice but to display four rich text areas in the custom component.So after trying this, I see that this is creating a whole new template that will replace the homepage template. But what I need is just to create a section that will live within the existing homepage template. I did attempt to recreate the original template, and just add my 4 sections there, but it fell short. I don't know if using Lightning components instead will help me just pop a section on the existing template. Hi Coraliz, <aura:component implements="lightning:homeTemplate" access="global" >
<aura:attribute name="first" type="Aura.Component[]" />
<aura:attribute name="second" type="Aura.Component[]" />
<aura:attribute name="third" type="Aura.Component[]" />
<aura:attribute name="fourth" type="Aura.Component[]" />
<aura:attribute name="all" type="Aura.Component[]" />
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-4">
<span>{!v.first}</span>
</div>
<div class="slds-col slds-size_1-of-4">
<span>{!v.second}</span>
</div>
<div class="slds-col slds-size_1-of-4">
<span>{!v.third}</span>
</div>
<div class="slds-col slds-size_1-of-4">
<span>{!v.fourth}</span>
</div>
<div class="slds-col slds-size_4-of-4">
<span>{!v.all}</span>
</div>
</div>
</aura:component>
<design:component label="My Four column Page">
<flexipage:template>
<flexipage:region name="first" defaultWidth="SMALL">
<flexipage:formfactor type="MEDIUM" width="SMALL"/>
</flexipage:region>
<flexipage:region name="second" defaultWidth="SMALL">
<flexipage:formfactor type="MEDIUM" width="SMALL"/>
</flexipage:region>
<flexipage:region name="third" defaultWidth="SMALL">
<flexipage:formfactor type="MEDIUM" width="SMALL"/>
</flexipage:region>
<flexipage:region name="fourth" defaultWidth="SMALL">
<flexipage:formfactor type="MEDIUM" width="SMALL"/>
</flexipage:region>
<flexipage:region name="all" defaultWidth="SMALL">
<flexipage:formfactor type="MEDIUM" width="SMALL"/>
</flexipage:region>
</flexipage:template>
</design:component>
This is what I mean. A section with 4 columns that will live within the existing page layout. The admin should be able to edit the rich text when they edit the page in lightning app builder.
Hi Coraliz,
It seems that 3 columns are possible, so I think that 4 columns are also possible.
https://www.matchmyemail.com/blog/salesforce-help/reconfiguring-salesforce-lightning-page-layouts-to-increase-user-acceptance-and-adoption-3-column-page-layout/
