You need to sign in to do that
Don't have an account?
Eric Fortenberry
How to dynamically set outputPanel height to a % of the screen height
Hello, I have visualforce page with 3 columns and within each column there is one or mutliple pageBlocks that have either a chart or outputPanel. For the first column I have two pageBlocks that have one chart in each. I'd like to set both the chart heights to 50% of the screen height. Is that possible?
And same thing with the second and third columns, they have one pageBlock with one outputPanel that I'd like to set the height to 100% of the screen height.
Thanks for the help!
And same thing with the second and third columns, they have one pageBlock with one outputPanel that I'd like to set the height to 100% of the screen height.
Thanks for the help!
As your requirement is to build the dynamic page block table with dynamic columns, you need to takecare that nothing should be hard-coded. So kindly go through below sample code:
Visualforce Page Code:
<apex:page controller=""DynamicTableController"">
<apex:pageBlock >
<apex:form >
<apex:actionFunction name=""ObjectFileds"" action=""{!ObjectFields}""/>
<apex:commandButton value=""Show Table"" action=""{!ShowTable}""/>
<apex:pageBlockSection >
<apex:pageBlockSectionItem >
<apex:outputLabel value=""Select Object""/>
<apex:selectList multiselect=""false"" size=""1"" value=""{!SelectedObject}"" onchange=""ObjectFileds();"">
<apex:selectOption itemLabel=""--None--"" itemValue=""--None--""/>
<apex:selectoptions value=""{!supportedObject}"" />
</apex:selectlist>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel value=""Select Field""/>
<apex:selectList multiselect=""true"" size=""5"" value=""{!SelectedFields}"">
<apex:selectOption itemLabel=""--None--"" itemValue=""--None--""/>
<apex:selectoptions value=""{!fieldLableAPI}"" />
</apex:selectlist>
</apex:pageBlockSectionItem>
<apex:pageBlockTable rendered=""{!IF(ObjectList.size > 0 , true , false)}"" value=""{!ObjectList}"" var=""rec"">
<apex:column value=""{!rec.Id}"" rendered=""{!IF(SelectedFields.size == 0 , true, false)}""/>
<apex:repeat value=""{!SelectedFields}"" var=""FieldLable"">
<apex:column value=""{!rec[FieldLable]}"" rendered=""{!IF(FieldLable != '--None--' , true, false)}""/>
</apex:repeat>
</apex:pageBlockTable>
<apex:outputPanel rendered=""{!IF(ObjectList.size < 1 , true , false)}"">
<apex:pageMessage severity=""ERROR"" summary=""No records to display""/>
</apex:outputPanel>
</apex:pageBlockSection>
</apex:form>
</apex:pageBlock>
</apex:page>
Apex Code (Class):
public class DynamicTableController
{
//List displayed on UI
public List<selectoption> supportedObject {get; set;}
//Selected Object
public String SelectedObject {get; set;}
//Global describe
Map<String, Schema.SObjectType> gd = Schema.getGlobalDescribe();
Set<String> objectKeys = gd.keySet();
//Field Select List
public List<SelectOption> fieldLableAPI {get; set;}
//Selected fields to be displayed in table
public List<String> SelectedFields {get; set;}
//List to maintain dynamic query result
public List<sObject> ObjectList {get; set;}
//Constructor
public DynamicTableController()
{
//Initialize
supportedObject = new List<selectoption>() ;
SelectedObject = '' ;
fieldLableAPI = new List<SelectOption>() ;
SelectedFields = new List<String>() ;
ObjectList = new List<sObject>() ;
//Get only reference to objects
for(Schema.SObjectType item : ProcessInstance.TargetObjectId.getDescribe().getReferenceTo())
{
//Excluding custom setting objects
if(!item.getDescribe().CustomSetting)
{
//Adding to list
supportedObject.add(new SelectOption(item.getDescribe().getLocalName().toLowerCase() , item.getDescribe().getLabel() ));
}
}
}
//Get fields of selected object
public void ObjectFields()
{
if(SelectedObject != '--None--')
{
//Creating sObject for dynamic selected object
Schema.SObjectType systemObjectType = gd.get(SelectedObject);
//Fetching field results
Schema.DescribeSObjectResult r = systemObjectType.getDescribe();
Map<String, Schema.SObjectField> M = r.fields.getMap();
//Creating picklist of fields
for(Schema.SObjectField fieldAPI : M.values())
{
fieldLableAPI.add(new SelectOption(fieldAPI.getDescribe().getName() , fieldAPI.getDescribe().getLabel())) ;
}
}
}
public void ShowTable()
{
//Creating dynamic query with selected field
String myQuery = 'Select Id ' ;
for(String field : SelectedFields)
{
if(field.toLowerCase() != 'id' && field.toLowerCase() != '--none--')
myQuery += ','+ field + ' ' ;
}
//Limit is 100 for now you can change it according to need
myQuery += ' from ' + SelectedObject + ' LIMIT 100' ;
//Executing the query and fetching results
ObjectList = Database.query(myQuery) ;
}
}
Once user selects any object from the first picklist, filld picklist will be populated with all the field labels related to that object.
Note, it's a multi-select picklist so user can select multiple fields. Once fields are selected and ""Show Table"" is clicked, page block table will display the field values (selected in field picklist) of all records (limit is 100 right now, you can change it according to your need).
I hope this helps."