I have created one Html for ms crm 2011, this is in English language.But i want to show the same html in other languages(Arabic,Spanish..etc ) for some users, how i can achieve this,is there any traslating api ?
Unfortunately there are not translating API. All you can do is to create a separated webresource for every language you want to support and show webresource based on the language of current user.
No OOB functionality exists unfortunately, but it's not as hard as it seems to implement in JS.
All you need is a container with your labels, CRM can tell you the user's language. The script would look like this (taken right out of a working project, which also leverages jQuery ... if you don't, just add it as webresource and include in your HTML page):
(function (pageCode, $, undefined) {
var labels = {
1033: {
element1: 'english label for element1',
element2: 'eng label for element2'
},
1040: {
element1: 'italian label for element1',
element2: 'italian label for element2'
},
xxxx: {
element1: 'xxxx language label for element1',
element2: 'xxxx language label for element2'
}
}
pageCode.performTranslation = function() {
var langCode = Xrm.Page.context.getUserLcid();
if (typeof (locLabels[langCode]) == 'undefined') {
// You don't have labels for this language... let's go English
langCode = 1033;
}
for (var ctrlName in locLabels[langCode]) {
$('#' + ctrlName).text(locLabels[langCode][ctrlName]);
}
}
}(window.pageCode = window.pageQuote || {}, jQuery));
$(function(){
pageCode.performTranslation();
});
You'll need to include ClientGlobalContext.js.aspx in your web resource so you have access to Xrm, and change what your HTML code looks like in this fashion:
If your HTML is now
<label>This is a label</label>
<label>This is another label</label>
You should give an id to all the translated elements, and the code should become
<label id="element1"></label>
<label id="element2"></label>
Note that you no longer need to fill the text in the HTML (the JS will take care of it!).
Related
I was wondering if it is possible to "transform" a piece of text into a link.
For example:
I have a Label that contains the text: "By accepting our terms and conditions you will be able to access the survey (Read More)"
I would like Read More to be a link so that it's clickable.
Is this possible within a label (or textfield)?
Thanks in advance.
Since you're already using the UI5 framework, you can make use of the available controls that support links within texts such as sap.m.FormattedText or sap.m.MessageStrip with enableFormattedText.
Demo
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/m/FormattedText",
"sap/m/MessageStrip",
], function(FormattedText, MessageStrip) {
new FormattedText({
htmlText: getFormattedText()
}).addStyleClass("sapUiTinyMargin").placeAt("content");
new MessageStrip({
enableFormattedText: true,
showIcon: true,
text: getFormattedText(),
}).addStyleClass("sapUiTinyMargin").placeAt("content");
function getFormattedText() {
return `By accepting our terms and conditions you will be able to access the survey (Read More)`;
}
}));
<script>
window["sap-ui-config"] = {
libs: "sap.m, sap.ui.core",
preload: "async",
theme: "sap_belize",
compatVersion: "edge",
"xx-waitForTheme": true,
"xx-async": true,
}
</script>
<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
you can capture the html inside your label and transform it.
As others comment, you can do it for a label but not in a text input field.
assuming jquery in your front end, that would be something like this...
let h = $('label#your-id").html();
h = h.replace('(Read More)','(Read More)');
$('label#your-id').html(h);
or if you want to do it in all of your labels
$('label').each( (i,l) => {
let h = $(l).html();
h = h.replace('(Read More)','(Read More)');
$(l).html(h);
});
You can do this within a label but not an input field.
<form>
<label for="textbox">By accepting our terms and conditions you will be able to access the survey (Read More)</label>
<input type="text" name="textbox"/>
</form>
The best way to handle these kind of scenarios is with Message Strip. Just add:
<MessageStrip id="idMessageStrip" enableFormattedText="true" showIcon="true" showCloseButton="true" class="sapUiMediumMarginBottom">
<link>
<Link text="Text to be displayed as link goes here" press="handleLinkClick"/>
</link>
</MessageStrip>
First of all I would like to say I have very few experience in Django and plotly, so excuse me if I may be asking something which makes no sense or has very few meaning.
In Django enviroment I know that programming logic takes place in the "Views.py" file, and all variables set on this file can be transfered to the "template.html" file and use them inside double curly braces "{{ VariableFromView }}".
I was wondering if there is any way, once the plot is created, to retrieve the limits of the displayed area in the plotly plot, either on the "view.py" or "template.py" files, and save them in a variable which could be used in the "template.html" file, such as:
Variable definition example:
xbrush = [plotly.xmin, plotly.xmax]
ybrush = [plotly.ymin, plotly.ymax]
Variable call in template
{{ xbrush }}
{{ ybrush }}
In my case I amb using Python code for the "Views.py" and Javascript and html for the "templates.html" file (as well as a little bit of Django template language for dealing with variables)
Thank you very much for your help!
There are multiple ways to achieve the same. I would suggest you to go through django tutorial once again to get better understanding of template context and variables. Since you already have variables xbrush and ybrush in your views.py, just make sure you return these in the context of your response. Like render('template.html', {'xbrush':xbrush, 'ybrush': ybrush}).Now in your template.html you can access these values using {{ xbrush }}. So now all you need now is create a script tag in your html file and now you can assign these values to javascript variables like var xbrush = {{ xbrush }}
You'll need to do this using JavaScript, since rendering and all interaction with a Plotly plot is done in the browser. There's a full example (including a CodePen) that's close to what you're trying to do in the Plotly documentation here: https://plot.ly/javascript/zoom-events/
var plot = document.getElementById('plot').contentWindow;
var plotTwo = document.getElementById('plotTwo').contentWindow;
document.getElementById('plot').onload = function() {
pinger = setInterval(function(){
plot.postMessage({task: 'ping'}, 'https://plot.ly')
}, 100);
};
window.addEventListener('message', function(e) {
var message = e.data;
if(message.pong) {
console.log('Initial pong, frame is ready to receive');
clearInterval(pinger);
// Listening for zoom events, but you can also listen
// for click and hover by adding them to the array
plot.postMessage( {
task: 'listen',
events: ['zoom']
}, 'https://plot.ly');
plotTwo.postMessage({
task: 'relayout',
'update': {
'xaxis.fixedrange': true,
'yaxis.fixedrange': true
},
}, 'https://plot.ly');
}
else if( message.type == 'zoom' ){
console.log('zoom', message);
drawRectangle( message['ranges'] );
}
else {
console.log(message);
}
});
function drawRectangle( ranges ){
var rect = {
'type': 'rect',
'x0': ranges['x'][0],
'y0': ranges['y'][0],
'x1': ranges['x'][1],
'y1': ranges['y'][1],
'fillcolor': 'rgba(128, 0, 128, 0.7)',
}
plotTwo.postMessage({
'task': 'relayout',
'update': { shapes: [rect] },
}, 'https://plot.ly');
}
function newPlot(){
var plotURL = document.getElementById('plotURL').value + '.embed';
var iframe = document.getElementById('plot');
iframe.src = plotURL;
var iframeTwo = document.getElementById('plotTwo');
iframeTwo.src = plotURL;
}
I have a colors.less file that maintains consistent color palette for a site.
I also have a chart.js file that requires hard coded colors to display chart elements in appropriate colors.
How can I make the chart colors dependent on the generated colors.css file?
So far I've been maintaining two color palettes, one in less and another in js. How can I merge the two?
Example:
/* colors.less */
#green: #46a546;
#red: #9d261d;
#yellow: #f1c40f;
and
/* chart.js */
var chartElements = {
"apples": {
label: "Apples",
color: "#46a546",
},
"oranges": {
label: "Oranges",
color: "#f1c40f",
},
"grapes": {
label: "Grapes",
color: "#9d261d",
}...
How can I stop maintaining both sets of colors?
Even tho Pointy's answer may fit better here (talking about LESS), I want to remind that you can access stylesheet data directly via ECMAscript. You might be able to identify a specific rule and just grab the value. Might look like
[].forEach.call(document.styleSheets, function( set ) {
if( set.href && set.href.indexOf( 'dialog.css' ) > -1 ) {
[].forEach.call( set.cssRules, function( rule ) {
if( rule.selectorText === 'div#dialog-container-left' ) {
// to whatever here, grab the value and store it for global application usage
console.log( rule.style.backgroundColor );
}
});
}
});
Having that exact problem, I "solved" it with the following hack.
The CSS includes a list of "swatch-nn" classes (swatch-1, swatch-2, and so on). Those get the pre-defined LESS constants as their background color. (For me, a simple numerically-ordered list works; other situations might call for other approaches.)
My SPA wrapper creates a (hidden) list of elements that have the swatch classes.
<div id=swatches>
<div class=swatch-1>
<div class=swatch-2>
<!-- etc -->
</div>
Some JavaScript code at application startup populates a globally-available list of colors from the swatches.
var swatches = {}, $swatchContainer = $("#swatches"), rname = /\bswatch-(.*)\b/;
$swatchContainer.children("div").each(function() {
var swatch = this;
this.className.replace(rname, function(_, label) {
swatches[label] = $(swatch).css("backgroundColor");
});
})
$.swatches = swatches;
My Chart.js code thus copies the color values out of that global array. It's crude but it works fine.
I am looking for some code which would add a dropdown to my WYSIWYG fields in the WordPress backend through which I would be able to choose an inline line-height for the selected text. I find the tinyMCE documentation very confusing. Additionally it is mostly aimed at TM 3, but WP 3.9 uses the fourth version…
My tinyMCE Plugin looks something like this:
tinymce.PluginManager.add('ad_lineheight', function(editor, url) {
…
editor.addButton('ad_lineheight', {
type: 'splitbutton',
text: 'line-height',
icon: false,
menu: menuval
});
});
How would you integrate the function, which adds inline-styles to the selected input, like so <span style="line-height: 120%; display: inline-block;">selected text</span>?
EDIT: I already managed to add the dropdown to the editor, it shows the line-heights I defined programmatically like 80%, 90%, 100% and so on.
EDIT2: With this code I am able to change the line-height:
editor.addCommand('lineHeight', function(com, value) {
var selected = tinyMCE.activeEditor.selection.getContent();
var content = '<span style="line-height: '+value+';">' + (selected != '' ? selected : '') + '</span>';
editor.execCommand('mceInsertContent', false, content);
});
editor.addButton('lineheightselect', function() {
…
…
return {
type: 'listbox',
text: 'line-height',
tooltip: 'line-height',
values: items,
fixedWidth: true,
onclick: function(e) {
if (e.control.settings.value) {
editor.execCommand('lineHeight', false, e.control.settings.value);
}
}
};
});
But it is not very practical as it ignores inline-styles that are already there leading to code like this:
<span class="h3" style="font-size: 90%;"><span style="line-height: 160%;">AND</span></span>
this is an old question but I am adding the answer here just in case anyone still need it.
you can use getNode() instead of getContent()
you command code will be
editor.addCommand('lineHeight', function(com, value) {
var node = tinyMCE.activeEditor.selection.getNode();
$(node).css('line-height', value);
});
You need to add custom button to TinyMCE editor, you need also to create your style in some CSS stylesheet. Maybe some WP function may be needed. I don't think you will need adding anything in JS - there is already possibility to add custom style button in TinyMCE and you could achieve that using PHP.
http://codex.wordpress.org/TinyMCE_Custom_Buttons
http://codex.wordpress.org/TinyMCE_Custom_Styles
I've developed web applications with Dojo for more than one year, and I've used dojox grid a lot, but there is no way to add customize buttons on DataGrid or EnhancedGrid, as I know that ExtJS, or EasyUI, jQuery jqgrid are capable doing this.
So I want to ask if there is any way that can add buttons or other HTML DOM in the dojox.DataGrid?
at least, you can add dojo.form.Button's to it. simly add an element to the structure-property of your DataGrid like that (sorry, due to no-time i just copy pasted it from an actual project of mine...):
{
name: ' ',
field: 'idx',
type: dojox.grid.cells._Widget,
editable: false,
formatter: function (idx) {
return new dijit.form.Button({
_destroyOnRemove: true,
label: 'Bearbeiten',
onClick: function () {
dojo.byId('clickedItemIdx').value = idx + '';
if (reports.entries[idx].type == 'Rufbereitschaft') {
dojo.byId('addOrEditEntry_OCD_btn').click();
} else {
dojo.byId('addOrEditEntry_ASS_btn').click();
}
}
});
}
},
note that my data contains an idx-field which i commit to the onclick-function in order to know which element was clicked. This is the only way i got this to work.
As you may know, you can add multiple of those structure-elements referring to the same field.