Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Thursday, November 28, 2019

How To Access Parent Object Or Relationship Object Fields In LWC DataTable

Lets consider a case where we have 2 objects as listed below.
  • Activities__c  // Child Object
  • Transaction__c    //Parent Object
Now if you want to display all activities related to a particular transaction and as well as you want to show some field values related to transaction on each activity record (Ex: PNR and Status).

Unfortunately similar to VF pages you can't directly access them in LWC templates .So,we have to do some changes on data set (list of recors) before we display it in html template.

Solution:

We have to set/update the related field column value for each record before pushing/adding it into the list.

this.allActivitiesData = data.map(
   record => Object.assign(
 { "Transaction__r.Status__c": record.Transaction__r.Status__c, "Transaction__r.PNR__c": record.Transaction__r.PNR__c},
  record
  )
);

Complete Solution With Sample Code:


ActivitiesFlowCntrl.cls

global class ActivitiesFlowCntrl
{
    
    public ActivitiesFlowCntrl()
    {
      System.debug('Inside constructor..');
    }

    @AuraEnabled(cacheable=true)
    public static List<Activities__c> fetchActivities(String recdId)
    {
        List<Activities__c> lstAct = new List<Activities__c>()
        lstAct = [SELECT id,Name,Act_Name__c,Act_Type__c,Amount__c,Start_Time__c,
                  End_Time__c,Act_UniqueId__c,Transaction__r.Status__c,
                  Transaction__r.PNR__c FROM Activities__c 
                  WHERE Transaction__c=:recdId];
       return lstAct;
    }
}

ActivitiesFlow.js

import { LightningElement, api, track, wire } from "lwc";
import fetchActivities from "@salesforce/apex/ActivitiesFlowCntrl.fetchActivities";

const columns = [
    { label: 'Id', fieldName: 'Name' },
    { label: 'Name', fieldName: 'Act_Name__c' },
    { label: 'Type', fieldName: 'Act_Type__c' },
    { label: 'Status', fieldName: 'Transaction__r.Status__c' },
    { label: 'PNR', fieldName: 'Transaction__r.PNR__c' },
    { label: 'Amount', fieldName: 'Amount__c', type: 'currency' },
    { label: 'StartTime', fieldName: 'Start_Time__c', type: 'date' },
    { label: 'End Time', fieldName: 'End_Time__c', type: 'date' },
    { label: 'UniqueId', fieldName: 'Act_UniqueId__c' }

];

export default class ActivitiesFlow extends LightningElement 
{
  
  @track allActivitiesData;
  
  @wire(fetchActivities, { recdId: '$sfrecordId' })
    wiredActivities({ error, data }) {
       if (data) 
       {
          this.allActivitiesData =  data.map(
      record => Object.assign(
  { "Transaction__r.Status__c": record.Transaction__r.Status__c, "Transaction__r.PNR__c": record.Transaction__r.PNR__c},
  record
       )
            );
         
        }
 else if (error) {
            this.error = error;
            this.allActivitiesData = undefined;
           
        }
 }
}

ActivitiesFlow.html

<template>
    <template if:true={allActivitiesData}>
        <lightning-datatable data={allActivitiesData} columns={columns} key-field="id" hide-checkbox-column="true"></lightning-datatable>
    </template>
</template>


Hope this helped you..Enjoy..!

Wednesday, July 10, 2019

How To Check Whether User is In Console or Not in Lightning Experience

Basically if you want to check whether user in Lightning experience console(sales/service consoles in lightning experience not the just lightning experience ) you can use the same sforce console methods which you have used in classic.This method will support in lightning experience with out any changes.

Sample code:

<apex:page> 
<apex:includeScript value="/support/console/42.0/integration.js" /> 
<apex:includeScript value="/support/api/41.0/interaction.js"/> 

<button onclick="openTab();" > Console openPrimaryTab</button> 

<script> 
function inConsole() { 
if (sforce.console.isInConsole()) { 
alert('In console'); 
}else { 
alert('Not in console'); 
} 
}
</apex:page>

Note:
Even after using this if it's not working please check you version of /support/api/42.0/integration.js. If your version is below 42 then it will not work.So,please change the version it will work automatically.

Hope this helped you..Enjoy!..

Saturday, July 6, 2019

Base Lightning Components in Salesforce LWC

In Lightning web components(lwc) we will Base Lightning Components to display the particular record information/to create a record quickly with provided information with out using any custom apex.

List of the available Base Lightning Components are
  • lightning-record-edit-form
  • lightning-record-form
  • lightning-record-view-form

lightning-record-edit-form:

  • This component wrapper accepts the record id to display one or more fields and labels related to that field corresponding to given record id 
  • This will not require any apex because it uses Lightning Data Services to fetch the data
  • This will not support Standard objects like Task and Events.
  • Use lightning-output-field to display data in read only format
  • Use lightning-input-field to edit these fields in edit on record edit page

lightning-record-form:

  • Use this component to build the forms quickly to create a record,view the record or to update the record. 
  • Building the record creation forms is easier than building the form using lightning-record-edit-form and lightning-record-view-form. 
  • This component accepts 4 properties like object name which is mandatory,record id which is optional in case of create record ,mode to specify view/edit/read only and layout type like Full or compact
  • It will also takes care of FLS and sharing rules
 <lightning-record-form  
   record-id="739hchjsh773"  
   object-api-name="Position__c"  
   layout-type="Full"  
   mode="view">  
 </lightning-record-form>  

