ForceTree.com

Zip file as Static Resource ( CSS Styling )

6:06 AM

I finally realized what a blunder i have made by hardcoding the URL of images in my CSS file. Everytime i move my code from one instance to another the URL keeps on changing and i have to manually edit each and every URL.....

But i found out that there was a very very easy way out there... Thanks to the community forums

This is the way you have to use CSS in your visualforce pages..

Step 1: Create a zip file of the CSS file with the Associated images..

Example: If you have a CSS called mystylings.css and all images used in the CSS are inside a folder called "Images", then create a folder containing both "mystylings.css" and "Images" folder... Suppose you name the folder as "mystylings"...

Create a zip file of the folder "mystylings"...

No need to change the image URL as i have mentioned here.

Suppose you name the zip file as "stylings.zip".

Step 2: Now upload this zip file as it is in Static Resources. Name the resource as "stylings" for example.

Step 3: Now you can access the "mystylings.css" file in your visualforce page as below.....

<apex:stylesheet value="{!URLFOR($Resource.stylings,'mystylings/mystylings.css')}"/>

Note that we have specified mystylings/mystylings.css ... This is because we created a folder called "mystylings" and the file "mystylings.css" resides inside this folder....

That's it and you are done... You can move your Visualforce Page with CSS across environments without changing the CSS

mass assign child records

Customized search and selection (Add multiple child records at one go)

9:08 PM

Scenario:

You want your users to be able to make a customized search and not the way salesforce searches. You also would like to allow your users to select multiple records from the search results and process them.

If the user does not select any record and clicks on the Next button you want to display an Error Message asking him to select at least one record to proceed.

Tip: You may be aware that salesforce allows only one child to be added to a parent at a time. Even though some wizards allow you to mass assign child records to a parent, this is not available for all objects. Modifying this code, you can achieve the functionality of selecting many child records and assigning them to a parent at one click!!!

The screenshots below clearly expresses the scenario...

Before search..

After search...

Note:

The following code searches for contacts based on the user inputs. Customize it as needed for your needs. Also, this code is called from a custom button on the Campaign Page Layout.

Javascript function :
We also make use of a javascript function to select all records at one go.

The code has suffecient comments to describe about each and every functionality. Do you think you need more info, then feel free to post your comment.

How to use this code?

Save the "Apex Class" first. Save the Visualforce page next.
Create a custom button in Campaign, select the source as "Visualforce Page" and select the visualforce page just now saved.
Go to PageLayout and add your newly created custom button to this layout.
Click on any Campaign Record, go to the detail page and then click on the custom button to view the page created.

Visualforce code:

<apex:page standardcontroller="Campaign" extensions="MassEmailFromCampaign" >
<!-- Javascript function to check all rows in the table -->
<script>
function checkAll(cb)
{
   var inputElem = document.getElementsByTagName("input");
   for(var i=0;i<inputElem.length;i++)
     {
             if(inputElem[i].id.indexOf("selectLine1")!=-1)
                   inputElem[i].checked = cb.checked;
      }
}
</script>
<!-- End of Javascript function -->
<apex:form >
<apex:sectionHeader title="Step 1" subtitle="Select Contacts to send Email"/>
<apex:pageblock >
<apex:pageBlockSection title="Search Contacts" columns="1"></apex:pageBlockSection>

<!-- Div to give a colored box effect -->

<div style="border-width:2px;border-style:solid;border-color:orange;">

    <!-- Panel grid to display boxes o accept user input values -->
    <apex:panelGrid columns="2">
        <apex:outputLabel style="font-weight:bold;" value="Contact E-mail" ></apex:outputLabel>
        <apex:inputText value="{!userinput}"/>
        <apex:outputLabel style="font-weight:bold;" value="Contact Name" ></apex:outputLabel>
        <apex:inputText value="{!userinp}"/>
    </apex:panelGrid>
    <!-- End of panelgrid -->
    <!-- Div to position the commandbutton appropriately -->
        <div style="position:relative;left:75px;">
             <apex:commandButton value="Search" action="{!contactsearch}" />
        </div>
    <!-- End of div -->
        <br/>
</div>

<!-- End of colored box div -->
    <br/>
<!-- Display error message -->
<apex:pagemessage strength="2" title="Error!!" severity="error" detail="Please select a contact or enter email address to proceed" rendered="{!errormsg}"/>
<!-- End of error message -->

