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!!

Zip file as Static Resource ( CSS Styling )

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

Visualforce Page with CSS

Pages

Search This Blog

Blog Archive

Subscribe

Like Us on FB