Posted on

HTML textarea element that can be editable or read-only

Input Text Area

HTML textarea element that can be editable or read-only. Scroll bars may not appear on Chrome browsers in Android devices, but you can select focus in the textarea to activate scrolling.

Component

<aura:component>
<ui:inputTextArea aura:id=”comments” label=”Comments” value=”My comments” rows=”5″/>
<ui:button class=”btn” label=”Submit” press=”{!c.setOutput}”/>

<div aura:id=”msg” class=”hide”>
You entered: <ui:outputTextArea aura:id=”oTextarea” value=””/>
</div>
</aura:component>

Controller :

({
setOutput : function(component, event, helper) {
var cmpMsg = component.find(“msg”);
$A.util.removeClass(cmpMsg, ‘hide’);

var comments = component.find(“comments”).get(“v.value”);
var oTextarea = component.find(“oTextarea”);
oTextarea.set(“v.value”, comments);
}
})

CSS :

.THIS.hide {
display: none;
}

.THIS.btn {
margin-bottom: 10px;
}

.THIS label.uiLabel {
padding-right: 12px;
}

.THIS textarea {
border: 1px solid #dce4ec;
border-radius: 4px;
width: 200px;
}

– Yeshas [10/30/2018]

Posted on

Adding RichText area field in a lightning component

How to add a RichText area field in a lightning component without getting FIELD INTEGRITY EXCEPTION
You can add a change handler event which basically does that, tracks changes on specified values:

Component

<aura:component implements=”forceCommunity:availableForAllPageTypes” access=”global” >
<aura:attribute name=”myVal” type=”String” />
<aura:handler name=”change” value=”{!v.myVal}” action=”{!c.handleValueChange}”/>

<lightning:inputRichText value=”{!v.myVal}” aura:id=”grr”/>
</aura:component>

controller.js

handleValueChange:function(cmp){
console.log(“value: ” + cmp.get(‘v.myVal’));
}

CSS :

.THIS .Resizable {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}

– Yeshas [10/30/2018]

Posted on

How to use Named credentials for Callouts (Integrations)

In the call outs or Integrations that we do from Salesforce to External Systems, we should pass the Endpoint URL and Password in the Header to hit the External System.

Using the Named Credentials we can Put these Endpoint URL and Password in a Label and can expose that label in the code.

Below are the Steps for Navigating to Named credentials:

Setup -> Type Named Credentials -> Setup the Named Credentials with all the details

 

This is considered as one of the best practices (Not exposing the URL and Password in the code)

– Sumanth A [10/25/18]

Posted on

Check for Empty strings in Java Script

Below is the code for checking the Empty Strings present in the Java Script

string str;

if(str != ‘undefined’ && str != null && str != ” && str != undefined && str != ‘null’ && str != ‘ ‘ && str.trim() != ”)
{
// if string is not empty do your logic

}
else // if string is empty
{
do your logic
}

Using this we can check the empty strings in JavaScript.

– Sumanth A [10/25/18]

Posted on

Date: An input field for entering a date.

A ui:inputDate component represents a date input field, which is rendered as an HTML input tag of type text on desktop. To apply Lightning Design System styling, we recommend that you use lightning:inputwith type="date" instead of ui:inputDate.

Component Code

<aura:component>
<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}”/>
<aura:attribute name=”today” type=”Date” default=””/>

<ui:inputDate aura:id=”expdate” label=”Today’s Date” class=”field” value=”{!v.today}” displayDatePicker=”true” />
<ui:button class=”btn” label=”Submit” press=”{!c.setOutput}”/>

<div aura:id=”msg” class=”hide”>
You entered: <ui:outputDate aura:id=”oDate” value=”” />
</div>
</aura:component>

Controller

({
doInit : function(component, event, helper) {
var today = new Date();
component.set(‘v.today’, today.getFullYear() + “-” + (today.getMonth() + 1) + “-” + today.getDate());
},

setOutput : function(component, event, helper) {
var cmpMsg = component.find(“msg”);
$A.util.removeClass(cmpMsg, ‘hide’);
var expdate = component.find(“expdate”).get(“v.value”);

var oDate = component.find(“oDate”);
oDate.set(“v.value”, expdate);

}
})

CSS

.THIS.hide {
display: none;
}

.THIS.btn {
margin-bottom: 10px;
}

.THIS label.uiLabel {
padding-right: 12px;
}

.THIS .field{
padding: 5px;
border: 1px solid #dce4ec;
border-radius: 2px;
}

– Chandra [10/22/18]