<!-- Display search results -->
<apex:pageblocksection columns="1" title="Search results" rendered="{!NOT(ISNULL(results))}" >
  <apex:outputpanel id="Contactlist">

        <apex:pageBlockTable value="{!results}" var="contacts">
             <apex:column >
                <apex:facet name="header">
                    <apex:inputCheckbox onclick="checkAll(this)"/>
                </apex:facet>
                    <apex:inputCheckbox value="{!contacts.selected}" id="selectLine1"/>
            </apex:column>
            <apex:column headervalue="Contact Name">
                <apex:outputtext value="{!contacts.con.Name}"/>
            </apex:column>
            <apex:column headervalue="Account Name">
                <apex:outputtext value="{!contacts.con.Account.Name}"/>
            </apex:column>
            <apex:column headervalue="Title">
                <apex:outputtext value="{!contacts.con.Title}"/>
            </apex:column>
        </apex:pageBlockTable>  <br/><br/>

    </apex:outputpanel>
</apex:pageblocksection>
<!-- End of search results -->

<!-- Commandbutton to proceed to next screen -->
  <div style="position:relative;left:75px;">
      <apex:commandButton value="Next" action="{!processSelected}"/>
      <apex:commandbutton value="Cancel" action="{!Cancel}"/>
  </div>
<!-- End of Commandbutton -->
</apex:pageblock>
</apex:form>
</apex:page>

The Apex code for this page will be...

public class MassEmailFromCampaign {

/* Constructor Function. The campaign id is captured in this function */
public MassEmailFromCampaign(ApexPages.StandardController controller)
{
 cid=System.currentPageReference().getParameters().get('id');
}
/* Variable declarations */

Public String cid;                                                            // Stroes Campaign Id
public List<cContact> contactList {get; set;}                                 // Wrapper class which stores contact data and a boolean flag.
public Boolean selectAllCheckbox {get; set;}                                  // Stores checkbox data.
public boolean errormsg=false;                                                // Error msg. When no contact has been selected.
String userinput;                                                             // Contact Email
String userinp;                                                               // Contact Name

Public boolean displayboxes;

Public List<Contact> results = new List<Contact>();                                     // Contact search results.
Public List<Contact> selectedContactsstep2 = new List<Contact>();             // Selcted Contacts


/* End of Variable declarations */

/* Getter and setter methods for getting the user input ie. Contact name and email from the UI */

public String getuserinput(){return userinput;}
public void setuserinput(String userinp){this.userinput=userinp;}
public String getuserinp(){return userinp;}
public void setuserinp(String userinp){this.userinp=userinp;}


/*End of Getter and Setter methods */



/* Method to Search the contact database to fetch the query results */
public List<Contact> contactsearch()
{
     errormsg=false;
     contactList = new List<cContact>();
     for(Contact c : [select Account.Name,Name,FirstName,LastName,Email,title,Id from Contact where Email like :userinput+'%' and Name like :userinp+'%'])
     {
         contactList.add(new cContact(c));
     }

 return null;
}
/* End of method */


/* Method for returning the contact search results to the UI */
public List<cContact> getresults()
{

 return contactList;

}
/* End of Method */


/* Wrapper class to contain contact record and a boolean flag */
public class cContact
{
 public Contact con {get; set;}
 public Boolean selected {get; set;}

 /*This is the contructor method. When we create a new cContact object we pass a
 Contact that is set to the con property. We also set the selected value to false*/
 public cContact(Contact c)
 {
     con = c;
     selected = false;
 }
}
/* end of Wrapper class */


/* Method to fetch the selected records and send email to them */
public PageReference processSelected()
{

  List<Contact> selectedContacts = new List<Contact>();
  if (contactList!= null)
  {
     for(cContact cCon : getresults()){
        if(cCon.selected == true){
             selectedContacts.add(cCon.con);
         }
     }

     selectedContactsstep2=selectedContacts;
  }
 /* return error message if no contact is selected */
 if (selectedcontacts.size()==0)
 {
     errormsg=true;
     return null;
 }
 else
 {
     errormsg=false;
     String id=System.currentpagereference().getparameters().get('id');
     Pagereference p=new Pagereference ('/apex/MassEmailFromCampaignStep2');
     return p;
 }

}
public List<SelectOption> getItems()
{
 List<SelectOption> options = new List<SelectOption>();
 options.add(new SelectOption('YES','YES'));
 options.add(new SelectOption('NO','NO'));
 return options;
}


/* return error message if no contact is selected */
public boolean geterrormsg()
{
 return errormsg;
}


/* Method to cancel the entire process */
public Pagereference Cancel()
{
        Pagereference p =new Pagereference('/'+cid);
        return p;
}
       

}

