Salesforce Advanced: Visualforce Notifications Lightning Style

Lightning Component/Web Component can use build in technique to display toast message.
Visualforce page cannot use it, but still we can easily imitate this functionality with simply Javascript/CSS.

Following is Visual Component that used to display toast notifications in Visualforce Page.
It simply have empty div "snackbar" and JS code that set their text message + few css elements that display it with fade in/out.

I set some of the values as parameters to have different message if needed.

<apex:component access="global" controller="NotificationComponentController">
   <apex:attribute type="Integer" name="hideNotificationAfter" assignTo="{!hideAfter}" description="hide notification after X seconds" default="5000"/>
    <apex:attribute type="String" name="notificationLocation" assignTo="{!location}" description="location either top or bottom" default="top"/>
    <apex:attribute type="String" name="backgroundColor" assignTo="{!bgColor}" description="message background color" default="#706e6b"/>
    <apex:attribute type="String" name="fontColor" assignTo="{!fnColor}" description="message font color" default="#FFFFFF"/>
    <apex:attribute type="Integer" name="movementPrecentage" assignTo="{!mvmPrecentage}" description="precentage to move into the layout" default="17"/>
    
    <div id="snackbar">
        <div id="snakckbartext"></div>
        <a onclick="closeSnackbar();" class="closeNotification">&times;</a>    
    </div>
    
    
<script>
$j = jQuery.noConflict();

function closeSnackbar(){
    $j('#snackbar').removeClass('show');
}
function showNotificationVF(txt){
    $j('#snakckbartext').text(txt);
    $j('#snackbar').addClass('show');
    
    setTimeout(function(){     
        $j('#snackbar').removeClass('show');
    }, '{!hideNotificationAfter}');
}
</script>
<style>
#snackbar {
    visibility: hidden;
    {!location}: {!mvmPrecentage}%;
    align-items: center;
    position: fixed;
    color: {!fnColor};
    background: {!bgColor};
    font-weight: 300;
    border-radius: .25rem;
    margin: .5rem;
    padding: .75rem 3rem .75rem 1.5rem;
    min-width: 30rem;
    text-align: center;
    justify-content: flex-start;
    width: 50%;
    left: 25%;
    font-weight: bold;
    z-index: 999;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s ,fadeout 0.5s 2.5s;
  animation: fadein 0.5s;
}

@-webkit-keyframes fadein {
  from {{!location}: 0; opacity: 0;} 
  to {{!location}: {!mvmPrecentage}%; opacity: 1;}
}

@keyframes fadein {
  from {{!location}: 0; opacity: 0;}
  to {{!location}: {!mvmPrecentage}%; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {{!location}: {!mvmPrecentage}%; opacity: 1;} 
  to {{!location}: 0; opacity: 0;}
}

@keyframes fadeout {
  from {{!location}: {!mvmPrecentage}%; opacity: 1;}
  to {{!location}: 0; opacity: 0;}
}

.closeNotification {
    color: {!fnColor};
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 4%;
    top: 0;
}
</style>
</apex:component>

Notice that it have 3 parameters that assigned to controller variables.
The controller is must if you want to be able to set the parameters from the caller, otherwise the JS/CSS will always use the default values.

public class NotificationComponentController{

    public Integer hideAfter {get; set;}
    public String location {get; set;}
    public String bgColor {get; set;}
    public String fnColor {get; set;}
    public Integer mvmPrecentage {get; set;}
}

Finally, simple Visualforce page demo how to use it

<apex:page >

<apex:includeScript value="{!URLFOR($Resource.jquery_1_11_1_min)}" />
<c:NotificationComponent notificationLocation="top" hideNotificationAfter="3000" movementPrecentage="7"/>

<apex:form >
    <apex:sectionHeader title="Notification Example"/>

    <apex:pageBlock >
        <apex:pageBlockSection>
            <apex:pageBlockSectionItem>
                <apex:inputTextarea id="textAreaId"/>
                <apex:commandButton value="Click me" onclick="showNotification(); return false;"/>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>    


<script>
$j = jQuery.noConflict();

function showNotification(){
    var txt = $j("textarea[id*='textAreaId']").val();
    showNotificationVF(txt);
}
</script>

</apex:page>

Salesforce Advanced

Visualforce Notifications Lightning Style

No comments:

Post a Comment

Retire of Permission on Profiles