I am trying to export pdf data from DataTable. My table contents are in Bengali language. after export it just shows strange characters. I tried to download vfs_fonts.js and include "NikoshBAN.ttf" font to it... but still the pdf can not show the content.
this.pdfMake.fonts = {
Nikosh: {
normal: 'public/fonts/NikoshBAN.ttf'
}
};
and in dataTable button initialization i use:
{
extend: 'pdf',
text: 'Export PDF',
exportOptions: {columns: ':visible'},
customize: function (doc) {
doc.defaultStyle.font = 'Nikosh';
},
}
can anybody shows me steps to export dataTable pdf with custom font?
thanks in advance
I solved the problem by the following way:
I encode my NikoshBAN.ttf file using https://www.giftofspeed.com/base64-encoder/
download the vfs_fonts.js file from https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js and put as a local .js file
then add NikoshBAN.ttf:"<encoded value from step 1" into the vfs_fonts.js file
now use in dataTable file as follows:
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-MediumItalic.ttf'
},
nikosh: {
normal: "NikoshBAN.ttf",
bold: "NikoshBAN.ttf",
italics: "NikoshBAN.ttf",
bolditalics: "NikoshBAN.ttf"
}
};
and finally in the dataTable buttons object i use as follows:
buttons: [
'copy', 'csv', 'excel', 'print',
{
extend: 'pdf',
customize: function(doc) {
doc.defaultStyle.font = "nikosh";
}
}
]
now it works like charm!!!
Related
I'm trying to add aditional rows during exportation(plz, see attached image), i don't find the right way to do it, please someone tell me whether or not its possible, since many reports carry parent data that not necesarily appears inside the table. I need the Pdf output with the same format. I'm using yajra datatables for laravel.
buttons :[
{
extend: 'pdfHtml5',
pageSize: 'letter',
title: "Informe Asistencia",
exportOptions: {
columns: [0,1,2,3,4,5,6,7,8,9,10 ]
}
},
['excel','csv','colvis']
],
calling the function and drawing table
$.get('{{ url("informes/get_informe_asistencia") }}',
{
'fecha_inicio': fecha_inicio,
'fecha_fin' : fecha_fin,
'numero' : numero
},function(resp){
console.log(resp);
$('.desde').append(fecha_inicio);
$('.hasta').append(fecha_fin);
$('.nombre').append(resp.informe[1].nombre);
$('.ficha').append(resp.informe[1].numero);
dtinforme.clear().draw();
dtinforme.rows.add(resp.informe).draw();
}
missing data
you can export manually.
text: 'PDF',//title
titleAttr: 'Exportar PDF',
exportOptions: {
...
},
action: function (e, dt, node, config) {
var table = this;
dt.clear().draw();
dt.rows.add("YOUR DATA").draw();
$.fn.dataTable.ext.buttons.pdfHtml5.action.call(table, e, dt, node, config);
}
So you need modify your data from with dt.rows().data().toArray(),dt.settings().init().columns.
I am working on an Aikau Share Page where I a side bar that is using the Alfresco Share document library tree picker. The picker allows me to publish the nodeRef to another widget which will display information. I would like to use the tree view but i'm having trouble showing the documents and it is only showing the containers/folders. Anyone have any idea on what I need to do in order to solve this?
Here is the Aikua code i am using:
{
align: "sidebar",
name: "alfresco/layout/Twister",
config: {
label: "twister.library.label",
additionalCssClasses: "no-borders",
widgets: [
{
name: "alfresco/navigation/PathTree",
config: {
showRoot: true,
rootLabel: "Repository",
rootNode: "/app:company_home",
publishTopic: "ALF_ITEM_SELECTED"
}
}
]
}
}
I am wondering if I need to write an extension to the CoreXhr or what the steps would be in order to make this work.
Any help would be appreciated
I was able to figure this out. The problem comes from the repository script in the alfresco explorer side "treenode.get.js". The solution was to do the following
Create a new webscript in alfresco explorer and copy treenode.get.js code into the new webscript. I ended up calling mine customtreenode.get.js.
Remove the logic check for IsContainer in the newly created webscript
Create new Aikau file that extends PathTree. Here is the code below
define(["dojo/_base/declare",
"alfresco/navigation/PathTree",
"alfresco/documentlibrary/_AlfDocumentListTopicMixin",
"service/constants/Default",
"dojo/_base/lang",
"dojo/_base/array",
"dojo/dom-class",
"dojo/query",
"dojo/NodeList-dom"],
function(declare, PathTree, _AlfDocumentListTopicMixin, AlfConstants, lang, array, domClass, query) {
return declare([PathTree, _AlfDocumentListTopicMixin], {
useHash: true,
getTargetUrl: function alfresco_navigation_Tree__getTargetUrl() {
var url = null;
if (this.siteId && this.containerId)
{
url = AlfConstants.PROXY_URI + "slingshot/doclib/treenodeCustom/site/" + this.siteId + "/documentlibrary";
}
else if (this.rootNode)
{
url = AlfConstants.PROXY_URI + "slingshot/doclib/treenodeCustom/node/alfresco/company/home";
}
else if (!this.childRequestPublishTopic)
{
this.alfLog("error", "Cannot create a tree without 'siteId' and 'containerId' or 'rootNode' attributes", this);
}
return url;
}
});
});
Change your code to use the new CustomPathTree
{
align: "sidebar",
name: "alfresco/layout/Twister",
config: {
label: "twister.library.label",
additionalCssClasses: "no-borders",
widgets: [
{
name: "CustomWidgets/widgets/CustomTreeNode",
config: {
showRoot: true,
rootLabel: "Repository",
rootNode: "/app:company_home",
publishTopic: "ALF_ITEM_SELECTED"
}
}
]
}
}
It works after that. I still need to change the icons from folders to documents.
I want to create a combobox listing all user story's formatted id.
The js is somethiing like below:
Ext.define('CustomApp', {
extend : 'Rally.app.App',
componentCls : 'app',
launch : function() {
var usComboBox = Ext.create('Ext.Container', {
items : [ {
xtype : 'rallycombobox',
storeConfig : {
autoLoad : true,
model : 'User story',
displayField:'FormattedId',
}
} ],
});
this.add(usComboBox);
},
});
First of all, the comboBox cannot show any formatted id;
Secondly, if I removed the "displayField" config, I can see list of user story names but somehow it's not always showing like that. Sometime if I refresh the page, the list may not be shown.
I tested this by changing the App.js file and view App-debug.html file in Chrome since Chrome extension terminal couldn't be installed properly in Windows 7. Is this the right way to do?
You may use filterFieldName of rallymultiobjectpicker, and fetch FormattedID. It currently does not automatically add the value in filterFieldName to the fetch.
var box = Ext.create('Ext.Container', {
items: [{
xtype: 'rallymultiobjectpicker',
modelType: 'userstory',
filterFieldName: 'FormattedID',
storeConfig: {
fetch:['FormattedID']
}
}]
});
this.add(box);
How can I make i18next load all languages from just one file?
I managed to do it by putting each language in a seperate file (translation-en.json, translation-no.json, etc), and also managed to input languages with the resStore option, but putting it all in a seperate .json file is really not documented anywhere (I've searched for 4 hours+ now)
My js code:
i18n.init({
debug: true,
lng: 'en',
resGetPath: 'translation.json'
},
function(t) {
console.log(t('test'));
});
My translation.json file:
{
en: {
translation: {
test: "some string"
}
},
no: {
translation: {
test: "litt tekst"
}
}
}
Ok, so I managed to "hack" it byt putting an object into a seperate .js file, include it in a script tag and loading it using resStore, but that just can't be the best way to use this lib.
Assume that your translation.json has loaded and assigned to a variable named resStore:
var resStore = {
en: {
translation: {
test: "some string"
}
},
no: {
translation: {
test: "litt tekst"
}
}
};
Next, you can override default ajax loading functionality with your customLoad function. An example might look like this:
var options = {
lng: 'en',
load: 'current',
lowerCaseLng: true,
fallbackLng: false,
resGetPath: 'i18n/__lng__/__ns__.json',
customLoad: function(lng, ns, options, loadComplete) {
var data = resStore[lng][ns];
loadComplete(null, data); // or loadComplete('some error'); if failed
},
ns: {
namespaces: ['translation'],
defaultNs: 'translation'
}
};
i18n.init(options, function(t) {
t('test'); // will get "some string"
});
new update on Mar 20, 2015
You can simply pass your resource store with the resStore option:
i18n.init({ resStore: resources });
I know you guys will be making a really nice charting tool available for 2.0 SDK soon, but until then, I'd like to use Google Charts.
In the 1.x API, you could could define html object by id, and then use getElementById() to get a reference to that item. So for example:
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
But in the new SDK, you don't have an HTML block to work with-- how would you do the following? This question is relevant for any item where you want to pin an object to a place in your html.
In the new API the app base class is simply an extension of Ext.container.Container which itself is an extension of AbstractComponent and so has the getEl() method. (Note that by adding content directly to dom nodes you lose out on the automatic layout functionality provided by Ext containers).
Here's a quick example to illustrate doing something like this though:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
itemId: 'chartContainer'
}
],
launch: function() {
var chartContainer = this.down('#chartContainer').getEl().dom;
var chart = new google.visualization.BarChart(chartContainer);
}
});
In the last answer (your code snippet), you were just missing the items child of the app, which creates the chartContainer element you want to render the chart into. I think this code should work for you:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [
{
xtype: 'container',
itemId: 'chartContainer'
}
],
launch: function() {
//Write app code here
google.load("visualization", "1.0", {packages:["corechart"]});
google.setOnLoadCallback(this._drawChart);
},
_drawChart: function() {
var chartContainer = this.down('#chartContainer').getEl().dom;
var chart = new google.visualization.BarChart(chartContainer);
var graphArray = [['Module', 'Payload Code', 'Test Code']];
chartData = google.visualization.arrayToDataTable(graphArray);
chart.draw(chartData, {width: 700, height: 500});
}
});
Here's the code. It crashes with "Uncaught TypeError: Cannot read property 'parentNode' of null" inside of "Ext.define.initComponent" initiated from "Ext.define.Rally.loadScripts". Never gets to _drawChart():
I've also added the following line to the rake script to reference the google API:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
And here's App.js:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
//Write app code here
google.load("visualization", "1.0", {packages:["corechart"]});
google.setOnLoadCallback(this._drawChart);
},
_drawChart: function() {
var chartContainer = this.down('#chartContainer').getEl().dom;
var chart = new google.visualization.BarChart(chartContainer);
var graphArray = [['Module', 'Payload Code', 'Test Code']];
chartData = google.visualization.arrayToDataTable(graphArray);
chart.draw(chartData, {width: 700, height: 500});
}
});
The first draft of the SDK 2.0 charting component is now live.
You can find out about it here.