You need to sign in to do that
Don't have an account?
Pooja Nekkalapudi
ui:OutputRichText Component Error
Uncaught afterRender threw an error in 'ui:outputRichText' [Cannot read property 'querySelectorAll' of null]
Any ideas as to how to resolve this
Lightning Cmp:
<div class="slds-modal__content slds-p-around--medium" style="display: flex;">
<ui:outputRichText class="slds-text-longform " value="{!v.cellVal}"/>
</div>
Lightning Js :
({
render: function(cmp, helper) {
var ret = this.superRender();
var isRef = cmp.get('v.curFld.isRef');
var fldType = cmp.get('v.curFld.fldType');
var cmpType;
var attrs = {};
if(isRef) {
cmpType = 'c:Link';
attrs['curFld'] = cmp.get('v.curFld');
attrs['cellVal'] = cmp.get('v.cellVal');
attrs['lkupId'] = cmp.get('v.lkupId');
} else {
attrs.value = cmp.get('v.cellVal');
if( fldType==='ID' || fldType==='COMBOBOX' ||
fldType==='ENCRYPTEDSTRING' || fldType==='BASE64' ||
fldType==='PICKLIST' || fldType === 'MULTIPICKLIST' || fldType === 'TIME') {
cmpType = 'ui:outputRichText';
} else if(fldType === 'LOCATION'){
if(attrs.value){
cmpType='lightning:buttonIcon';
attrs.iconName ="utility:checkin";
attrs.onclick= cmp.getReference("c.openMapModelBox");
}
}else if (fldType === 'DATE') {
cmpType = 'ui:outputDate';
}else if (fldType === 'DATETIME' ) {
attrs.value=$A.localizationService.formatDateTimeUTC(cmp.get('v.cellVal'), "MM/DD/YYYY hh:mm a");
cmpType = 'ui:outputRichText';
} else if (fldType === 'BOOLEAN') {
cmpType = 'ui:outputCheckbox';
} else if (fldType === 'CURRENCY') {
cmpType = 'ui:outputCurrency';
} else if (fldType === 'DOUBLE' || fldType === 'INTEGER') {
cmpType = 'ui:outputNumber';
} else if (fldType === 'PERCENT') {
cmpType = 'ui:outputNumber';
} else if (fldType === 'EMAIL') {
cmpType = 'ui:outputEmail';
} else if (fldType === 'PHONE') {
cmpType = 'ui:outputPhone';
} else if (fldType === 'STRING' || fldType === 'TEXTAREA') {
//var Components=[];
$A.createComponents([
["aura:HTML", {
"tag": "div",
"HTMLAttributes": {
"class" : 'imgSize',
"onclick": cmp.getReference('c.handlePress'),
"Id" : cmp.get('v.cellVal')
}
}],
["ui:outputRichText", {
"class" : 'imgSize',
"value": cmp.get('v.cellVal')
}]
],
function(Components, status, statusMsgLst) {
if(cmp.isValid()){
var divTag = Components[0];
var textTag = Components[1];
var divBody =divTag.get("v.body");
divBody.push(textTag);
divTag.set("v.body",divBody);
var body = cmp.get('v.body');
body.push(divTag);
cmp.set('v.body', body);
}
});
return ret;
// cmpType.push("ui:outputRichText");
} else if (fldType === 'URL') {
attrs.label = cmp.get('v.cellVal');
attrs.target='_blank';
cmpType = 'ui:outputURL';
}
/* Not currently handling images */
if(fldType === 'PERCENT' && attrs.value) {
attrs.value += '%';
}
if(fldType === 'DATE' && attrs.value) {
attrs.format = 'M/DD/YYYY';
}
// if(fldType === 'DATETIME' && attrs.value) {
// attrs.format = 'M/DD/YYYY h:mm a';
// }
}
if(cmpType){
$A.createComponent(cmpType, attrs, function(newCmp, status, statusMsgLst) {
if(cmp.isValid()){
var body = cmp.get('v.body');
body.push(newCmp);
cmp.set('v.body', body);
}
});
}
return ret;
}
})
Any ideas as to how to resolve this
Lightning Cmp:
<div class="slds-modal__content slds-p-around--medium" style="display: flex;">
<ui:outputRichText class="slds-text-longform " value="{!v.cellVal}"/>
</div>
Lightning Js :
({
render: function(cmp, helper) {
var ret = this.superRender();
var isRef = cmp.get('v.curFld.isRef');
var fldType = cmp.get('v.curFld.fldType');
var cmpType;
var attrs = {};
if(isRef) {
cmpType = 'c:Link';
attrs['curFld'] = cmp.get('v.curFld');
attrs['cellVal'] = cmp.get('v.cellVal');
attrs['lkupId'] = cmp.get('v.lkupId');
} else {
attrs.value = cmp.get('v.cellVal');
if( fldType==='ID' || fldType==='COMBOBOX' ||
fldType==='ENCRYPTEDSTRING' || fldType==='BASE64' ||
fldType==='PICKLIST' || fldType === 'MULTIPICKLIST' || fldType === 'TIME') {
cmpType = 'ui:outputRichText';
} else if(fldType === 'LOCATION'){
if(attrs.value){
cmpType='lightning:buttonIcon';
attrs.iconName ="utility:checkin";
attrs.onclick= cmp.getReference("c.openMapModelBox");
}
}else if (fldType === 'DATE') {
cmpType = 'ui:outputDate';
}else if (fldType === 'DATETIME' ) {
attrs.value=$A.localizationService.formatDateTimeUTC(cmp.get('v.cellVal'), "MM/DD/YYYY hh:mm a");
cmpType = 'ui:outputRichText';
} else if (fldType === 'BOOLEAN') {
cmpType = 'ui:outputCheckbox';
} else if (fldType === 'CURRENCY') {
cmpType = 'ui:outputCurrency';
} else if (fldType === 'DOUBLE' || fldType === 'INTEGER') {
cmpType = 'ui:outputNumber';
} else if (fldType === 'PERCENT') {
cmpType = 'ui:outputNumber';
} else if (fldType === 'EMAIL') {
cmpType = 'ui:outputEmail';
} else if (fldType === 'PHONE') {
cmpType = 'ui:outputPhone';
} else if (fldType === 'STRING' || fldType === 'TEXTAREA') {
//var Components=[];
$A.createComponents([
["aura:HTML", {
"tag": "div",
"HTMLAttributes": {
"class" : 'imgSize',
"onclick": cmp.getReference('c.handlePress'),
"Id" : cmp.get('v.cellVal')
}
}],
["ui:outputRichText", {
"class" : 'imgSize',
"value": cmp.get('v.cellVal')
}]
],
function(Components, status, statusMsgLst) {
if(cmp.isValid()){
var divTag = Components[0];
var textTag = Components[1];
var divBody =divTag.get("v.body");
divBody.push(textTag);
divTag.set("v.body",divBody);
var body = cmp.get('v.body');
body.push(divTag);
cmp.set('v.body', body);
}
});
return ret;
// cmpType.push("ui:outputRichText");
} else if (fldType === 'URL') {
attrs.label = cmp.get('v.cellVal');
attrs.target='_blank';
cmpType = 'ui:outputURL';
}
/* Not currently handling images */
if(fldType === 'PERCENT' && attrs.value) {
attrs.value += '%';
}
if(fldType === 'DATE' && attrs.value) {
attrs.format = 'M/DD/YYYY';
}
// if(fldType === 'DATETIME' && attrs.value) {
// attrs.format = 'M/DD/YYYY h:mm a';
// }
}
if(cmpType){
$A.createComponent(cmpType, attrs, function(newCmp, status, statusMsgLst) {
if(cmp.isValid()){
var body = cmp.get('v.body');
body.push(newCmp);
cmp.set('v.body', body);
}
});
}
return ret;
}
})