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" />
    
<apex:inputField id="c_startDate" value="{!Start.ActivityDate}" />
</td>
<td width="250px">
<apex:OutputLabel value="End Date" for="c_endDate" />
    
<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 >
    
<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();


}

}

February 1, 2019
·
Answer
·
Like
0
·
Follow
2

Kaustubh 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

February 1, 2019
·
Like
0
·
Dislike
0

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

February 2, 2019
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

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 ?

You need to sign in to do that.