Note that, "selectedcontacts" is the variable which holds the contacts you have selected. Use this for further processing. I have just redirected to another visualforce page, you can do your own stuff...

Post your queries....

CSS

Visualforce Page with CSS

9:13 AM

CSS stands for Cascading Style Sheets. This is nothing but a text file saved with the extension .css

This file will contain all the style defenitions for your visualforce page. To know the basics of styling your visualforce page visit this post.

Scenario 1:

We are going to take a very simple scenario. You want all your <h1> tags to appear in GREEN color.

Step 1:

Create a CSS file.

Open NOTEPAD or any text editor and type the following code

h1
{
color:green;
}

Save the file with a .css extension (say CssExample.css)

Step 2:

Upload the saved file as a Static resource.

Setup -> Develop -> Static Resources and click on NEW.

Give a name for the static resource say CssExample. Remeber to set the Cache Control as "Public".

Step 3:

Create a visualforce page and paste the following code..

<apex:page standardstylesheets="false" showheader="false">
<apex:stylesheet value="{!$Resource.CssExample}"/>
<h1> This text is displayed using CSS </h1>
</apex:page>

Save the page. Now you can see that the text within <h1> tag is displayed in GREEN color because you have specified so in the CSS file.

TiP: Remove showheader="false" and you can see that the text is displayed in normal size and not h1. This is because the header uses standard salesforce style sheets and your visualforce page is still overridden with this even if you say ' standardstylesheets="false" '. To overcome this use font-size:15px or whatever it maybe.

Scenario 2:

Now lets modify the CSS. We will have two commandbuttons and one commandlink. We will add a background color and text color to one button and a different color to another button. We will also change the color of commandlink.

Modify the CSS as below...

h1
{
color:green;
}
.button1
{
background-color:#00FF00;
font-weight:bold;
color:#E56717;
}
.button2
{
background-color:#C12283;
font-weight:bold;
color:#EE9A4D;
}
a:hover
{
color:#F665AB;
}
a
{
color:#52D017;
font-size:20px;
}

Upload the modified CSS into Static resource. You can edit the already created static resource CssExample and just choose the latest file from your desktop.

Modify the Visualforce page as below..

<apex:page standardstylesheets="false" showHeader="false">
<apex:form >
    <apex:stylesheet value="{!$Resource.CssExample}"/>
    <h1> This text is displayed using CSS </h1>
        <apex:commandButton styleclass="button1" value="Click Me!"/>
        <apex:commandButton styleclass="button2" value="Click Me!"/>
        <apex:commandlink value="Clik me!"/>
    </apex:form>
</apex:page>

Now you can see the different colours that we have applied...

Look at the CSS code carefully. We have two classes button1 and button2 with their style defenitions (note that .button1 is the way the classes have to be defined in CSS).

When your Visualforce page is finally rendered as HTML commandlink tag will be converted to <a> tag. That's why we define the colors for "a" in CSS. a:hover represents the styling to be used when you move your mouse on the commandlink..

Scenario 3:

The method i am describing below is the most inefficient one. I later discovered that there is a very easy way... You can find it here

Sorry for the inconvenience.. but still i thought mentioning the below method maybe of use somewhere

Specifying a background image in the CSS. We will add a background image to the commandbutton and more styling effects.. Save the following images to your desktop.

(bg_button_a.gif) Right-click and Save Image As

(bg_button_span.gif) Right-click and Save Image As

Now we have the CSS code as below..

.clear { /* generic container (i.e. div) for floating buttons */
  overflow: hidden;
  width: 100%;
}

a.button {
  background: transparent url('bg_button_a.gif') no-repeat scroll top right;
  color: #444;
  display: block;
  float: left;
  font: normal 12px arial, sans-serif;
  height: 24px;
  margin-right: 6px;
  padding-right: 18px; /* sliding doors padding */
  text-decoration: none;
}

