Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Mounica M 10Mounica M 10 

how to redirect to the detail record page when you click a button on a lightning component

how to redirect to the detail record page when you click a button on a lightning component
I have calendar component(component-1) . when ever we click on a date, it pops a table with list of recordspresent in a day(component 2).now when we select a record by checking the check box beside it and click submit button it should be redirected to the record detail page.
Note: all the above is being implemented in a community built for the internal users.
component-2
<aura:component controller="EventDataTableServerCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
    <aura:attribute name="StartTest" type="Date"/>
    <aura:attribute name="StartDate" type="string" default="0"/>
    <aura:attribute name="EndDate" type="String" default="2018-01-02T12:00:00-05:00"/>
    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:attribute name="SelectedRecord" type="String[]" default="0"/> 
    <!-- <aura:attribute name="isOpen" type="boolean" default="false"/> -->
          
    <aura:handler name="change" value="{!v.StartTest}" action="{!c.handleValueChange}"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
      
       <div style="height: 300px;">
        <lightning:datatable data="{! v.mydata }" 
        columns="{! v.mycolumns }" 
        keyField="Id"
        resizeColumnDisabled="True"
        onrowselection="{!c.getSelectedName}"/>
        </div>
    
             
       <lightning:button variant="brand" label="Submit" onclick="{! c.closeModel }" /> 
   
 
  
</aura:component>

controller
({
    init: function (cmp, event, helper) {
        //console.log(new Date(cmp.get('v.StartDate')).getMilliseconds());
        cmp.set('v.mycolumns', [
            {label: 'Event Name', fieldName: 'Name', type: 'text'},
            {label: 'Start Date & Time', fieldName: 'Event_Start_date_and_time__c', type: 'Date/Time'},
            {label: 'End Date & Time', fieldName: 'Event_End_Date__c', type: 'Date/Time'}
        ]);
        //helper.getData(cmp);
    },
    handleValueChange : function (component, event, helper) {
         component.set('v.mycolumns', [
            {label: 'Event Name', fieldName: 'Name', type: 'text'},
            {label: 'Start Date & Time', fieldName: 'Event_Start_date_and_time__c', type: 'Date/Time'},
            {label: 'End Date & Time', fieldName: 'Event_End_Date__c', type: 'Date/Time'}
        ]);
        
        // handle value change
        var date = event.getParam("value");
        component.set('v.StartDate',date);
        //component.set('v.StartDate',event.getParam("value"));
        console.log("old value: " + event.getParam("oldValue"));

        console.log("current value: " + event.getParam("value"));
        helper.getData(component);

    },
    getSelectedName: function (cmp, event) {
        
        var selectedRows = event.getParam('selectedRows');
        for (var i = 0; i < selectedRows.length; i++){
            console.log(selectedRows[i].Id);
            cmp.set('v.SelectedRecord',selectedRows[i].Id);
        }
    },
    
   
           
   },
 
   
      gotoURL : function (cmp, event, helper) {
    var eventId = cmp.get('v.SelectedRecord');
    var navEvt = $A.get("e.force:navigateToSObject");
    navEvt.setParams({
      "recordId": eventId,
    });
    navEvt.fire();
    }
})User-added image
Mounica M 10Mounica M 10
right now we are working on  single event selection 
GauravendraGauravendra
Seems like force:navigateToURL and force:navigateToSObject events only works in Salesforce1 app only.
Lightning datatable onrowselection, will call the method defined on checkbox selection. (So, you can skip submit button).
  
<lightning:datatable data="{!v.accountlist}" columns="{!v.mycolumns}" keyField="id" onrowselection="{!c.getDetail}" />
And in the getDetail function in controller :
Create a string which contain your domain base URL.
Get the record id of selected record. 
getDetail : function(component, event, helper) {
    var selectedRows  = event.getParam('selectedRows');
    var firstId = selectedRows[0].Id;
// you can specify the base url
    var redUrl ="https://xyz-xyz-dev-ed.lightning.force.com/one/one.app#/sObject/";
        window.open(redUrl+firstId);
Append both of them to get full URL.
Use javascript window.open() to redirect to Lightning record page.

Hope this helps.