Tag: Communities

Custom Content Layout Components for Communities

In this blog, I will show how to create a custom layout for community pages by using lightning components. To appear in Community Builder as a custom layout, a component must implement the forceCommunity:layout interface. Community Builder includes several ready-to-use layouts that define the content regions of your page, such as a two-column layout with a 2:1 ratio. However, if you need a layout that’s customized for your community, create a custom content layout component to use when building new pages in Community Builder. You can also update the content layout of the default pages that come with your community template.

  • The community should be enabled.
  • Make sure that community template has Builder option.

Mark your resources, such as a component, with access=”global” to make the resource usable outside of your own Org. For example, if you want a component to be usable in an installed package or by a Lightning App Builder user or a Community Builder user in another org.

1. Create a Component

To appear in the New Page and the Change Layout dialog boxes in Community Builder, a content layout component must implement the forceCommunity:layout interface. Here is the sample code that we will use into the community builder

Here is the CSS

You can include an SVG resource in your component bundle to define a custom icon for the content layout component when it appears in the Community Builder. Use Below SVG code to show the icon on the community.

 

2. Using Custom Layout In Communities

Open Community Builder from the Community settings page and Click on the Add a New Page as shown below

Select Standard page

You can view the custom layout you created. Select the layout for the page. Click on Next
Enter the name for the page and create a page . after creating the page you can able to see the layout of the screen as shown below.

Custom Profile Menu Components for Communities

Here we will see how to customize the profile menu in lightning communities.to the customize the profile menu in communities you need to use forceCommunity:profileMenuInterface interface in your custom component. Add the forceCommunity:profileMenuInterface interface to a Lightning component to allow it to be used as a custom profile menu component for the Customer Service community template. After you create a custom profile menu component, admins can select it in Community Builder in Settings | Theme to replace the template’s standard Profile Header component. Here is the sample lightning component but this component is just printing the selected value from the profile menu to the browser console.

 

Adding the Component to Profile Menu 

Now go to the communities from the and edit the community with a builder.

Then select the settings

The click on the theme and configure the profile menu as shown below.

 

After configuring your profile page looks as shown below

Community Custom Theme Layout Using Lightning Components

Theme layouts and theme layout components combine to give you granular control of the appearance and structure of each page in your community. Customize the layout’s header and footer to match your company’s style, configure theme layout properties, or use a custom search bar and user profile menu. Then use theme layouts to assign theme layout components to individual pages allowing you to quickly change layouts from one central location. Whether you’re a consulting partner or an ISV, or you simply want to revamp your own community, custom theme layouts make it easy to rebrand. A theme layout component is the top-level layout for the template pages (1) in your community. Theme layout components are organized and applied to your pages through theme layouts. Theme layout components include the common header and footer (2), and often include navigation, search, and the user profile menu. In contrast, the content layout (3) defines the content regions of your pages, such as a two-column layout.

A theme layout categorizes your community pages that share the same theme layout component. You can assign a theme layout component to any existing theme layout. Then you apply the theme layout —and thereby the theme layout component—in the page’s properties.

1.Create a Componet 

In order to use the custome component in  theme layout the component must implement the forceCommunity:themeLayout interface to appear in Community Builder in the Settings | Theme area.Explicitly declare {!v.body} in your code to ensure that your theme layout includes the content layout. Add {!v.body} wherever you want the page’s contents to appear within the theme layout.Add attributes declared as Aura.Component[] to include regions in the theme layout, which contain the page’s components. You can add components to the regions in your markup or leave regions open for users to drag-and-drop components into. Attributes declared as Aura.Component[] and included in your markup are rendered as open regions in the theme layout that users can add components to.

2. (Optinal )Design Resource 

You can expose theme layout properties in Community Builder by adding a design resource to your bundle.Define the theme properties in the design resource to expose the properties in the UI. This example adds a label for the Small Header theme layout along with two checkboxes.

3. Add a CSS Resource to Avoid Overlapping Issues

Add a CSS resource to your bundle to style the theme layout as needed, ideally using standard design tokens.To avoid overlapping issues with positioned elements, such as dialog boxes or hovers use this CSS

4. Configure in Communities

Now you will be able to use the theme in your communites and go to . In the Settings | Theme area, you add a custom theme layout as shown below .

Next, apply the My Custom theme layout in each page’s properties, which instantly applies the Small Header layout to each page.

 

As a result of the Custom theme layout you can page content is looks like below

Access Lightning Apps in Public Communities using ltng:allowGuestAccess Interface

Let us discuss here how to set up a Lightning Out dependency app to make it available to users without requiring them to authenticate with Salesforce. Add the ltng:allowGuestAccess interface to your Lightning Out dependency app to make it available to users without requiring them to authenticate with Salesforce.  A Lightning Out dependency app with the ltng:allowGuestAccess interface can be used with Lightning Components for Visualforce and with Lightning Out.

  • Using Lightning Components for Visualforce, you can add your Lightning app to a Visualforce page, and then use that page in Salesforce Tabs + Visualforce communities. Then you can allow public access to that page.
  • Using Lightning Out, you can deploy your Lightning app anywhere Lightning Out is supported—which is almost anywhere!

1.Create Lightning Component 

Now let us create a simple lightning component and controller that we will use it with guest access. In this component, we will get all the accounts and show them to the guest user.

Apex Class

Component 

2. Create a Lightning App 

Now create a Lightning app for public sites. we will be calling this lightning app from the visualforce page. Now your application needs to ltng:allowGuestAccess interface to your Lightning Out dependency app. Here is the lightning app.

 

3.Create a Community 

The ltng:allowGuestAccess interface is only usable in orgs that have Communities enabled, and your Lightning Out app is associated with all community endpoints that you’ve defined in your Org. When you add the ltng:allowGuestAccess interface to a Lightning app, the app is open to guest users and is available through every community in your org, whether that community is enabled for public access or not. You can’t prevent it from being accessible via community URLs, and you can’t make it available for some communities but not others.

4.Create a visualforce page

Now we will create a visualforce page that will be accessible by the guest user. here we will be using the  Salesforce Tabs + Visualforce communities with guest access.

With Lightning Out, we need to add the  <script> tag that references the library directly, using a community endpoint URL as shown below.

Add the JavaScript code to load and activate your Lightning app. This code is standard Lightning Out, with the important addition that you must use one of your org’s community URLs for the endpoint.

5. Add the page to the community 

Now go and add the visualforce page to the community and make sure you have set up guest user access so that we will be able to see this page without login into the system. You can able to see the page as shown below