a.button span {
  background: transparent url('bg_button_span.gif') no-repeat;
  display: block;
  line-height: 14px;
  padding: 5px 0 5px 18px;
}
a.button:active {
  background-position: bottom right;
  color: #000;
  outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
  background-position: bottom left;
  padding: 6px 0 4px 18px; /* push text down 1px */
}

The colored parts in the code refer to the URL of the images. When you upload this CSS to Salesforce, the URL is no longer valid. Hence the CSS has to be modified.

Upload the two images into SFDC as static resources (Save the first one as ButtonBg and the second one as ButtonBgSpan for example). View the details of the static resource created. Click on "Click here to view this file".

After you click the image opens up in a new window/tab. Now check the URL. For me the URL was

https://ap1.salesforce.com/resource/1246616624000/ButtonBgSpan

You have to copy the coloured part of the URL and paste it in the CSS . Do it for the two files uploaded. Now the modified CSS looks like this...

.clear
{ /* generic container (i.e. div) for floating buttons */
   overflow: hidden;
   width: 100%;
}

a.button {
   background: transparent url('/resource/1246616564000/ButtonBg') no-repeat scroll top right;
   color: #444;
   display: block;
   float: left;
   font: normal 12px arial, sans-serif;
   height: 24px;
   margin-right: 6px;
   padding-right: 18px; /* sliding doors padding */
   text-decoration: none;
}

a.button span
{
   background: transparent url('/resource/1246616624000/ButtonBgSpan') no-repeat;
   display: block;
   line-height: 14px;
   padding: 5px 0 5px 18px;
}
a.button:active
{
   background-position: bottom right;
   color: #000;
   outline: none; /* hide dotted outline in Firefox */
}

a.button:active span
{
   background-position: bottom left;
   padding: 6px 0 4px 18px; /* push text down 1px */
}

Upload this updated CSS . You can edit your already created Static resource CssExample and just choose the latest file from your desktop.

The Visualforce page code will be..

<apex:page standardstylesheets="false" showHeader="false">
   <apex:form >
       <apex:stylesheet value="{!$Resource.CssExample}"/>
           <apex:commandlink styleclass="button"><span> Save </span> </apex:commandlink>
           <apex:commandlink styleclass="button"><span> Cancel </span> </apex:commandlink>
       </apex:form>  
</apex:page>

That's it... Now you can see the effects you have just created

Comments and suggestions welcome!!

visualforce styling

Visualforce Page Styling - some useful stylings

2:41 AM

I found some style specifications which i thought would be worth sharing...

Here it is..

Positioning

Get Rid of   for adding white spaces to your Visualforce Page. Here is a better way of doing it..

<div style="position:relative;left:75px;">

Left specifies how many pixels from the left of the screen should the component be displaced. Right,top,bottom also can be used..

Put your Visualforce tags inside this div.

To draw a coloured box(container) to place components inside it

<div style="border-width:2px;border-style:solid;border-color:orange;">

Visualforce tags placed inside this div will appear with a orange coloured box.

Remove Blue Border around images as links in IE:

IE displays a blue border around images to denote that it is a link. To remove it use the following code

a img {border-style: none; }

color:transparent does not work in IE:

IE does not recognize this property, whereas Firefox and Safari does. To overcome this, use the following code.

a span{
            visibility:hidden;
         }

Check this article for the complete description ... Click here . Check the bottom most part of the article for a full example.

newbie visualforce

Style your VisualForce Pages -for newbies

3:34 AM

VisualForce offers the ability to customize the look and feel of your VisualForce Pages. This guide is intended to cover the methodologies to be followed, and some best practices while implementing your own look and feel.

Getting Started:

<apex:page>is the topmost tag in any VisualForce Page. This tag determines the styles to be used in your VisualForce pages. Let us start by creating a simple page with some basic styles.

<apex:page showheader="false" sidebar="false">
<apex:form>
<h1> This is my first VisualForce Page! </h1>
</apex:form>
</apex:page>

Let’s walk through the code line by line

<apex:page showheader="false" sidebar="false">

When you set showheader=”false” the sidebar is also removed by default, however when you set sidebar=”false” header will still display (obviously J )

The point to note here is when the header is removed Salesforce default stylesheets is no longer applied. Hence if you paste ordinary HTML code it will work perfectly.

One step further…..

Let’s modify the code and add a button..

