What is the Lightning Component equivalent for Site.BaseUrl?

Question

On Visualforce pages we were able to use {!$Site.BaseUrl} ([A global merge field type to use when referencing information about the current Force.com site][1]) to get the base url, so it was easier to build links to other parts of the system.

This is particularly useful when working with communities, since sometimes you want your community to have a specific name on the url, like company.my.salesforce.com/communityname/000000000000000.

I'm yet to find an equivalent for the Lightning Framework. Maybe it doesn't exist because page urls are different on LEX, but when using LCs on visualforce pages while on Salesforce Classic, this could save some time.

Is there an equivalent for use on Lightning Components?

Answer 1

It seems that for now there is no equivalent to Site.BaseUrl. So I'm going to share what I've used to circumvent this:

On the component.cmp:

<aura:attribute name="baseUrl" type="String" default=""></aura:attribute>
<aura:attribute name="theme_ui" type="String" default=""></aura:attribute>

On helper.js:

getBaseUrl : function (component) {
  var action = component.get('c.getBaseUrl')
  action.setCallback(this, function (response) {
    var state = response.getState()
    if (component.isValid() && state === 'SUCCESS') {
      var result = response.getReturnValue()
      component.set('v.baseUrl', result)
    }
  })
  $A.enqueueAction(action)
},
getUIDisplayed : function (component) {
  var action = component.get('c.getUIThemeDescription')
  action.setCallback(this, function (response) {
    var state = response.getState()
    if (component.isValid() && state === 'SUCCESS') {
      var result = response.getReturnValue()
      component.set('v.theme_ui', result)
    }
  })
  $A.enqueueAction(action)
},

On the server-side:

@AuraEnabled
public static String getBaseUrl () {
    if (Network.getNetworkId() != null) {
        return [SELECT Id, UrlPathPrefix FROM Network WHERE Id = :Network.getNetworkId()].UrlPathPrefix;
    }
    return '';
}

@AuraEnabled
public static String getUIThemeDescription() {
    return UserInfo.getUiThemeDisplayed();
}

And where I need to make the redirect, I've used this:

if (component.get('v.theme_ui') === 'Theme3') {
  // salesforce classic
  window.location.href = component.get('v.baseUrl') + '/' + result
} else {
  // lightning experience
  sforce.one.navigateToSObject(result)
}

Answer 2

If anyone comes here to find the JS only solution to this, then the following snippet of code could be a good addition in your already made component.

Just create an attribute to hold the base URL value.

 <aura:attribute name="cbaseURL" type="String"/>

And these lines of code into your JS controller.

 var urlString = window.location.href;
 var baseURL = urlString.substring(0, urlString.indexOf("/s"));
 component.set("v.cbaseURL", baseURL);

I used "/s" as the breaking point for my url you can provide any string according to your requirement.

Answer 3

Our use case is like this: we have multiple communities with shared footer- means we can use same footer component in all communities. But problem arises with relative URLs- how to make it working for each community... For example- 'News and Alert' link redirects to https://communityOne/newsandlaert wherease same link for another community is https://communityTwo/newsandlaert

The above solution works as expected for me. But I don't want to make a server side call (just for good page performance). So, I came up with solution by using custom labels.

Approach:

1. For each community, there is custom label to hold the base URL of each community.
2. There is a design attribute in this Footer component to pass the name of current community's related custom label.
3. Get the custom label's value in controller.js dynamically.
4. When drag and drop the component, enter custom label for current community/org in design attribute.

CommunityFooter.cmp

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
  <aura:attribute name="currentCommunityBaseURLFROMLabel" type="String" default="My_Community_Base_URL_Label"/> 
  <!-- custom label name is "My_Community_Base_URL_Label" -->
  <aura:attribute name="currentCommunityBaseURL" type="String"/>
  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 
  <a href="{!v.currentCommunityBaseURL+'/news-alert'}"
</aura:component>

CommunityFooter.design

<design:component >
     <design:attribute name="currentCommunityBaseURL" label="Current Community Base URL's Label Name" description="" />
</design:component >

CommunityFooter.js

doInit : function(component, event, helper) {
    var keysite ="$Label.c."+component.get("v.currentCommunityBaseURLFROMLabel"); //= component.get("v.currentCommunityBaseURL");
    var sitePrefix = $A.get(keysite);
    component.set("v.currentCommunityBaseURL", sitePrefix);
    console.log($A.get("$Label.c.currentCommunityBaseURLFROMLabel")+ 'Key...'+sitePrefix);
}