BlogForce9: Visualforce Component

Showing posts with label Visualforce Component. Show all posts

PageBlockTable Enhancer v2.2 - The much needed update!

Tuesday, June 25, 2013

Well here is a much awaited and the needed update for the PageBlockTable Enhancer plugin. Ever since I coded the first version, there were request for many features and this 2.2 version brings down some of them.

Here is what is new with this plugin

Parameter to turn on and off Pagination.
Support for specifying available page sizes.
Support for choosing default page size on page load.

List o Parameters

targetPbTableIds : comma-separated Ids of the target Pageblock tables
paginate : Assign true if you want to use the pagination feature,default value is true.
pageSizeOptions : A comma seperated list of integer values that will displayed as dropdown for page size
defaultPageSize : Default page size that needs to be selected (at page load).

Ajax/Rerender support

This version brings in support for rendering, the earlier version wasn't able to handle this. So incase you are rerendering your table or the parent components, you can call the "initPageBlockTableEnhancer()" method from "oncomplete" even of your commandButtons/actionFunctions/actionSupport/commandLink .
```
<apex:commandButton value="Rerender" reRender="mid" oncomplete="initPageBlockTableEnhancer()"/>
```

Basic Syntax

The basic syntax remains same, just few added params.

<c:PageBlockTableEnhancer targetPbTableIds="mid,mid2" paginate="true" defaultPageSize="5" pageSizeOptions="5,10,20,30,40,50,100"/>    
   <apex:pageBlock >   
     <apex:pageBlockTable value="{!accounts}" var="acc" id="mid">   
      <apex:column value="{!acc.Name}"/>   
     </apex:pageBlockTable>    
     <apex:pageBlockTable value="{!accounts}" var="acc" id="mid2">   
      <apex:column value="{!acc.Name}"/>   
     </apex:pageBlockTable>     
   </apex:pageBlock>

Demo And Installation / Unmanaged Package: http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000007rdwd
[Updated @ 27-Nov-2013 : Bug Fixes related to sorting]

Easy Jquery Tabs for Visualforce Pages

Thursday, May 9, 2013

[Live Demo]

This is another blog regarding so called Easy Jquery Component.Now this component helps you to generate the Jquery Tabs very easily in a Visualforce pages. Follows the same syntax as the standard component, with added Jquery goodness. Pretty straight forward and can include standard components inside the Jquery tabs.

How it looks like ?

How to use the components?

<c:Tabpanel> : A wrapper component that holds all the tab together inside a panel.
<c:Tab> : Represents a single Tab inside a tabpanel.

Below is a sample code to generate a Jquery Tab

<!--Tab Panel -->  
   <c:Tabpanel >  
     <!--First Tab-->  
     <c:Tab title="Tab 1">  
       This is a tab 1. You can add standard component inside also.  
       <apex:pageBlock title="Standard page block">  
         This is a pageblock component.  
         <br/>  
         <apex:pageBlockSection title="This is a section" collapsible="false">  
         </apex:pageBlockSection>  
       </apex:pageBlock>  
     </c:Tab>  
     <!--Second Tab -->  
     <c:Tab title="Tab 2">  
       This is a tab 2  
     </c:Tab>  
   </c:Tabpanel>

Codebase

Demo And Installation Link : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000007s6xl

Visualforce Accordion Component - An Easy Way to Implement jQuery Accordion in a VF Page

Tuesday, April 23, 2013

[Live Demo]

[Updated To 1.1]

Well while working with Visualforce pages, you will feel like the UI is kinda old and not that catchy. But believe me VF is not that bad at all! You just need to add the right ingredients.

And guess what the most stable js library JQUERY and JQUERY UI mixes very well with Visualforce pages, to give awesome results. JQUERY has very long list of widgets and plugin and they are pretty easy to implement. One of the commonly used widget is the Accordion. Implementing this in a VF page is not that difficult. But for quick implementation a vf component will be really handy. So here is Visuaforce Components that automatically does all the JQUERY stuff for you and creates a awesome looking Accordion. No javascript coding just include the tags/components and enjoy the JQUERY love.