<apex:page showheader="false" sidebar="false">
<apex:form>
<h1> This is my first VisualForce Page! </h1>
<apex:commandButton value="Done"></apex:commandButton>
</apex:form>
</apex:page>

What did you notice? You’re right, the size of the text has reduced when you have not done anything to it. Why is this so?

It is because we have used <apex:commandbutton> tag. This causes salesforce Standard stylesheets to be used. Not only this tag, but there are many others which cause a conflict. Hey!!, don’t worry there’s a way out there.

<apex:page showheader="false" sidebar="false" standardstylesheets=”false”>

This will remove the salesforce standard stylesheets and you can now use your own styles without any worries. But, of course there are many more problems to be faced…

Now lets add some color and effects…

<apex:page showheader="false" sidebar="false">
<apex:form>
<h1 style="text-align:center;color:blue;">
This is my first VisualForce Page! </h1>
</apex:form>
</apex:page>

This is called INLINE STYLING, it is called so because we have used style=” “ attribute inside the <h1> tag.

When not to use INLINE STYLING????

Suppose if you have ten <h1> tags in your page and you want all the text displayed in BLUE. Ideally you would have to add INLINE styles in all your ten <h1> tags.

To overcome this, we use <style> tag. We will modify our previous example using <style> tag.

<apex:page showheader="false" sidebar="false">
<style>
h1
{
text-align:center;
color:blue;
}
</style>
<apex:form>
<marquee> <h1>
This is my first VisualForce Page! </h1>
</marquee>
<h1> This text is displayed without INLINE styles </h1>   
</apex:form>
</apex:page>

USING STYLECLASS

How about a more complicated page with styleclass, adding many styles into a single holder is called a styleclass. You can then use the styleclass anywhere in your page

<apex:page showheader="false" sidebar="false">
<apex:page showheader="false" sidebar="false" standardcontroller="Account" standardstylesheets="false">
<style>
.red
{
background-color:red;
}
.green
{
background-color:green;
}
.blue
{
background-color:blue;
}
</style> 
<apex:form >
<h1 style="text-align:center;color:blue;">  This is my first VisualForce Page! </h1>
<apex:datatable value="{!Account.Contacts}" var="con" border="1" cellspacing="5" cellpadding="5" columnClasses="red,green,blue">
<apex:column headervalue="Contact FirstName"> <apex:outputfield value="{!con.FirstName}"/> </apex:column>
<apex:column headervalue="Contact LastName"> <apex:outputfield value="{!con.LastName}"/> </apex:column>
<apex:column headervalue="Contact Name"> <apex:outputfield value="{!con.Title}"/> </apex:column>
</apex:datatable>    
</apex:form>
</apex:page>

Here when you say columnclasses="red,green,blue" in <apex:datatable> itag it means that the styleclass "red" would be applied for the first column, "green" would be applied for the second column and "blue" would be applied for the third column. When you have a fourth column "red" styleclass would be applied again, because it works in a repetitive fashion. You can use as many classses as you need for any number of columns.

That’s it for you to get started..

The next step is using CSS in your visualforce pages. Here it is!! Click here!!

Passing parameters to a visualforce page and between pages

9:31 AM

What is a Parameter?
A parameter is a name value pair that goes into the URL of a page. The first parameter starts with a '?' and the subsequent start with a '&'.
http://www.google.com?browser=chrome&version=12
We have two parameters in this URL. browser with a value of 'chrome', and version with a value of '12'.

Many a times you would want to pass parameters to a visualforce page..
There are a number of Situations in which you would want this. This article covers a few of them.

Scenario 1 - From a Custom Button.

When you create a custom button on "Account", you will only have the option of selecting Visualforce pages that have the "standardcontroller="Account"" attribute.

To overcome this restriction, select the content source as URL and not visualforce... Then you could type the URL as \apex\yourpage.. And what more you can now pass parameters as you need using merge fields... This method has got one more advantage.. You are not forced to use a standard controller with an extension just for your page to appear in the list when you actually do not need a standard controller..

Situation 2 - From a Link.

When you want to pass parameters between visualforce pages use the <apex:param> tag....

Here is a small sample program

Step 1: Create a Visualforce page called SamplePage1....

<apex:page >
<apex:outputlink value="/apex/SamplePage2"> Click Here <apex:param name="msg" value="success"/> </apex:outputlink>
</apex:page>

