+ Start a Discussion
RishikeshRishikesh 

Hi,I need to convert below VF Page into Lightning component I am new to lightning Can anybody could you please help me how to convert this VF into Lightning Component Please ?

VF Page
~~~~~~~~~~~~~~~~~~
<apex:page standardController="Account" cache="true" extensions="BussinessController" sidebar="false" showHeader="false">
<head>
    <title>Trade History - {!Account.Name}</title>
</head>
<apex:pageMessages />

    <script>
        function setFocusOnLoad() {} 
    </script>
  
    <apex:form id="th_form">
    <table>
    <tr>
    <td width="230px">
    <apex:selectRadio value="{!report}" style="font-weight: bold;">
        <apex:selectOptions value="{!reporttypes}"/>
    </apex:selectRadio>
    </td>
    <td width="250px">
    <apex:OutputLabel value="Start Date" for="c_startDate" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <apex:inputField id="c_startDate" value="{!Start.ActivityDate}" />
    </td>
    <td width="250px">
    <apex:OutputLabel value="End Date" for="c_endDate" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <apex:inputField id="c_endDate" value="{!End.ActivityDate}" />
    </td>
    <td>
    <apex:commandButton action="{!th_loaddata}" value="Retrieve Data"  status="thtab_status"/>
    </td>
    </tr>
    </table>
    </apex:form>
    

    <apex:outputPanel id="th_out">
    <apex:actionstatus id="thtab_status" startText="Requesting...">
    <apex:facet name="stop">
        <apex:outputPanel >
            &nbsp;&nbsp;&nbsp;&nbsp;
            <apex:outputText value="{!ErrorMessage}" style="font-style:italic; font-weight: bold; font-size: 12px;color: #AF0B1C;"/>            
            <p/>            


<apex:iframe src="https://cognos-prod" />


            
        </apex:outputPanel>
    </apex:facet>
    </apex:actionstatus>
    </apex:outputPanel>
    <p/>
</apex:page>
                   

Apex Class:
~~~~~~~~~~~~~~~~~


public with sharing class BUssinessController {
    
   
    
    private Account acct;
    
    
    private String report = '1';
    private Task edit_task1=null;
    private Task edit_task2=null;
    private String s_StartDate = null;
    private String s_EndDate = null;
    private String s_ErrorMessage = '';
    private Boolean bshow_thMashup = true;
    private String userId = '';
    private Spotfire sptfire = new Spotfire();
         
        
    
    public String FICClientID
    {
        get { return sptfire.ficClientID;}
        set;
    }
    
    
    public Task getStart()
    {        
        return edit_task1;
    }
    
    public Task getEnd()
    {        
        return edit_task2;
    }
    
    public String getStartDate()
    {
        if(edit_task1 == null || edit_task1.ActivityDate==null ) return '';
        else return s_StartDate;
    }
    
    public String getEndDate()
    {
        if(edit_task2 == null || edit_task2.ActivityDate==null) return '';
        else return s_EndDate;        
    }
    
    public String getErrorMessage()
    {
        return s_ErrorMessage;
    }
    
    public Boolean show_thMashup
    {
        get{return bshow_thMashup;}
        set;
    }
    
        
    public PageReference th_loaddata() {
        
        s_ErrorMessage='';
        
        if(report == '1')
        {
            s_StartDate='';
            s_EndDate='';
            edit_task1.ActivityDate = null;
            edit_task2.ActivityDate = null; 
            bshow_thMashup=true;        
        }
        else
        {
            System.debug('report by date range!!! ' + edit_task1.ActivityDate + ', '+ edit_task2.ActivityDate);
            if(edit_task1.ActivityDate == null || edit_task2.ActivityDate==null)
            {
                s_ErrorMessage = 'WARNING! Please enter a date range before retrieving data.';
                bshow_thMashup=false;
            }
            else if(edit_task1.ActivityDate > edit_task2.ActivityDate )
            {
                System.debug('ERRROR 2 is set');
                s_ErrorMessage = 'WARNING! The end date must occur after the selected start date.';
                bshow_thMashup=false;  
            }
            else
            {
                bshow_thMashup=true;
                System.debug('NO ERROR for radio2!!');
                Date ds = edit_task1.ActivityDate; 
                String s_year = String.valueOf(ds.year());
                String s_month = String.valueOf(ds.month());
                if(s_month.length()<2) s_month = '0' + s_month;
                String s_day = String.valueOf(ds.day());
                if(s_day.length()<2) s_day = '0' + s_day;
                s_StartDate = s_year+s_month+s_day;
        
                Date de = edit_task2.ActivityDate; 
                String e_year = String.valueOf(de.year());
                String e_month = String.valueOf(de.month());
                if(e_month.length()<2) e_month = '0' + e_month;
                String e_day = String.valueOf(de.day());
                if(e_day.length()<2) e_day = '0' + e_day;
                s_EndDate = e_year+e_month+e_day;           
            }
        }
            
           
        return null;
    }
    
    public List<SelectOption> getreporttypes() {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('1','Last 20 Deals'));
        options.add(new SelectOption('2','By Date Range:'));
        return options;
    }
    
    public String getreport() {
        return report;
    }
    
    public void setreport(String r) 
    { 
        this.report = r; 
    }
    
    
    public string Url {   
     get     { return GeneralSettings.getValue(GeneralSettings.SpotfireURL);  
              } 
                      } 
         
    //=================================================================== 
    // Constructor
    //             
    public BUssinessController(ApexPages.StandardController stdController)
    //===================================================================  
    {
        Apexpages.currentPage().getHeaders().put('X-UA-Compatible', 'IE=10');        
        
        this.acct= (Account)stdController.getRecord();
        userId = UserInfo.getUserId();   
        
              
        sptfire.getSpotfireParams(this.acct.Id);
        
        // Initialize tasks        
        edit_task1= new Task();
        edit_task1.OwnerId = userId; 
        edit_task1.Priority = 'Normal';
        edit_task1.ActivityDate = System.TODAY();
        
        edit_task2= new Task();
        edit_task2.OwnerId = userId; 
        edit_task2.Priority = 'Normal';
        edit_task2.ActivityDate = System.TODAY();
               
        
    }

}
Kaustubh LabheKaustubh Labhe
Hi,

You cannot directly 'convert' a VF page in lightning component. The markup is quite different. I would advise you to do a basic trailhead on creating lightning components first.

Thanks
Dinesh_Kumar_NagarathinamDinesh_Kumar_Nagarathinam
You can make your vf page look and feel like lightning page by using SLDS in your vf page.