Oh my god. It's full of code!

Salesforce Siteforce user configurable ajax links

So I’ve been doing a big project recently, using the new Salesforce siteforce builder. For those who are unaware siteforce is basically a content management tool that allows regular non developer users to develop and manage websites, in theory anyway. Of course any website of significant complexity/usefulness is going to require a developer to at least make some CSS and get some templates in place for the end user. One of the biggest things the users would do is edit content and links. Always with the updating of links, I tell ya. Problem is siteforce links are all just regular HREF links. In this ajax powered age, who wants that? I mean we want fast loading, partial page reloads, ajax baby! So how do I let a non coding user create ajax links to fetch the content and inject it into the page? Simple, you let them make links as normal, and use some javascript to modify them.

1) User creates standard HREF link with HREF pointing to desired page.
2) Have some javascript modify the links at runtime to remove the HREF attribute, and replace with an onclick function
3) onclick function fetches the content that was found in the original HREF and injects it into the page where desired.

My implementation of this idea looks like this.

<script type="text/javascript">
$(document).ready(function(){
  
      $('.ajaxLink').each(function(index) {
        var linkTarget = $(this).attr('href');    
        $(this).attr('href','#')
        $(this).click(function(){
            loadContent(linkTarget,'news_content');
            return false;
        });        
    });    

    jQuery.ajaxSetup({
      beforeSend: function() {
         $('#loadingDiv').show()
      },
      complete: function(){
         $('#loadingDiv').hide()
      },
      
      error: function() { alert('Error loading page');},
      success: function() {}
    });
    
});

function loadContent(contentPath,contentTarget)
{

    console.log(contentPath + ' ' + contentTarget);
    $.get(contentPath, function(data) 
    {
        $('#'+contentTarget).fadeOut('fast',function(){
            $("#"+contentTarget).html(data);
            
            $("#"+contentTarget).fadeIn()
        })
    })    
}
</script>

and the HTML

            <style>
                #news_picker
                {
                    width:20%;
                    height:100%;
                    overflow:auto;
                    float:left;
                }
                
                #news_details
                {
                    width:79%;
                    height:100%;    
                    overflow:auto;
                    float:left;
                }
                #loadingDiv
                {
                    background-image:url(ajaxLoader.gif);
                    background-repeat:no-repeat;
                    background-position:center;
                    z-index:150;
                    display:none;
                }    
            </style>
            
            <div id="news_picker">
                <div class="listHeader">All of our news</div>
                
                <a href="news1.html" class="ajaxLink" >Ajax link override</a>
                
            </div>
            
            <div id="news_details">
                <div id="loadingDiv">Content Loading, Please Wait.</div>
                
                <div id="news_content"> I am news data</div>
                
            </div>

this will transform any link with a class of ‘ajaxLink’ and convert it from a regular link into an ajax loading link. Right now it is coded to push the fetched content into a div called ‘news_content’ (you could make this dynamic, or even per link by including some attribute in the link itself that tells the function where to put the fetched content). You may want to add special case handling for content other than text/html, such as detecting if the requested resource is an image, and wrap it in an img tag, etc. Anyway, hope this helps someone, I thought it was pretty cool to allow users to easily create Ajax links 😛

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s