Step2: Create a Visualforce page called SamplePage2

<apex:page controller="Sampleclass"> </apex:page>

Step 3: On SamplePage1 Click on the " Click Here" link. You will see that when you click on the link you will navigate to the SamplePage2. Check the URL now..

https://na5.salesforce.com/apex/SamplePage2?msg=success

You can see that the parameter " msg" with value "success" has been passed to the new page.

Pagereference().getParameters().put()

PageReference is a type in Apex. Read the documentation here.

When you click a command button or a command link in a visualforce page, you call a method. The return type
of this method would be a PageReference meaning that, after clicking the button the user will be redirected to a
new Page. Below is a sample code, which shows how to pass parameters from a PageReference

public Pagereference gotonewpage()
{     
     PageReference pageRef = Page.existingPageName;
     pageRef.getParameters().put('msg','success');
     return PageRef
}

existingPageName - actual name of a visualforce page

Retrieve Parameter Values in Apex Class:

The Apex Class code would be

public class Sampleclass
{
Public String message = System.currentPagereference().getParameters().get('msg');
}

So now, the variable "message" would store the value of your parameter "msg"....

How to Cover this code in TEST Method?????

public class Sampleclass
{
Public String message = System.currentPagereference().getParameters().get('msg');
public static testmethod void SampleclassTest()
{
System.currentPagereference().getParameters().put('msg','success');
}
}

And at last some suggestions...

Be careful with the values you pass in the URL.. Special Characters will cause problems
when passed in the URL.. For ex if you pass the Account Name "Shah & shah".. this would'nt
pass properly as the special character "&" can't get into the URL..
So as a best practice always pass ID's.. you could write a query and retrieve any other field
in the APEX Class

dynamic picklist

Dynamically add values to picklist using Visualforce

3:58 AM

Many a times we come across situations in which we want data to be added to a picklist dynamically.

By saying dynamic i mean that you do not want an Administrator to go to the field level setup and add values to the picklist...

Here is a detailed description of a scenario from one of my friends...

Scenario..

Problem explanation with Example: A picklist field "City" with values:Delhi,Mumbai,Chennai,Kolkata(4 picklist values) and a textbox nearby to enter any other city. Supposing if Bangalore has to be entered, the user has to use the textbox. Now next time when a record is created, the "City" field should show "Bangalore" as 5th value.

Screenshots:
As you can see below, there are only three values available for selection.

I am selecting 'Other' from the dropdown, this action displays a text box for the new value and a button called "Add".

I am entering a new value called "Bangalore" and i am clicking on "Add"

Done!! Now you can see that the new value "Bangalore" is also added to the dropdown..

We will achieve this functionality using visualforce. You can then extend the code provided here to as many Visualforce pages as you want.

Step 1:

First of all, we will have to create an object to hold all the picklist values. So, go ahead and create the following..

Object name : DynamicPicklist
Field Names:
Name (Datatype : Autonumber)
PicklistValue (Datatype: text)

Step 2:

Add picklist values to the object created.. (ie) Add records to the newly created object...

For example..

Record 1: PicklistValue= 'Delhi'
Record 2: PicklistValue = 'Mumbai'

and so on...........

Now also add a value called '--Other--'. This value will be used for the user to enter a new value.

Step 3:

Creation of the Visualforce page and the Apex Class.

Apex Code.. Save this first

public class dynamicpicklist
{
public String city{get; set;}

public List<SelectOption> getcitynames()
{
  List<SelectOption> options = new List<SelectOption>();
  List<DynamicPicklist__c> citylist = new List<DynamicPicklist__c>();
  citylist = [Select Id, PicklistValue__c FROM DynamicPicklist__c ];
  options.add(new SelectOption('--None--','--None--'));
  for (Integer j=0;j<citylist.size();j++)
  {
      options.add(new SelectOption(citylist[j].PicklistValue__c,citylist[j].PicklistValue__c));
  }
  return options;
}
public String newpicklistvalue{get; set;}

public void saverec()
{
  DynamicPicklist__c newrec = new DynamicPicklist__c(PicklistValue__c=newpicklistvalue);
  insert newrec;
  newpicklistvalue=NULL;
}

}

Visualforce code...

