Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Frederic_DFrederic_D 

Embedded Custom SControl - Huge white space

Hello all:
I created a custom sControl and placed it in the opportunity section.  This SControl populates all the Opportunity's Account contacts in a drop-down list.  Anyways, it's simple and not a lot of HTML to display.
When i add that SControl to the page layout, it adds a lot of white space below the actual SControl and it does not look good at all!
Any thoughts on how i can get rid of that white space?
Thanks for your replies!
Frederic
rockchick322004rockchick322004
The display properties for the sControl on the page layout can be changed for a better fit.  If you are familiar with the other page layout item properties, it works the same way -- double-click on the sControl in the page layout editor (once you've added it to the page) and change the display properties there (height & width, scrollbars, and label).
Frederic_DFrederic_D
Thank you very much for your reply.  It's now fixed!
BritishBoyinDCBritishBoyinDC
It is also possible to dynamically change the height of an s-control (e.g. if you are returning a different number of rows each time. Something like this works within the s-control:

function resizeframe(cheight)
{
sframe=top.document.getElementById("01N500000000Xhb");
sframe.style.height=cheight+"px";
}

Where '01N500000000Xhb' = id of the s-control, and cheight is a number you pass into the function
Always ThinkinAlways Thinkin
Thanks for posting the question and the reply! I thought I just had to live with the space and I was finding creative ways to fill it with moderately useful information (confirmation messages, error message, advice on why the error was thrown). Now I can just shrink it down to size!
steph1sourcesteph1source
I have been trying to figure out how I can get my section to dynamically size based on number of rows returned. I guess I need this function? Where would I call it from?
BritishBoyinDCBritishBoyinDC
If you are using a fairly standard s-control function to retrieve the data and then display the results in some form of HTML table, you can use the normal for...next counter at the end of the loop:

Code:
while (true) {
if (result.size > 0) {
for (var i=0; i<records.length; i++) {
var account = records[i];
...
Build your HTML
...

document.body.innerHTML = sb.toString();
// Then call resize function based on the final number of rows that were returned
resizeframe( (i * 30)+30);

 
steph1sourcesteph1source

thanks I kind of figured out that I would need to throw the number of records retrieved in there but was not sure at one point to call the function. so i tried just throwing in a number and will figure out how to get the number in a minute..but I got this error when just trying to put in a number:

TypeError: sframe has no properties

Here is my code..any ideas?

Code:
sforce.connection.query("SELECT Id, Name, StageName, Amount, CloseDate FROM Opportunity WHERE AccountId = '{!Account.Id}' AND IsClosed = false", callback);
}

function displayResult(result) {


var sb = new sforce.StringBuffer();
var qr = new sforce.QueryResultIterator(result);

sb.append("<center><table width=100% class='list' border='0' cellspacing='0' cellpadding='0'>");
sb.append("<tr class='headerRow'>");
sb.append("<th align=left nowrap width=60%>Opportunity Name</th>");
sb.append("<th nowrap width=45%><center>Stage</th>");
sb.append("<th width=10px></th>");
sb.append("</tr><tr><td colspan=5>");
sb.append("<DIV style=\"height:70px; overflow:auto;\"><table width=100% class='list' border='0' cellspacing='0' cellpadding='0'> ");




while(qr.hasNext())
{ var oppty = qr.next();
sb.append("<tr onmouseover=hiOn(this) onmouseout=hiOff(this)>");
sb.append("</td><td width=50%><a href='/"+oppty.Id+"' target=_top>").append(oppty.Name).append("</a>");
sb.append("</td><td width=45%><center>").append(oppty.StageName);
sb.append("</td></tr>");

}


sb.append("</table></div></table></center>");
document.getElementById("OpportunitiesTable").innerHTML = sb.toString();
resizeframe("30")
}

function resizeframe(cheight)
{

sframe=top.document.getElementById("01N500000000Xhb");

sframe.style.height=cheight+"px";
}


 

 
BritishBoyinDCBritishBoyinDC
Trying removing the quotes - so instead of resizeframe("30"), use
resizeframe(30)
steph1sourcesteph1source
actually i removed them and am still getting the same error:
 
typeError: sframe has no properties
BritishBoyinDCBritishBoyinDC
Not sure - but here's some code from my dev environment, so you can paste it into an s-control, add it to an inline section on the page. The formatting/styles need some work, but hopefully you can use this as a shell to build the core HTML for the other fields etc.

You just need to change this line to use the SFDC Id of the s-control in your environment:
sframe=top.document.getElementById("01N30000000DiwU");

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<link href="/dCSS/Theme2/default/common.css" type="text/css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet">
<link href="/dCSS/Theme2/default/custom.css" type="text/css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet">
<link href="/dCSS/Theme2/default/setup.css" type="text/css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet">
<link href="/css/assistive.css" type="text/css" media="aural,braille,embossed" rel="stylesheet">

<head>
<script src="/soap/ajax/10.0/connection.js"></script>
<script>

function resizeframe(cheight){
sframe=top.document.getElementById("01N30000000DiwU");
sframe.style.height=cheight+"px";
}

function initPage() {
resizeframe(30);
var accountId = "{!Account.Id}";
var result = sforce.connection.query("SELECT Id, Name, StageName, Amount, CloseDate FROM Opportunity WHERE AccountId = '" + accountId + "' AND IsClosed = false");


records = result.getArray("records");
var sb = new sforce.StringBuffer();

sb.append("<div class='bPageBlock secondaryPalette'");
sb.append("<div class='pbHeader'>");

sb.append("<div class='pbBody'>");
sb.append("<table class='detailList' cellpadding='0' cellspacing='0' border='0'>");
sb.append("<tr class='headerRow'>");
sb.append("<th class='' scope='col'>Opty Name</th>");
sb.append("<th class='' scope='col' >Stage</th>");
sb.append("</tr>");

while (true) {
if (result.size > 0) {
for (var i=0; i<records.length; i++) {
var accountop = records[i];
sb.append("<tr class='dataRow even last first'>");

sb.append("<td>");
sb.append(accountop.Name);
sb.append("</td><td>").append(accountop.StageName);
sb.append("</td></tr>");
}
}
if (result.done == "true") {
break;
} else {
result = sforce.connection.queryMore(result.queryLocator);
}
}
sb.append("</table>");
sb.append("</div></div><div class='pbFooter secondaryPalette'><div class='bg'/></div></div>");
document.body.innerHTML = sb.toString();
resizeframe( (i * 30)+20);
}


</script>
</head>

<body onload="initPage();">
</body>

</html>