function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Mohd ImranMohd Imran 

Hi, I am displaying data in lightning component using data table and has been exposed to sites via vf page. Now requirement is all the reocrd name of data table should be clickable and should open detail into new tab in Site where more action can

Hi,
I am displaying data in the lightning component using the data table and have been exposed to Sites via the VF page. Now the requirement is, all the records of the table should be clickable and open detail into a new tab in Site where more action can be placed onto the detail page.

 This works fine when I use this component in Salesforce Lightning App or preview from the developer console. it's clickable and opens in a new tab.

Whereas opening in new tab does not work when I expose this component to Site.    

Any Suggestion, below are the snippet code.

component.set('v.columns',[
            {label: 'Job ID', fieldName: 'linkName', type: 'url', sortable:true, typeAttributes: { label:{ fieldName: 'Name'}, target:'_blank'}}


if(state === "SUCCESS"){
                var storeResponse = response.getReturnValue();
                console.log('storeResponse.length is ',storeResponse.length);
                storeResponse.forEach(function(record){
                    record.linkName = '/'+record.Id;
                });
Best Answer chosen by Mohd Imran
Marzorati ClaudioMarzorati Claudio
Hi Mohd,

in your datatable you have the recordId, that you can use to open another component in a section visible with <aura:if isTrue="{!v.detailView}">, where for example use a lightning:recordViewForm.

Here an example to handle the action in your rows 
handleRowAction: function (component, event, helper) {
	var action = event.getParam('action');
	var row = event.getParam('row');
	switch (action.name) {
		case 'edit_status':
			helper.editRowStatus(component, row, action);
			break;
		case 'open':
			component.set("v.recordId", row.id);
			component.set("v.detailView", true);
			break;
	}
}

No tab and you can simplify the navigation.

All Answers

Marzorati ClaudioMarzorati Claudio
Hi Mohd,

opening a new tab is a requirement?

You can do in a different way.
You can try to use two sections with aura:if
  
<aura:if isTrue="{conditions}">
</aura:if>

when you want to open the detail view you can switch in one section, otherwise in the other. Below an example.
  
<aura:if isTrue="{!v.detailView}">
	/** code here */
</aura:if>

<aura:if isFalse="{!v.detailView}">
	/** code here */
</aura:if>

With this scenario you never lose the focus in the page.

A can give you more example if you need
I did the same with lwc hosted in salesforce site, by using the 
  
<template if:true={firstChoise}>
	/** code here */
</template>

<template if:true={secondChoise}>
	/** code here */
</template>

Claudio
Mohd ImranMohd Imran
Hi Claudio, thanks for your response.
New tab is not the requirement, we wanted to achieve like that.
Customer need only solution so they would be least bother how to achieve this.

Your idea looks better approach n could you please elaborate it ?
In data table onclick of a record need to open the record detail where we would need to
place some more actions as per the requirement
Marzorati ClaudioMarzorati Claudio
Hi Mohd,

in your datatable you have the recordId, that you can use to open another component in a section visible with <aura:if isTrue="{!v.detailView}">, where for example use a lightning:recordViewForm.

Here an example to handle the action in your rows 
handleRowAction: function (component, event, helper) {
	var action = event.getParam('action');
	var row = event.getParam('row');
	switch (action.name) {
		case 'edit_status':
			helper.editRowStatus(component, row, action);
			break;
		case 'open':
			component.set("v.recordId", row.id);
			component.set("v.detailView", true);
			break;
	}
}

No tab and you can simplify the navigation.
This was selected as the best answer
Sumana R 15Sumana R 15
Hello everyone, 
I am trying to create a component that accepts 'n' number of case numbers as comma saperated values and a picklist field named Status. Once the user clicks on Update case status button, the status of all the selected case numbers must be updated as per the value selected in the picklist

The code is saved but i am getting error on click on the update status button. 

Component: 
<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="CaseStatusUpdateClass">
       
    <aura:attribute name="userList" type="List"/>
    <aura:attribute name="caseNo" type="String"/>
    <ui:inputTextArea aura:id="caseno" label="Enter Case numbers" value="Enter Case numbers" rows="5"/>
    
    <aura:attribute name="caseStatusAtt" type="String"/>
    <div class="row">
        
        <p class="title">Select Case Status: </p>
        
    	<ui:inputSelect class="Single" aura:id="CaseStatus">
            <ui:inputSelectOption text="In Progress"/>
            <ui:inputSelectOption text="Closed"/>
            <ui:inputSelectOption text="Working"/>
            <ui:inputSelectOption text="Escalated"/>
            <ui:inputSelectOption text="None"/>
        </ui:inputSelect> 
    </div>
   
    <ui:button class="button" label="Update Case Status" press="{!c.setStatus}"/>
    
    
</aura:component>

Controller JS: 
({
	setStatus : function(component, event, helper) {
        var caseno = component.find("caseno").get("v.value");
        component.set("v.caseNo",caseno);
        console.log('---caseno---',caseno);
        
        var status = component.find("caseStatusAtt").get("v.value");
        component.set("v.CaseStatus",caseStatusAtt);
        console.log('---caseStatus---',caseStatusAtt);
        
        helper.CaseStatusUpdateClass(component,event,helper);
	}
})

Helper: 
({
	CaseStatusUpdateClass : function(component, event, helper) {
        var caseno = component.get("v.caseNo");//here we are getting the case number we entered
        var action = component.get("c.getcasenew");//here we calling apex method
        
        action.setParams({ caseno1 : caseno, CaseStatusToSet : CaseStatus });
        action.setCallback(this, function(response){
            var state = response.getState();
            console.log(response.getReturnValue());
        });
        $A.enqueueAction(action);
	} 
})
Apex Class: 
public class CaseStatusUpdateClass {
    @auraEnabled
    public String caseno {get; set;}
    @auraEnabled
    public String CaseStatus {get; set;}
	@auraEnabled
    public static String getcasenew(String caseno1, String CaseStatusToSet){
        system.debug('----------yes---');
        
        String status = CaseStatusToSet;
        // you need to create another list for updation --just add the case in that list and then update
        string caseNum = caseno1;
        List<Case> caseupdate = new List<Case>();
        system.debug('--casenumber---'+caseNum);
        List<Case> existingCaseList = [Select id from case where CaseNumber =:caseno1];
        system.debug('caseList---->'+existingCaseList);
        system.debug('caseStatus---->'+CaseStatusToSet);
        for(Case c : existingCaseList){
           Case cc = new Case();
            cc.Id = c.id;
            cc.Status = status;
            caseupdate.add(cc);
            
        }
        //always check for null - best practise
        if(caseupdate!=null && !caseupdate.isEmpty()){
            update caseupdate;
        	return 'Updated successfully';
        }else{
            return 'Test error';
        }        
    }
}

Any help is appreciated 
Mohd ImranMohd Imran
Hi Sumana,
There was some issue in your code that I have corrected and works fine in my dev org. please use below code to test it.

Component code:
<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="CaseStatusUpdateClass">
       
    <aura:attribute name="userList" type="List"/>
    <aura:attribute name="caseNo" type="String"/>
    <ui:inputTextArea aura:id="caseno" label="Enter Case numbers" class="field" value="{!v.caseNo}" rows="5"/>
    
    <aura:attribute name="caseStatusAtt" type="String"/>
    <div class="row">
        
        <p class="title">Select Case Status: </p>
        
        <ui:inputSelect class="Single" aura:id="CaseStatus">
            <ui:inputSelectOption text="In Progress"/>
            <ui:inputSelectOption text="Closed"/>
            <ui:inputSelectOption text="Working"/>
            <ui:inputSelectOption text="Escalated"/>
            <ui:inputSelectOption text="None"/>
        </ui:inputSelect> 
    </div>
   
    <ui:button class="button" label="Update Case Status" press="{!c.setStatus}"/>
    
    
</aura:component>

JS Controller:
({
    setStatus : function(component, event, helper) {
        var caseno = component.find("caseno").get("v.value");
        component.set("v.caseNo",caseno);
        console.log('---caseno---',caseno);
        
        var status = component.find("CaseStatus").get("v.value");
        component.set("v.caseStatusAtt",status);
        console.log('---caseStatusAtt---',status);
        
        helper.CaseStatusUpdateClass(component,event,helper);
    }
})

Helper :
({
    CaseStatusUpdateClass : function(component, event, helper) {
        var caseno = component.get("v.caseNo");//here we are getting the case number we entered
        var caseStatusAtt = component.get("v.caseStatusAtt");
        var action = component.get("c.getcasenew");//here we calling apex method
        
        action.setParams({ caseno1 : caseno, CaseStatusToSet : caseStatusAtt });
        action.setCallback(this, function(response){
            var state = response.getState();
            console.log(response.getReturnValue());
        });
        $A.enqueueAction(action);
    } 
})

Apex Controller:
public class CaseStatusUpdateClass {
    @auraEnabled
    public String caseno {get; set;}
    @auraEnabled
    public String CaseStatus {get; set;}
    @auraEnabled
    public static String getcasenew(String caseno1, String CaseStatusToSet){
        system.debug('----------yes---');
        
        String status = CaseStatusToSet;
        // you need to create another list for updation --just add the case in that list and then update
        list<string> caseNum = caseno1.split(',');
        //string caseNum = caseno1;
        List<Case> caseupdate = new List<Case>();
        system.debug('--casenumber---'+caseNum);
        string query = 'Select id from case where CaseNumber IN: caseNum ';
        system.debug('query is '+ query);
        List<Case> existingCaseList = Database.query(query);
        //List<Case> existingCaseList = [Select id from case where CaseNumber IN :caseNum];
        system.debug('caseList---->'+existingCaseList);
        system.debug('caseStatus---->'+CaseStatusToSet);
        for(Case c : existingCaseList){
           Case cc = new Case();
            cc.Id = c.id;
            cc.Status = status;
            caseupdate.add(cc);
            
        }
        //always check for null - best practise
        if(caseupdate!=null && !caseupdate.isEmpty()){
            update caseupdate;
            return 'Updated successfully';
        }else{
            return 'Test error';
        }        
    }
}