lightning-record-view-form:

  • Use this component when you want to dispaly the record on view mode
  • This will not require any apex because it uses Lightning Data Services to fetch the data
  • This will not support Standard objects like Task and Events.
  • It will also takes care of FLS and sharing rules.

For more information refer:

Hope this helps you...Enjoy!

Wednesday, August 23, 2017

CSS Styles/Scripts Are Not Working in Salesforce Force.com Sites

If your styles/scripts are working perfectly in Sandbox and Production preview but if it's not working on Force.com sites which has hosted publicly on Sales force server below points might be the issue.

Your page is referring to some external CSS/JS files:

<apex:page>
 <head>
 <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
<apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" /> 
</head>
<apex:form>
  ----
  ----
</apex:form>
</apex:page>

If your referring any styles/scripts from external sources with out storing them in Static Resource you will end up with problem Please store that files in Statistic resource and then use it then it will work in Force.com sites as well.


<apex:page>
 <head>
  <apex:includeScript value="{!$Resource.dataTableJS}"/>
  <apex:stylesheet value="{!$Resource.dataTableCSS}" />
</head>
<apex:form>
  ----
  ----
</apex:form>
</apex:page>


Your Static Resource is File not accessible publicly



If your using any static resource in your page and if that static resource is not accessible publicly (Cache Control set to Private) then styles will not reflect in Force.com sites.So mark your Static resources cache control as Public



Hope this helps you...Enjoy!


How to Invoke the REST API from the Visual Force Page in Salesforce

Problem:
We usually making a lot of API calls from Salesforce to External systems to get the some data or to pass the some updates to External Systems.All these calls will be made from the Apex class to External systems. What if you have situation like where you need to make a call to external systems from the visual force page.

Solution:
No need to worry still we have option to make an REST API call from the page directly.How?As we already know that Salesforce has introduced a concept called AJAX ToolKit.This is an frame which will be used to make all the operations from JavaScript similar to APEX. With help of this tool kit you can make an REST API call from the Script in Visual Force Page

Flow Diagram:
 

Sample Source Code:

<apex:page standardController="Account">
<apex:includeScript value="//code.jquery.com/jquery-1.11.1.min.js" />
<script src="../../soap/ajax/40.0/connection.js" type="text/javascript"></script>

<script>
function makeAPICall() 
{
    var weblink = //Your API endpoint 'https://www.yourednpoint/';
 
    $j.ajax({
  url: weblink,
  type: 'GET', // Type POST or GET
  dataType: 'json',
  beforeSend: function(request) {
      // Add All your Headers Here if Any
   request.setRequestHeader('HeaderString','HeaderValue');
   //Sample Headers 
   request.setRequestHeader('Country', 'IND');
   request.setRequestHeader('Currency', 'INR');
  },

  crossDomain: true,
  
  //If Successfully executed 
  success: function(result) {
   
   //Response will be stored in result variable in the form of Object.Please use result variable for processing
    console.log('Response Result'+result); 
    
      //If you want to convert JSResponse Object to JSON response 
    var jsonResp = JSON.stringify(result));

  },
  
  //If any Error
  
  error: function(jqXHR, textStatus, errorThrown) {
   
   // alert('ErrorThrown: ' + errorThrown);
  }
    });
}
</script>
<apex:form>
  call javaScript method from here to make an api call invocation
</apex:form>
</apex:page>

Hope this helps you....Enjoy!
 

Saturday, July 1, 2017

How to Check Whether All Check Boxes Selected Or Not in Visual Force Page Using Jquery

In my previous post we have discussed about how to check whether at least one check box is checked or not in visual force it's very easy using Jquery .In this post we are going to know about how to check whether all check boxes has selected or not? using Jquery .Please use the below code snippet to check this functionality.

Sample Source Code:


function selectionCheck(selClass)
   {
          
     var chbxClass = '.'+selClass; // selClass is styleclass name for all your checkbox
  
 if ($(chbxClass+':checked').length == $(chbxClass).length) 
        {
        
          alert('You have selected all records for Action'));           
            
        }
  
 else
 {
  alert('You haven't selected all records'); 
 }
     
  }



Thanks for visiting..hope this helps you!

Monday, April 3, 2017

How To Allow Only Numbers in Phone Number Field in Visual Force Page

If your trying to restrict your phone number field to accept only Numbers in visual force page you can use the below simple JavaScript code to achieve this easily.

Java Script Code:
<script>

function isNumber(evt) {
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
}

</script>

<apex:inputfield value="{!c.Phone__c}" id="boPhone" onkeypress="return isNumber(event)"/>



Thanks for visiting..hope this helps you!

Tuesday, March 28, 2017

How To Check Whether at Least One Check Box Checked or Not? Using JQuery

If you want to know whether at least one check box is checked or not in visual force it's very easy using Jquery .Please use the below code snippet to check this functionality.

Sample Source Code:


function selectionCheck(selClass)
   {
          
        var chbxClass = '.'+selClass; // selClass is styleclass name for all your checkbox
          
        if($(chbxClass).is(':checked'))
  {
   alert('You have selected one or more records');
  }
                
        else
        {
            alert('Please select at least one record');
            return false;
        }
  }


In the above code if you see we are one jQuery method called is() ,this method will loop through the all the list and returns true if at least one record has checked among the list otherwise it will return false.


Thanks for visiting..hope this helps you!