Add Salesforce Table on WordPress with Detail Links

You can add the below code along with Sawfish table shortcode to show any Salesforce object on WordPress.

The user can click on any row in the table to open a page with more field info. This is great if you want to link to a specific record without displaying all of the fields.

Here’s how the page will look like: Table with Detail Link

<script type="text/javascript">
window.onload=function(){
jQuery(document).on('click', '.sforc-row', function () {
jQuery("<a href='"+"detail-page/?sId="+jQuery(this).attr('data-sforclink')+"' target='_blank'></a>")[0].click();
});
};
</script>


<style>
.sforc-row{
cursor: pointer;
}
li.active > a.page {
    color: black;
}
</style>

Upon clicking the link a new page opens that has the record ID in the URL.
eg: https://sfplugin.com/blog/detail-page/?sId=0030K00001u7dSNQAY

You can design this page using the Sawfish Section shortcode.

[sectionsforce o="Contact" by="Id" n="10" filter="Id={!sId} AND Name != null"]  
<br>Record ID: {!Id} <br>

<h2>Fist Name: {!Name} <br> <br>State: {!MailingState} <br>  <br>Country: {!MailingCountry} <br>  </h2>

{!CreatedDate}
{!BioA__c}

{!Image__c}

<input type="hidden" value="{!Id}" />


<span class="optional-section">
{!MailingCity}
</span>

<script type="text/javascript">
if('{!LeadSource}' !== 'Other')
jQuery('.optional-section').hide();
</script>

<a href="update-form/?cId={!Id}">Update Record Info</a>
[/sectionsforce]

<h4>Related Languages</h4>

 [showsforce fields="Name,Id" o="Language__c" filter="PrimaryContact__c = {!sId}" by="Id" n="10" search="off"]