I'm trying to add an image to a specific cell, is there any way I can adjust the image size or the cell size so it can fit on the cell.?
result.map(order => {
const worksheet = workbook.addWorksheet(order.branch_code);
worksheet.columns = [
{ header: 'Id', key: 'id', width: 10 },
{ header: 'Product Code', key: 'pcode', width: 20 },
{ header: 'Image', key: 'image', width: 50 },
];
order.products.map(product => {
const imageId = workbook.addImage({
filename: `${PRODUCT_IMAGE_PATH}/${product.image}`,
extension: 'jpeg',
});
worksheet.addRow({ id: product.products.id, pcode: product.products.product_code });
worksheet.addImage(imageId, `C${position}:C${position}`);
position++;
});
});
await workbook.xlsx.writeFile('export.xlsx');
but it looks like this, how can i fix this.?
expected OP:
Related
I'm creating an app that uses import and export excel files, I need that excel returns in English TRUE and FALSE but instead returns VERDADERO and FALSO on the field acceptTerms, there is a way to export all in English, thanks
async function generateExcel(req, res, next) {
try {
const ingresantes = await Ingresante.aggregate([
{
$project: {
documentNumber: 1,
codigo: 1,
apellidos: 1,
nombres: 1,
email: 1,
acceptTerms: 1,
},
},
]);
var workbook = new Excel.Workbook();
var worksheet = workbook.addWorksheet("subida");
worksheet.columns = [
{ header: "DNI", key: "documentNumber", width: 10 },
{ header: "CODIGO", key: "codigo", width: 10 },
{ header: "APELLIDOS", key: "apellidos", width: 20 },
{ header: "NOMBRES", key: "nombres", width: 20 },
{ header: "CORREO", key: "email", width: 35 },
{ header: "ESTOY_CONFORME", key: "acceptTerms", width: 25 },
];
ingresantes.map((data, index) => {
data.nro = ++index;
worksheet.addRow(data);
});
worksheet.getRow(1).eachCell((cell) => {
cell.font = { bold: true };
});
var tempFilePath = tempfile(".xlsx");
await workbook.xlsx.writeFile(tempFilePath);
await res.status(200).sendFile(tempFilePath);
} catch (err) {
next(err);
}
}
I am using exceljs npm package for formatting of excelsheet But I am not able to do textwrap inside cell when data is too large. My Description cell contains large data when excel is exported it looks like text is overlapping to next cell.
try {
var workbook = new excel.Workbook();
var worksheet = workbook.addWorksheet('ABC');
worksheet.columns = [
{ header: 'ABC', key: 'ABC', width: 15 },
{ header: 'Description', key: 'Description', width: 20 },
{ header: 'Comments', key: 'Comments', width: 20 }
];
// setStyleToHeader(worksheet);
worksheet.getRow(1).font = { name: 'Calibri', family: 4, size: 12, bold: true };
worksheet.getRow(1).border = {
top: { style: 'thin' },
left: { style: 'thin' },
bottom: { style: 'thin' },
right: { style: 'thin' }
};
new sql.ConnectionPool(dbconfig).connect().then(pool => {
return pool.request()
.execute('sp_getAll_data')
}).then(result => {
debugger;
let rows = result.recordset;
for (var i = 0; i < rows.length; i++) {
worksheet.addRow({
ABC: rows[i].ABC,
Description: rows[i].Description ,
Comments: rows[i].Comments
});
}
sql.close();
workbook.xlsx.write(res);
debugger;
res.setHeader('Content-Type', 'application/vnd.openxmlformats');
res.setHeader("Content-Disposition", "attachment; filename=" + "ABC.xlsx");
res.end(result, 'binary');
res.status(200).json();
}).catch(err => {
// res.status(500).send({ message: "${err}", err })
// sql.close();
});
} catch (e) {
}
If you want to just wrap text you can use 'alignment' attribute of cell.
worksheet.getCell('D1').alignment = { wrapText: true };
It's alredy mentioned here in plugin page: https://www.npmjs.com/package/exceljs#alignment
I found an answer related to Revision History "Querying for User Story revisions in Rally"
I am having trouble determining how to populate a grid with it.
Can I use the model and populate a story that the gird references?
Here is a working example, using other examples.
I had to populate an array with revision history info and add it to a story.
Then the story populated the grid.
// Also referenced
// https://stackoverflow.com/questions/22334745/does-rally-data-custom-store-have-magic-uniqueness
//
Ext.define('CustomApp',
{
extend: 'Rally.app.App',
componentCls: 'app',
launch: function()
{
var panel = Ext.create('Ext.panel.Panel',
{
layout: 'hbox',
itemId: 'parentPanel',
componentCls: 'panel',
items: [
{
xtype: 'panel',
title: 'Artifacts updated in the last two days',
width: 600,
itemId: 'childPanel1'
},
{
xtype: 'panel',
title: 'Last Revision',
width: 600,
itemId: 'childPanel2'
}]
});
this.add(panel);
var artifacts = Ext.create('Rally.data.wsapi.artifact.Store',
{
models: ['UserStory','Defect', 'TestCase'],
fetch: ['Owner', 'FormattedID','Name','ScheduleState','RevisionHistory','Revisions','Description','CreationDate','User'],
autoLoad: true,
listeners:
{
load: this._onDataLoaded,
scope: this
}
});
},
_onDataLoaded: function(store, data)
{
this._customRecords = [];
_.each(data, function(artifact, index)
{
this._customRecords.push(
{
_ref: artifact.get('_ref'),
FormattedID: artifact.get('FormattedID'),
Name: artifact.get('Name'),
RevisionID: Rally.util.Ref.getOidFromRef(artifact.get('RevisionHistory')),
RevisionNumber: 'not loaded'
});
}, this);
this._createGrid(store,data);
},
_createGrid: function(store,data)
{
var that = this;
var g = Ext.create('Rally.ui.grid.Grid',
{
itemId: 'g',
store: store,
enableEditing: false,
showRowActionsColumn: false,
columnCfgs:
[{text: 'Formatted ID', dataIndex: 'FormattedID'},
{text: 'Name', dataIndex: 'Name'},
{text: 'ScheduleState', dataIndex: 'ScheduleState'},
{text: 'Last Revision',
renderer: function (v, m, r)
{
var id = Ext.id();
Ext.defer(function ()
{
Ext.widget('button',
{
renderTo: id,
text: 'see',
width: 50,
handler: function ()
{
that._getRevisionHistory(data, r.data);
}
});
}, 50);
return Ext.String.format('<div id="{0}"></div>', id);
}
}], height: 400,
});
this.down('#childPanel1').add(g);
},
_getRevisionHistory: function(artifactList, artifact)
{
this._artifact = artifact;
this._revisionModel = Rally.data.ModelFactory.getModel(
{
type: 'RevisionHistory',
scope: this,
success: this._onModelCreated
});
},
_onModelCreated: function(model)
{
model.load(Rally.util.Ref.getOidFromRef(this._artifact.RevisionHistory._ref),
{
scope: this,
success: this._onModelLoaded
});
},
_onModelLoaded: function(record, operation)
{
var list = [];
record.getCollection('Revisions').load(
{
fetch: true,
scope: this,
callback: function(revisions, operation, success)
{
_.each(revisions, function(artifact, index)
{
var creationdate;
if (Rally.environment.useSystemTimezone || Rally.environment.useWorkspaceTimeZone)
{
creationdate = Rally.util.DateTime.formatDate(artifact.data.CreationDate, true);
}
else
{
creationdate = Rally.util.DateTime.formatWithDefaultDateTime(artifact.data.CreationDate);
}
var nodedata =
{
rev_num: artifact.data.RevisionNumber,
descript: artifact.data.Description,
author: artifact.data.User._refObjectName,
creationdate: creationdate
};
if(nodedata.descript.indexOf('SCHEDULE STATE') > -1)
{
list.push(nodedata);
}
else
{
if(nodedata.descript .indexOf('PLAN ESTIMATE') > -1)
{
list.push(nodedata);
}
}
}, this);
var myStore = Ext.create("Rally.data.custom.Store",
{
autoLoad: true,
data : list,
});
var revGrid = Ext.create('Rally.ui.grid.Grid',
{
itemId: 'revGrid ',
store: myStore,
enableEditing: false,
showRowActionsColumn: false,
height: 400,
columnCfgs:
[
{text: 'Rev #', dataIndex: 'rev_num'},
{text: 'Description', dataIndex: 'descript'},
{text: 'Author', dataIndex: 'author'},
{text: 'Change Date', dataIndex: 'creationdate'}
]
});
this.down('#childPanel2').add(revGrid);
}
});
},
});
I have a Jquery jtable that has a child table. As far as I can see it is set up as per the example in the jtable demos. The main tables= (contacts) and the child tables (categories) display without any problem. My problem is that the delete action on the category child table is not posting the row key value (categoryID) as I would expect it to and I cannot see why not. The similar action on the main table posts its just fine. Note the two console.log lines in the code below that output the postData variable, the first one reports the ID of the contact table line (ID), but the second one prints an empty array instead of the CategoryID. Any help appreciated.
Thanks
function ReturnAjax(theurl, postdata, errorfn) {
return $.ajax({
url: theurl,
type: 'POST',
dataType: 'json',
data: postdata,
cache: false,
error: errorfn
});
}
$('#ContactsTableContainer').jtable({
title: 'Contacts',
paging: true,
pageSize: 30,
sorting: true,
defaultSorting: 'LastName ASC',
selecting: true,
selectOnRowClick: true,
openChildAsAccordion: true,
deleteConfirmation: false,
actions: {
listAction: function(postData, jtParams) {
console.log("ContactsTableContainer - Loading list from custom function...");
return $.Deferred(function($dfd) {
$.ajax({
url: 'ContactsData.php?action=list&jtStartIndex=' + jtParams.jtStartIndex + '&jtPageSize=' + jtParams.jtPageSize + '&jtSorting=' + jtParams.jtSorting,
type: 'POST',
dataType: 'json',
data: postData,
success: function(data) {
if(data['RowIDs']) { RowIDs = data['RowIDs'].toString().split(','); }
$dfd.resolve(data);
},
error: MyError
});
});
},
deleteAction: function(postData) {
console.log('deleting from contacts - custom function..., '+JSON.stringify(postData));
$.when(
ReturnAjax(
'ContactsData.php?action=list&ContactID='+postData['ID'],
postData,
MyError
)
).then(
function(data) {
if (data.Result != 'OK') { alert(data.Message); }
var msg = '';
var len = data.Records.length;
if(len>0) {
msg = '\t'+data.Records[0].Category;
for(var i=1 ; i<len ; i++) { msg += '\n\t'+data.Records[i].Category; }
msg = 'Contact is in the following categories\n'+msg;
}
msg += '\n\nConfirm deletion of this contact';
if(confirm(msg)) {
$.when(
ReturnAjax(
'ContactsData.php?action=delete',
postData,
MyError
)
).done(
$('#ContactsTableContainer').jtable('reload')
);
} else {
$('#ContactsTableContainer').jtable('reload'); // Had to put this here to ensure that same delete button could be used again
}
}
).fail( function() { console.log('ajax call went wrong'); } );
}, // end of delete action
}, // end of actions
fields: {
ID: {
key: true,
create: false,
edit: false,
list: false,
visibility: 'hidden'
},
Categories: {
title: '',
width: '5%',
sorting: false,
create: false,
display: function(contact) {
var $img = $('<img src="Images/layers.png" title="Show contact\'s categories" />');
//Open child table when user clicks the image
$img.click(function() {
console.log('display function (contact)..., '+JSON.stringify(contact));
$('#ContactsTableContainer').jtable(
'openChildTable',
$img.closest('tr'), //Parent row
{
title: contact.record.Name + ' - Categories',
selecting: true,
selectOnRowClick: true,
actions: {
listAction: 'ContactsData.php?action=list&ContactID=' + contact.record.ID,
deleteAction: function(postData) {
console.log('deleting from custom category function..., '+JSON.stringify(postData));
$.when(
ReturnAjax(
'ContactsData.php?action=deleteAssignment&ContactID=' + contact.record.ID,
postData,
MyError
)
).done(
$('#ContactsTableContainer').jtable('reload')
);
}
},
fields: {
CategoryID: { key: true, create: false, edit: false, list: false, visibility: 'hidden' },
ContactID: { type: 'hidden', defaultValue: contact.record.ID },
Category: { title: 'Category' }
}
},
function(data) { data.childTable.jtable('load'); }
);
});
//Return image to show on the person row
return $img;
}
},
FirstName: {
title: 'Forename',
width: '25%',
},
LastName: {
title: 'Surname',
width: '25%',
},
HomePhone: {
title: 'Phone',
width: '15%',
sorting: false,
},
Mobile: {
title: 'Mobile',
width: '15%',
sorting: false,
},
Email: {
title: 'Email',
width: '20%',
sorting: false,
},
Name: {
type: 'hidden'
},
}
});
//Load list from server
$('#ContactsTableContainer').jtable('load');
OK, I solved it, sorry to bother anyone who may have spent time looking at this. The problem was that my child table variable names were wrong they should have been category_ID and Contact_ID
I have a class called Zone1s in java which has 2 fields text(name of zone) and list of Zone1s.
when i convert it to json i get following response :
{"text":"Papa","Zone1s":[{"text":"Beta1","Zone1s":[{"text":"BetaBeta1","Zone1s":[]},{"text":"BetaBeta2","Zone1s":[]}]},{"text":"Beta2","Zone1s":[]}]}
i wrote a Extjs model,store and panel below:
Ext.define('Zone1s', {
extend: 'Ext.data.Model',
fields: [
{ name: 'text', type: 'string' }
],
proxy: {
type: 'ajax',
url : 'test.htm',
reader: {
type : 'json',
record: 'Zone1s'
}
},
hasMany: {model: 'Zone1s', name: 'Zone1s'},
belongsTo: 'Zone1s'
});
var store =Ext.create('Ext.data.Store', {
model: 'Zone1s',
autoLoad: true
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
renderTo: Ext.getBody()
});
i am getting following error:
me.store.getRootNode is not a function...
Can anyone please Guide me where i am wrong ?
i have gone through
How do I show nested data into a tree?
but here my Zone1s can have Zone1s in themselves that's the difference.
You should add a root attribute to your Store :
var store =Ext.create('Ext.data.Store', {
model: 'Zone1s',
autoLoad: true,
root: {
text: 'Zone1s',
id: 'Zone1s',
expanded: true
}
});
If you do not want to see the root node, use the rootVisible attribute :
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible : false,
renderTo: Ext.getBody()
});