Lightning Datatable with fixed horizontal and vertical columns in Salesforce

.THIS .mydiv {
    max-width: 100em !important;
    max-height: 20em !important;
    overflow: scroll;
    position: relative;
  }
   
  .THIS table {
    position: relative;
    border-collapse: collapse;
  }
   
  .THIS td {
    padding: 0.25em;
  }
  .THIS th {
    padding: 0.25em;
  }
   
  .THIS thead th {
    position: -webkit-sticky !important; /* for Safari */
    position: sticky !important;
    top: 0;
    z-index: 1;
  }

  .THIS table thead th:first-child {
    position: sticky !important;
    left: 0;
    z-index: 2;
  }
  
  .THIS table tbody th {
    position: sticky !important;
    left: 0;
    background: white;
    z-index: 1;
  }

Salesforce Lightning Message Channel (LMC) communication

 *** Lightning Message Channel (LMC) ***

1. Vs Code: Create a folder with the name "messagechannels" (under main\default)

2. Vs Code: Create meta file with the name "ChannelName.messageChannel-meta.xml" -

    <?xml version="1.0" encoding="UTF-8"?>

    <LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">

        <masterLabel>ChannelName</masterLabel>

        <isExposed>true</isExposed>

        <description>Message Channel used for the communication.</description>

        <lightningMessageFields>

            <fieldName>fieldData</fieldName>

            <description>Variable used for lms data</description>

        </lightningMessageFields>

    </LightningMessageChannel>

3. Create a VS Page (lmcVfPage) -

    <script>

    let ChannelNameVar = "{!$MessageChannel.ChannelName__c}";

    let subscribedRef;

    

    function publish(){

        const payload = {

            fieldData: { //this name should be the channel field name

                value: 'some data to send'

            }

        };

        sforce.one.publish(ChannelNameVar, payload)

    }

    

    function subscribe(){

        if(!subscribedRef)

            subscribedRef = sforce.one.subscribe(ChannelNameVar, messageHandler, {scope:"APPLICATION"})

    }

    

    function unsubscribe(){

        if(subscribedRef) {

            sforce.one.unsubscribe(subscribedRef);

            subscribedRef = null;

        }

    }

    function messageHandler(message){

        console.log(`message: ${message.fieldData}`);

    }

    </script>

4. Create a Aura Component (lmcAura) -

    UI -

    <lightning:messageChannel type="ChannelName__c" aura:id="ChannelNameId" onMessage="{!c.handleMessage}" scope="APPLICATION"/>

    publish: function (cmp, event, helper) {

        let msg = cmp.get("v.message")

        let message ={

            fieldData:{

                value: msg

            }

        }

        cmp.find("ChannelNameId").publish(message)

    }

    

    handleMessage: function (cmp, message, helper) {

        if (message !=null && message.getParam("fieldData") !=null){

            console.log(message.getParam("fieldData").value);

        }

    }

5. Create a LWC Component (lmcLwc) -

    import { APPLICATION_SCOPE, publish, createMessageContext, releaseMessageContext, subscribe, unsubscribe } from 'lightning/messageService';

import ChannelNameVar from "@salesforce/messageChannel/ChannelName__c"

LightningElement {

    context = createMessageContext();

    

     publishMessage(){

        const message = {

            fieldData:{

                value: 'Some Value'

            }

        }

        publish(this.context, ChannelNameVar, message)

    }

    subscribeMessage(){

        if (this.subscription){

            return;

        }

        this.subscription = subscribe(this.context, ChannelNameVar, (message)=>{

            this.handleMessage(message)

        }, { scope: APPLICATION_SCOPE})

    }

    unsubscribeMessage(){

        unsubscribe(this.subscription)

        this.subscription = null

    }

    handleMessage(message){

        console.log(lmsData? message.lmsData.value : 'No Message');

    }

    

    disconnectedCallback() {

        releaseMessageContext(this.context)

    }

}

5. Create an App Page and add all vf, aura and lwc components.

    

Delete a record in Aura Datatable

styling and showing the json in visualforce page

Bot (IBM Watson) with Salesforce Research

References:
https://trailhead.salesforce.com/projects/surface-data-from-ibm-watson-discovery-in-salesforce/steps/set-up-a-watson-discovery-plan-on-ibm-bluemix
https://developer.ibm.com/dwblog/2017/watson-discovery-apex-sdk-salesforce/
https://developer.salesforce.com/blogs/developer-relations/2017/03/bot-toolkit-creating-deploying-bots-inside-salesforce.html