How to use the component?

The accordion is generated by the help of two components :

<c:Accordion> : This is the wrapper which holds all the accordion section together
<c:AccordionSection> : This element actually gets converted into a accordion section.

Below is the code to generate a accordion similar to the attached screen.

<c:Accordion >  
     <c:AccordionSection title="Section 1">  
       Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque.   
       Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh  
       Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada.   
       Vestibulum a velit eu ante scelerisque vulputate.  
     </c:AccordionSection>  
     <c:AccordionSection title="Section 2">  
       Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus.   
       Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit,   
       faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.  
     </c:AccordionSection>  
   </c:Accordion>

The plugin is updated to 1.1. The new plugin features a script manager that imports only necessary plugins,script and stylesheet. This mainly helps when multiple Accordion component are used on the same page. Instead of importing the resources multiple times they are imported only once by the script manager.

Demo And Installation : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000007rdIr

PageBlockTable Enhancer v2.0 - And the Awesomeness Continues

Sunday, March 31, 2013

[Live Demo]

Note : A newer version of this plugin is released please check the same by clicking on this link

Well I have been working on this new component "PageblockTable Enhancer" for a while and am trying to merge all the functionality that were featured in my earlier components " Sortable Pageblock table" and "Enhanced PageBlock Table".

The version 2.0b brings in some exciting changes like inclusion of Pagination along with the Sorting capability.

Check out the demo of the newest version here

http://blogforce9dev-developer-edition.ap1.force.com/PageBlockTableEnhancerDemo

How to use?

Parameter :

targetPbTableIds : comma-separated Ids of the target Pageblock tables

 <c:PageBlockTableEnhancer targetPbTableIds="mid,mid2"/>    
   <apex:pageBlock >  
       <apex:pageBlockTable value="{!accounts}" var="acc" id="mid">  
         <apex:column value="{!acc.Name}"/>  
       </apex:pageBlockTable>   
        <apex:pageBlockTable value="{!accounts}" var="acc" id="mid2">  
         <apex:column value="{!acc.Name}"/>  
       </apex:pageBlockTable>     
   </apex:pageBlock>

Demo And Installation / Unmanaged Package: http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000007rdwd

PS: This is a beta version of the plugin, some bug may exists, If you find one, I will be more than happy to resolve them.

PageBlockTable Enhancer - A Awesome New Visualforce Component

Saturday, March 2, 2013

Note : A newer version of this plugin is released please check the same by clicking on this link

If you are going through my blog, few days back I pushed a new version of a Enchanced Pageblock Table. The main draw back of this component is to you have to modify your existing controller to provide the FieldList to the component.

But what If I give a new plugin that can work on existing Page block tables and that to without any code changes in the controller ?

So here is the initial version of The PageblockTableEnhancer, that can be included into existing page to enhance your existing PageBlockTables. Just include the component into the page and specify Ids of the target PageblockTable in csv format.

Features
Currently PageblockTableEnhancer only supports sorting. You can apply sorting feature to any number of tables in a page by using a single PageblockTableEnhancer component.

How to use?

Parameter :

targetPbTableIds : comma-separated Ids of the target Pageblock tables

 <c:PageBlockTableEnhancer targetPbTableIds="mid,mid2"/>    
   <apex:pageBlock >  
       <apex:pageBlockTable value="{!accounts}" var="acc" id="mid">  
         <apex:column value="{!acc.Name}"/>  
       </apex:pageBlockTable>   
        <apex:pageBlockTable value="{!accounts}" var="acc" id="mid2">  
         <apex:column value="{!acc.Name}"/>  
       </apex:pageBlockTable>     
   </apex:pageBlock>

Enhanced Page Block Tables

[This VF Component is Updated to version 2.2. Please use click on this link to read about the latest component]

Demo : http://blogforce9dev-developer-edition.ap1.force.com/PageBlockTableEnhancerDemo

Codebase:

Unmanaged Package:https://login.salesforce.com/packaging/installPackage.apexp?p0=04t90000000MIpe

Github:https://github.com/Avinava/Visualforce-PageBlock-Table-Enhancer