<apex:page controller="dynamicpicklist" sidebar="false" >
<apex:form >
<apex:sectionHeader title="Dynamic Picklist" subtitle="Reusable code"/>
<apex:pageblock >
<apex:pageBlockSection title="Dynamic picklist" columns="1">
      <apex:pageblocksectionItem >
          <apex:outputlabel value="City" for="values" />
          <apex:selectList value="{!city}" size="1" id="values">
              <apex:actionSupport event="onchange" reRender="newvalue" />
              <apex:selectOptions value="{!citynames}"/>
          </apex:selectList>
      </apex:pageblocksectionItem>                                        
          <apex:outputpanel id="newvalue">
             <apex:outputpanel rendered="{!city == '--Other--'}">
             <div style="position:relative;left:75px;">             
                  <apex:outputlabel value="New value" for="newval" />
                  <apex:inputText value="{!newpicklistvalue}" id="newval"/>
                  <apex:commandbutton action="{!saverec}" value="Add!"/>
             </div>
             </apex:outputpanel>
          </apex:outputpanel>             
  </apex:pageblocksection>
</apex:pageblock>
</apex:form>
</apex:page>

How to extend this code???

Are you wondering if you will have to create one object for one picklist and suppose you have ten picklists like these, then ten objects... That is really a mess...

So, why not create ten fields in the same object.. Field1 represents picklist1, field2 picklist2 and so on...

But, be clear on the way you retrieve values and insert values into this object... For ex: I have not performed the validation to check if the newly entered value already exists..

Comments and Queries most welcome!!!!

Approval process

How to check whether a record has been locked in the Approval Process

12:48 AM

apex

Post your questions here

8:00 AM

quick guide

Get started - create a Visualforce Page now

6:00 AM

Common, lets jump straight into the Visualforce sea!!

You want to create your first VisualForce page? . Before that see this

Setup --> My Personal Information --> Personal Information --> Development Mode . This should be checked,if not set it to true.

Once done, go to your URL bar ( see image ).

Modify the URL . Ex ( https://ap1.salesforce.com/home/home.jsp would be modified to https://ap1.salesforce.com/apex/welcomepage ) and hit ENTER.

When you see this screen, click on the "Create Page" link. And done, your page has been created and you will see an editor window at the bottom of your browser. You will see some code that has been generated by default. These are called tags.

<apex:page> is the very first tag you have to learn. You cannot create a page without this tag.

There are three main attributes for this tag.

Standardcontroller
Controller
Extensions

Standardcontroller is used when you want to use the standard functionality of any object (custom or standard). By standard functionality i mean SAVE, VIEW, DELETE etc. You cannot override the SAVE functionality or anything else, you do not have any control in the backend processes. But you can very well control the UI (user interface), you can display marvellous content which is otherwise not possible with the standard PageLayout.

<apex:page standardcontroller="Account">
   <apex:inputfield value="{!Account.Name}"/>
   <apex:commandbutton value="Update" action="{!Save}"/>
</apex:page>

Type this code in the editor (I know you would copy & paste) and hit SAVE icon. You can see that your new page is now developed. But wait, there doesn't appear a Account Name to edit and Save.

https://xxx.salesforce.com/apex/welcomepage?id=00190000002GA5n . Id should be a valid Account Id.

Dont be afraid that you have to modify the URL all the time, there is lot more to explore.

Controller (often called Custom controller) is used when you want to perform something extraordinary when hitting the "SAVE" button.

Here is a simple example using Custom controller ... Click here!!!

Extensions is used when you want to perform a combination of both ( Standardcontroller and Cutom)

We will dive deep into the Controller and Extensions attributes in the coming posts. But for now expand the basic code provided, add as many tags as possible and post your queries.

Some tags which come to my thought:

<apex:pageblock>

<apex:pageblocksection>

<apex:outputfield>

<apex:outputlabel>

<apex:commandlink>

Note: Use the Component Reference link in the editor window for more information.

Introduction

5:47 AM

Zip file as Static Resource ( CSS Styling )

Customized search and selection (Add multiple child records at one go)

Visualforce Page with CSS

Visualforce Page Styling - some useful stylings

Style your VisualForce Pages -for newbies

Passing parameters to a visualforce page and between pages

Dynamically add values to picklist using Visualforce

How to check whether a record has been locked in the Approval Process

Post your questions here

Get started - create a Visualforce Page now

Introduction

Pages

Search This Blog

Blog Archive

Subscribe

Like Us on FB