Lightning Notes

force:appHostable --> Custom Tab
flexipage:availableForAllPageTypes --> Makes your component available for record pages and any other type of page, including a Lightning app’s utility bar.
flexipage:availableForRecordHome --> If your component is designed for record pages only, implement this interface instead of flexipage:availableForAllPageTypes.
force:hasRecordId -->  Add the force:hasRecordId interface to a Lightning component to enable the component to be assigned the ID of the current record.
forceCommunity:availableForAllPageTypes --> To appear in the Community Builder, a component must implement the forceCommunity:availableForAllPageTypes interface.
force:lightningQuickAction --> to a Lightning component to enable it to be used as a custom action in Lightning Experience or the Salesforce mobile app.
--------------------------
access = "global" --> To use it outside of the component name space.
-------------------------------

There are three ways of inserting a style sheet:

Inline style --> not supported in lightning compnent
Internal style sheet --> style resource
External style sheet --> <ltng:require styles="{!$Resource.***resourceName***}" />

The element Selector
---------------------
p {
    text-align: center;
    color: red;
}

The id Selector
----------------
#para1 {
    text-align: center;
    color: red;
}

The class Selector
------------------
.center {
    text-align: center;
    color: red;
}

specify that only specific HTML elements should be affected by a class
---------------------------
p.center {
    text-align: center;
    color: red;
}

p.large {
    font-size: 300%;
}

<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>

Grouping Selectors
---------------------
h1, h2, p {
    text-align: center;
    color: red;
}

CSS Comments
----------------
p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */


---------------

Difference between lightning:button & ui:button
-----------
If you go thru the Lightning base components release notes, you will notice that the Base components are more of an extended implementation of the existing UI components.

here's an extract of the related section

You can find base Lightning components in the lightning namespace to complement the existing ui namespace components. In instances where there are matching ui and lightning namespace components, we recommend that you use the lightning namespace component. The lightning namespace components are optimized for common use cases. Beyond being equipped with the Lightning Design System styling, they handle accessibility, real-time interaction, and enhanced error messages.

Over a period, the base components will have more features built into it which can be easily configured / controlled by additional attributes.

---------------------
JavaScript Basics
=================
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};

document.getElementById("demo").innerHTML = person.fullName();
</script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // Removes the first element "Banana" from fruits

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // Removes the last element ("Mango") from fruits

Understanding JavaScript Controllers Versus Helpers In Lightning Components
https://developer.salesforce.com/blogs/developer-relations/2015/06/understanding-javascript-controllers-versus-helpers-lightning-components.html

https://developer.salesforce.com/blogs/author/rraodv


Component Rendering -
https://developer.salesforce.com/blogs/developer-relations/2015/06/understanding-system-events-lightning-components-part-2.html

Loading External JavaScript And CSS Libraries To Lightning Components -
https://developer.salesforce.com/blogs/developer-relations/2015/05/loading-external-js-css-libraries-lightning-components.html

Event Propagation -
https://developer.salesforce.com/blogs/developer-relations/2017/08/depth-look-lightning-component-events.html

-----------------------------------------------------------
Different way of handling server callback -
**********************************
// Create server request
var action = component.get("c.getExpenses");

// Send server request
$A.enqueueAction(action);

// ... time passes ...

// Handle server response
var state = action.response.getState();
if (state === "SUCCESS") {
    component.set("v.expenses", action.response.getReturnValue());
}
---------------------------------------------
Map Syntax in Lightning javaScript -
*****************************

var parammap = {

                "sortField" : cmp.get("v.sortField"),

                "sortOrder" : cmp.get("v.sortOrder"),

                "objectName" : cmp.get("v.objectName"),

                "fieldSetName" : cmp.get("v.fieldSetName")

        };

-----------------------------------

 

Displaying text in td cell in multiple lines Salesforce

TD text value in multiple lines -

<apex:page >
<apex:form>
<table>
<tr><td>
    <div id="myDiv"/>
    </td></tr>
    </table>    
    <apex:commandButton onclick="myFunction();" value="NextLine" reRender="dummy"/>
    <apex:outputPanel id="dummy"/>
    </apex:form>
    <script>
        function myFunction() {
            document.getElementById('myDiv').innerHTML='<apex:outputText escape="false" value="{!$Label.sample}"/>';
            //$Label.sample -->This is <strong><font color="#FF0000"></font></strong> Test Label111 <br/> second Line
            alert('hi');
        }
    </script>
</apex:page>

Result: