All New Salesforce - Next Gen CRM !!

New Salesforce Look --

Read More

Visualforce table Export to excelusing HTML Table & jQuery

This articles lets you know how to export data using HTML table & jQuery :

Apex Class :

public with sharing class ExportToExcel{
  
     public String exportDataString {get; set;}   

     public ExportToExcel() {} 

   //Apex Page refference methods from apex can used to redirect from one page to another page.
     public ApexPages.PageReference goToExportPage() {
        return Page.ExportToExcel;
     }   
}

Visual-force page: To Display Table

<apex:page controller="ExportToExcel" sidebar="false" title="Export">
     <!-- Static Resource Includes: Jquery and css files  -->
    <apex:includeScript value="{!JSENCODE(URLFOR($Resource.JQuery,'js/jquery-1.5.2.min.js'))}"/>
    <apex:includeScript value="{!JSENCODE(URLFOR($Resource.JQuery,'js/jquery-ui-1.8.13.custom.min.js'))}"/>
    <apex:stylesheet value="{!JSENCODE(URLFOR($Resource.JQuery, 'css/redmond/jquery-ui-1.8.11.custom.css'))}"/>

    <style>
        #newspaper-b {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
            border: 1px solid #69c;
        }
        #newspaper-b th  {
            padding: 15px 10px 10px 10px;
            font-weight: normal;
            font-size: 14px;
            color: #039;
        }
        #newspaper-b tbody {
            background: #e8edff;
        }
        #newspaper-b td {
            padding: 10px;
            color: #669;
            border-top: 1px dashed #fff;
        }
        #newspaper-b tbody tr:hover td {
            color: #339;
            background: #d0dafd;
        }

    </style>
     <apex:sectionHeader title="Export Table" />

     <script type='text/javascript' language='javascript'>
        var j$ = jQuery.noConflict();
        function exportTableData(){
            j$(".exampleDataToExport").val(j$("#containerTable").html());
            goToExportPage();
        }
     </script>
    <apex:form >
        <a style="text-decoration: underline;cursor: pointer;margin-left:480px;font-weight:bold;font-size: 15px;" class="dummyCustomExport"  onclick="exportTableData()" title="export"><b>Export</b></a>

        <div id="containerTable">
            <table id="newspaper-b" class="dummyExportTableClass" summary="2007 Major IT Companies' Profit">
                <thead>
                    <tr>
                      <th scope="col">Company</th>
                      <th scope="col">Q1</th>
                      <th scope="col">Q2</th>
                      <th scope="col">Q3</th>
                      <th scope="col">Q4</th>
                    </tr>
                </thead>
                <tbody>
                  <tr>
                      <td>Microsoft</td>
                      <td>20.3</td>
                      <td>30.5</td>
                      <td>23.5</td>
                      <td>40.3</td>
                  </tr>
                  <tr>
                      <td>Google</td>
                      <td>50.2</td>
                      <td>40.63</td>
                      <td>45.23</td>
                      <td>39.3</td>
                  </tr>
                  <tr>
                      <td>Apple</td>
                      <td>25.4</td>
                      <td>30.2</td>
                      <td>33.3</td>
                      <td>36.7</td>
                  </tr>
                  <tr>
                      <td>IBM</td>
                      <td>20.4</td>
                      <td>15.6</td>
                      <td>22.3</td>
                      <td>29.3</td>
                  </tr>

                </tbody>
            </table>
        </div>
        //action function redirects to another page.
        <apex:actionFunction name="goToExportPage" action="{!goToExportPage}"/>
        <apex:inputTextarea id="ExportDataString" value="{!exportDataString}" styleClass="exampleDataToExport" style="display:none"/>
    </apex:form>
</apex:page>

Visual-force page: Export page(Export as Excel)

<apex:page controller="ExportToExcel" contentType="application/vnd.ms-excel#export.xls"  title="Export To Excel" cache="true">
  {!(exportDataString)}
</apex:page>

JQuery UI CDN :  https://code.jquery.com/ui/1.11.4/jquery-ui.js
Jquery JS : https://code.jquery.com/jquery-1.11.2.js

Please feel free to ask any question .....

                                                          Happy Learning !!

Read More

Lightning Component Framework - Introduction

The Lightning Component framework is a UI framework for developing dynamic web apps for mobile and desktop devices. It’s a modern framework for building single-page applications engineered for growth.

The framework supports partitioned multi-tier component development that bridges the client and server. It uses JavaScript on the client side and Apex on the server side

Watch Video (Here)

Lightning Component Framework and Aura Framework

The Lightning Component framework is built on the open-source Aura framework available at http://github.com/forcedotcom/aura. You can build general-purpose web apps hosted on your own server using the Aura framework, which also provides features and components that may not be available in the Lightning Component framework. Many of the sample code here uses the out-of-the-box components from Aura framework, such as aura: iteration and ui: button. The aura namespace contains components to simplify your app logic, and the ui namespace contains components for user interface elements like buttons and input fields. The force namespace contains components specific to Salesforce.

Visualforce and Lightning

The Lightning Component framework is a component-based framework. As building blocks of an app, components encapsulate HTML, JavaScript, and CSS, while interacting via events. Lightning components are client-side centric, making them more dynamic and mobile friendly. Contrastingly, Visualforce components are page-centric and relies heavily on server calls. Visualforce facilitates delivering of template-driven web pages and email messages, making it suitable for developers who wish to maintain greater control over the lifecycle of the request. Because Lightning components use Apex on the server side, organizations that can’t use Apex code can’t create Lightning components, but they can use Visualforce.

Components

Components are the self-contained and reusable units of an app. They represent a reusable section of the UI, and can range in granularity from a single line of text to an entire app.

The framework includes a set of prebuilt components. You can assemble and configure components to form new components in an app. Components are rendered to produce HTML DOM elements within the browser.

A component can contain other components, as well as HTML, CSS, JavaScript, or any other Web-enabled code. This enables you to build apps with sophisticated UIs.

The details of a component's implementation are encapsulated. This allows the consumer of a component to focus on building their app, while the component author can innovate and make changes without breaking consumers. You configure components by setting the named attributes that they expose in their definition. Components interact with their environment by listening to or publishing events.

 

                

Read More