How to securely pass values from SuiteScript suitelet to an HTML page? - suitescript

I am attempting to pass values from a Suitelet to an HTML page that is being inserted into an INLINEHTML field in the Suitelet form. However, I am unsure of the best way to accomplish this. I am currently doing it in this manner, but I want to ensure that I am using a somewhat secure method ideally, as opposed to allowing for XSS vulnerabilities.
Suitelet INLINEHTML field:
var htmlForm = form.addField({
id: 'custpage_htmlform',
type: ui.FieldType.INLINEHTML,
label: 'HTMLFORM'
});
var fileObj = file.load({
id: 123
});
var htmlContent = fileObj.getContents();
htmlContent = htmlContent.replace("['REPLACETHIS']","['<input type=\"radio\" name=\"selectRow\" />','EXAMPLE','1234','1245','01/2021','<img src=\"https://imageurl.example" />'];");
htmlForm.defaultValue = htmlContent;
HTML example:
<table id="example" class="display" style="width:100%">
</table>
<br />
<script>
//Main Data Table
var exampleValues = new Array();
var exampleDetailArr = ['REPLACETHIS'];
exampleValues.push(exampleDetailArr);
window.$vars = {
exampleValues: exampleValues
}
$(document).ready(function() {
$('#example').DataTable( {
data: exampleValues,
"bJQueryUI": true,
columns: [
{ title: "Select" },
{ title: "Type" },
{ title: "Internal ID" },
{ title: "External ID "},
{ title: "Date" },
{ title: "Memo" },
],
"columnDefs": [
{
"targets": [ 3 ],
"visible": false,
"searchable": false
}
]
} );
} );
</script>

Related

Display list tempate

I am trying to implement the List template feature of Alexa skill kit. However, I am unable to return the response in an appropriate format.
I have implemented the feature using the official documentation. However, I am not getting how to return the response of list template to my custom intent
'ListTemplate':function(){
var title = "This is a sample list";
var speechOutput = "Showing the sample list";
var template = {
"type":"Display.RenderTemplate",
"template":{
"type":"ListTemplate1",
"token":"ListTemplate",
"title":title,
"backButton":"VISIBLE",
"backgroundImage":{
"contentDescription":"backgroundImage",
"sources":[
{
"url":"https://democard.s3.amazonaws.com/hostel-720.jpg"
}]
},
"listItems":[{
"token":"item1",
"image":{
"sources":[{
"url":"https://democard.s3.amazonaws.com/c-v-raman-college-of-engineering-squarelogo-1534916004379+(3).jpg"
}],
"contentDescription":"first item of list"
},
"textContent":{
"primaryText":{
"type":"PlainText",
"text":"primary Text is here"
},
"secondaryText":{
"type":"PlainText",
"text":"Secondary text is here"
}
},
},
{
"token":"item2",
"image":{
"sources":[{
"url":"https://democard.s3.amazonaws.com/c-v-raman-college-of-engineering-squarelogo-1534916004379+(3).jpg"
}],
"contentDescription":"second item"
},
"textContent":{
"primaryText":{
"type":"PlainText",
"text":"primary text is here"
},
"secondaryText":{
"type":"PlainText",
"text":"secondary text"
}
}
}
]
}};
var directives =[ template ];
//return build_speechlet_response(title,speechOutput,directives, SESSION_LIST);
// function
build_speechlet_response(title,speechOutput,directives,phase){
const response = {
"version": "1.0",
"response": {
"outputSpeech":{
"type":"PlainText",
"text":"what else would you like to see"
},
"card":{
'type':'Simple',
'title':title,
'content':speechOutput
},
"directives":directives,
"shouldEndSession":'False'
},
"sessionAttributes":{
"template":"list_"
}
};
// return response;
this.emit(':tell',response);
},
The response I should get must be a custom list. But I am not getting it
It looks like this issues is that response is an object. It should be something like this.emit(':tell', speechOutput) (where speechOutput is a string).
If you want to also send a card it's this.emit(':tellWithCard', speechOutput, cardTitle, cardContent, imageObj).
But, since you're trying to use a render template, it would be something like:
this.response.speak(speechOutput)
.cardRenderer(cardTitle, cardContent, cardImage)
.renderTemplate(template);
this.emit(':responseReady');
You can find more info here - https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs/tree/1.x
I do notice you're using v1 of the SDK - I would really recommend using v2 as it's a lot more straight forward.
https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs
Hope that helps.
I tried the following code yet the response was not rendered.
const DisplayListIntentHandler = {
canHandle(handlerInput){
return handlerInput.requestEnvelope.request.type === 'IntentRequest'
&& handlerInput.requestEnvelope.request.intent.name === 'DisplayList';
},
handle(handlerInput){
var title = "This is a sample list";
var speechOutput = "Showing the sample list";
var template = {
type:'Display.RenderTemplate',
template:{
type:"ListTemplate1",
token:"ListTemplate",
title:'title',
backButton:"VISIBLE",
backgroundImage:{
contentDescription:"backgroundImage",
sources:[
{
url:"https://democard.s3.amazonaws.com/hostel-720.jpg"
}]
},
listItems:[{
token:"item1",
image:{
sources:[{
url:"https://democard.s3.amazonaws.com/c-v-raman-college-of-engineering-squarelogo-1534916004379+(3).jpg"
}],
contentDescription:"first item of list"
},
textContent:{
primaryText:{
type:"PlainText",
text:"primary Text is here"
},
secondaryText:{
type:"PlainText",
text:"Secondary text is here"
}
},
},
{
token:"item2",
image:{
sources:[{
url:"https://democard.s3.amazonaws.com/c-v-raman-college-of-engineering-squarelogo-1534916004379+(3).jpg"
}],
contentDescription:"second item"
},
textContent:{
primaryText:{
type:"PlainText",
text:"primary text is here"
},
secondaryText:{
type:"PlainText",
text:"secondary text"
}
}
}
]
}};
return handlerInput.responseBuilder
.addRenderTemplateDirective(template)
.getResponse();
}
};

How to add a css class to the last row in jsGrid

I want to add some styling to the last row in my grid. I wont know what the row number is as there could be any number of rows. How can I go about this? I've seen rowClass and rowRenderer but not a working example. Here is the code I have:
var displayData = function (itemViewModelList) {
var fields = [
{
name: 'ConsultantName', type: 'text', width: 100, title: 'Consultant Name'
},
{
name: 'BranchName', type: 'text', width: 100, title: 'Branch Name', css: "red"
},
{ name: 'NumberOfInvestments', type: 'text', title: 'Number Of Investments' },
{
name: 'ValueOfInvestments', type: 'money', width: 150, title: 'Value Of Investments',
itemTemplate: function (value) {
return tisCommon.formatForMoney(value);
}
},
{
name: 'AverageValueOfInvestments', type: 'money', width: 150, title: 'Average Value Of Investments',
itemTemplate: function (value) {
return tisCommon.formatForMoney(value);
}
},
{
name: 'Month', type: 'text', width: 100, title: 'Month',
itemTemplate: function (value) {
return moment(value, 'M').format('MMMM');;
}
},
];
var options = {
inserting: false,
editing: false,
pageSize: 20,
fields: fields,
rowHeaders: false,
colHeaders: false,
data: itemViewModelList,
controller: controller = {
loadData: function () {
},
},
};
$('#investment-grid').tisGrid('', options);
if (itemViewModelList[0].ConsultantName != null) {
$("#investment-grid").jsGrid("fieldOption", "BranchName", "visible", false);
} else {
$("#investment-grid").jsGrid("fieldOption", "ConsultantName", "visible", false);
}
};
My data being passed "itemViewModelList" is an array of objects
I resolved this by using rowClass as follows:
controller: controller =
{
loadData: function () {},
},
rowClass: function (item, itemIndex) //item is the data in a row, index is the row number.
{
if ((item.ConsultantName == "Totals") || (item.BranchName == "Totals"))
{
return "totalItem highlight";
}
}
I have my if statement where I find the item in the last row based on my conditions. When they are met, I add my custom CSS classes to that row.

bootstrap-table password column hashed out

Is there a way with bootstrap-table to have one of the columns show passwords as none readable? I.E. #### not 1234
My setup uses the method below, any help would be great.
This is not for security issues, it's just aesthetics.
Many thanks
var optionsuser = {
filterControl: true,
showRefresh: true,
search: true,
pagination: true,
filter: true,
striped: true,
url: "php/api.php",
queryParams: queryParamsuser,
columns: [{
field: "id",
title: "Id"
},
{
field: "username",
title: "Username",
filterControl: 'select',
sortable: true,
filterStrictSearch: false
},
{
field: "password",
title: "Password"
}
],
};
var $table = $('#table').bootstrapTable(optionsuser),
$modal = $('#modal').modal({show: false}),
$alert = $('.alert').hide();
$table.bootstrapTable('hideColumn', 'id');
Try this one.
<th data-field="Password" data-sortable="true" data-formatter="nameFormatter">Password</th>
function nameFormatter(value) {
var str='';
for(i=0;i<value.length;i++)
{
str=str+'*';
}
return str;
}
You may also check http://bootstrap-table.wenzhixin.net.cn/documentation/ out.

Binding KendoGrid to a local object

I want to bind a KendoGrid to an object array so that it reflects what ever the user enters. The object will have two fields ExceptionName and ExceptionType. ExceptionType needs to be a dropdown of 5 items (this is working). The ExceptionName will be free text.
If I double click on the kendo grid, I can edit, but it does not reflects in the object. Same thing for Delete & new row. (So I think I am doing something wrong in the binding or in the declaration of the object)
Below, find a snippet of my code:
Object array:
var authorizationInformation = [{
id:1,
exemptionName: "",
exemptionType: "Unknown"
}];
KendoGrid:
$("#AuthorizationGrid").kendoGrid({
columns: [{
field: "exemptionName", title: "Exemption Name"
},
{
field: "exemptionType",
title: "Exemption Type",
template: function (value) {
for (var i = 0; i < exemptionTypeList.length; i++) {
if (exemptionTypeList[i].exemptionType == value.exemptionType) {
return exemptionTypeList[i].description;
}
}
},
editor: function (container) {
var input = $('<input id="exemptionType" name="exemptionType">');
input.appendTo(container);
// initialize a dropdownlist
input.kendoDropDownList({
dataTextField: "description",
dataValueField: "exemptionType",
dataSource: exemptionTypeList
}).appendTo(container);
}
},
{
command: "destroy"
}],
dataSource: authorizationInformation,
editable: true,
scrollable: false,
});
Any suggestion would be appreciated.
Thanks, M

queryParams bootstrap table

I'm creating my table inside a div like this:
var tabla = $('<table id="tablaConteo2"></table>');
var thead = $('<thead></thead>');
var enc = $('<tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr>');
thead.appendTo(tabla);
enc.appendTo(thead);
tabla.appendTo('#tablaDatosToma2');
var $tabla = $('#tablaConteo2');
and then I'm using this library
to initialize the table like this:
$tabla.bootstrapTable({
height: 200,
url: 'BuscarCodigo',
method: 'post',
queryParams: function(p){
return{
codigoProducto : $('#codigoToma2').val(),
bodegaID: $('#bodega').val()
};
},
pagination: true,
pageSize: 50,
pageList: [10, 25, 50, 100, 200],
showRefresh: true,
columns: [
{
field: 'codigoProducto',
title: 'C\u00F3digo'
},
{
field: 'cantidad',
title: 'Cant. Actual',
width: '200px'
},
{
field: 'nuevaCantidad',
title: 'Cantidad'
},
{
field: 'bodega',
title: 'Bodega'
},
{
field: 'estanteria',
title: 'Estanter\u00EDa'
},
{
field: 'seccion',
title: 'Secci\u00F3n'
},
{
field: 'estanteriaID',
title: 'Estanter\u00EDa'
},
{
field: 'seccionID',
title: 'Secci\u00F3n'
}
]
});
On my servlet I'm getting the parameters as I usually do, like this:
request.getSession().setAttribute("codigoProducto", request.getParameter("codigoProducto"));
request.getSession().setAttribute("bodegaID", request.getParameter("bodegaID"));
The servlet is being executed, but when I try to use the parameters they are null, can anyone help to find out what I'm doing wrong.
You can set the contentType option to application/x-www-form-urlencoded, because the default value is application/json:
$tabla.bootstrapTable({
method: 'post',
contentType: 'application/x-www-form-urlencoded',
...
});
Here is a related issue: https://github.com/wenzhixin/bootstrap-table/issues/918

Resources