My first AppExchange listing

RecordLock with Inline Messaging! was officially added to the AppExchange today. This is my first app released to Salesforce.com's AppExchage...mostly just to figure out the process for future apps.



It is a simple app that allows a user to lock any record in Salesforce.com and display an inline message with a custom error.

Here is the link to the AppExchange listing:

https://www.salesforce.com/appexchange/detail_overview.jsp?id=a0330000005L38LAAS

Here is a link to a quick video overview:

http://demandchainsystems.com/blog/appExchange/Index.html

Enjoy!

Populate simple Visualforce table

The following code demonstrates the key concepts in creating a custom controller and linking it to a Visualforce page to return a set of data.

Custom Controller:

public class mySecondController {

 /// Create a list
 /// <OBJECT_NAME>
 List<TIDev__Project_Requirements__c> rqs;

 /// getReq() - Reffer to the list in the
 /// visualforce page with "Req" minus the "get" from
 /// controller name.
 public List<TIDev__Project_Requirements__c> getReq() {

  /// Get the data for the list
  rqs = [select id, TIDev__Requirement__c, TIDev__Due_Date__c, TIDev__Assigned_to__c from TIDev__Project_Requirements__c  Where TIDev__Object__c = 'Account'];
  return  rqs;
 }
}

The custom controller is simply a class with the "get" method invoked. In our example it is called "getReq()". This method quries Salesforce.com for a set of records and returns it to the Visualforce page in a List. The Visualforce page will be able to access this list by referencing the the name of the method minus the "get". So in our example it would be "Req".

Visualforce Page:

<apex:page showHeader="false" sidebar="false" controller='mySecondController'>
 <apex:pageBlock title="Requirements" id="tblId">
  <apex:dataTable value="{!Req}" var="requirements" cellPadding="4" border="1">
   <apex:column>
    <apex:facet name="header">Account Requirement</apex:facet>
    <apex:outputField value="{!requirements.TIDev__Requirement__c}"/>
   </apex:column>
   <apex:column>
    <apex:facet name="header">Assigned to</apex:facet>
    <apex:outputField value="{!requirements.TIDev__Assigned_to__c}"/>
   </apex:column>
   <apex:column>
    <apex:facet name="header">Due Date</apex:facet>
    <apex:outputField value="{!requirements.TIDev__Due_Date__c}"/>
   </apex:column>
  </apex:dataTable>
 </apex:pageBlock>
</apex:page>

The first step in your Visualforce page is to link that page to the custom controller you created. This is done with the "controller" tag in the tag.

Next the List is referenced in the with 'value="{!Req}"'. The data in that list is assigned to the the variable "requirements" and then referenced in the data table using standard Salesforce.com dot notation "{!requirements.TIDev__Requirement__c}".

Update inline s-control height dynamically

Salesforce.com recently released the functionality allowing us to place s-controls directly on page layouts just like any other standard or custom fields.

Having the ability to embed s-controls on a page layout allows us to add some pretty cool functionality to the standard page layouts (Charts, graphs, images, behind the scenes business logic, etc). Something that was severely lacking previously.

Part of the process of adding the s-control to the page layout is defining the height of that s-control. Which is really the height setting of the Iframe that the s-control is loaded into. If you do not specify a height then it is defaulted to 200px.




But what if your s-control should be different height based on different factors? Lets refer back to our previous post "Use Google charts to add visual elements to Salesforce.com data". In this post we showed how you could roll up unit sales information from a related list into a Google Chart and then display that in an inline s-control at the top of a page layout which is 150px high.



This is great if the account has unit sales, but what if there is no unit sales for that account? Then the charts would just be blank.



To save real-estate we can dynamically set the s-control height from within and if there is no unit sales to display then shrink the height to 25px and display a simple message.

"There are no Unit Sales for this account to display"

So how do you dynamically control an s-control's height from within? It is actually very simple. To completely understand lets walk through how the s-control is rendered on the page. As I stated earlier when the s-control is loaded it is actually pulled into an Iframe on the page. The name and id tag of this Iframe are the s-control's Id.

<Iframe height="200px" id="{!SControl.Id}" Name="{!SControl.Name}>

So all we have to do is adjust the Iframe's height based on weather unit sales are present. Below is the sample code to accomplish this. This code assumes that the "unitSales" variable has already been determined.

if(unitSales = 0) {

var hgt = 25;

/// Display no Unit Sales message

} else {

var hgt = 150;

// Display graphs

}


/// Get the current Iframe and store in an object
var sframe=top.document.getElementById(window.name);

// Set the height to the passed value.
sframe.style.height= hgt + "px";

Using the last lines of this code you can dynamically adjust the height of any inline s-control you display on your page.