Unicode character "^2" is not showing in sapui5 dialog - unicode

I am trying to output a unicode character "²" inside of a sapui5-dialog to create squared-meter but it does not work. It only shows "&#178" instead of the "²". I tried using "&#178", "&#xB2" and "&SUP2" to show the unicode character but I could not get it to work. Is this a bug or did I do something wrong?
What I thought what was weird was that in a xml-fragment "&#xB2" is working but the other two unicodes for "²" did not work. Why is that?
I know that a semi-colon is missing after the "&#xB2" and the others but otherwise it would show a "²" in the post and you wouldn't be able to tell them apart.
This is what my dialog looks like:
Here some of my code for the creation of the dialog. It is called when a button is pressed.
let sUnicodeChar = "²";
let oDialog = new sap.m.Dialog({
title: "Report",
content: [
new sap.m.HBox({
justifyContent: "SpaceBetween",
items: [
new sap.m.VBox({
items: [new sap.m.Text({text: "m" + sUnicodeChar}]
})
]
})
]
});
oDialog.open();

Since most IDE's and browsers are unicode compatible these days it is possible to not use the unicode (#&...) and instead just enter "²".

Related

Adding custom shortcode placeholders to TinyMCE 5

i have some system codes in documents that i edit in tinymce. that codes should be represented by an interactive placeholder in the WYSIWYG editor.
It is like normal images but the result should be this Code instead (and not parsed to HTML):
[img]id=123&text=bla[/img]
I could not find any information on how to create this interactive placeholder element for custom elements...
any suggestions?
Like this, and set as a toolbar item
editor.ui.registry.addMenuButton('plugins', {
text: 'Plugin',
fetch: function (callback) {
var items = [
{type: 'menuitem', text: 'Image with description', onAction: function() {editor.insertContent('[img]Hier de code[/img]');}},
];
callback(items);
}
});

How to concatenate multiple property bindings into one

I have an OData source that gives result rows that contain first_name & last_name.
I want to display these in a table with a column called Full Name.
I'm trying to use a JSView (It seems less kludgy than XML).
I can do a 1:1 binding like this:
var template = new sap.m.ColumnListItem({
// ...,
cells: [
new sap.m.Text({
text: "{first_name}"
})
]
});
But I cannot figure out how to bind / concatenate multiple fields to the Text control, or alternatively how to put multiple Text controls into one cell.
EDIT: This is not the exact same as the other suggested solution because this is for JSView instead of XMLView.
You can just use below format to concatenate the two values using simply binding.
XML
<Text text="{first_name} {last_name}" />
JS
new sap.m.Text({
text: "{first_name} {last_name}"
});
Prerequisite
In order to enable complex binding syntax (aka CompositeBinding), the following bootstrap setting is required:
<script id="sap-ui-bootstrap" src="https://.../resources/sap-ui-core.js"
data-sap-ui-compatversion="edge"
...
>
From: https://stackoverflow.com/a/41554735/5846045
This took me several hours of searching and trial and error, but I finally figured out out to use a formatter callback:
var template = new sap.m.ColumnListItem({
id: "column_template",
type: "Navigation",
visible: true,
cells: [
new sap.m.Text("activity", {
text: {
parts: [
{path: "first_name"},
{path: "last_name"}
],
formatter: function(a,b){
return a+" "+b;
}
}
})
]
});
parts must apparently be an array of objects with a path property. The path value must match the odata source.
These values will then be passed to the formatter callback as arguments.
EDIT: you can also do simple concatenation with a template, but there is a trick - you must add data-sap-ui-compatVersion="edge" to your bootstrap and then the following will work:
new sap.m.Text("activity", {
text: "{first_name} {last_name}"
});

how to hide / show ionic popup buttons dynamically

I am on my first big ionic project and am stuck. Would someone have an idea how to dynamically hide and show buttons in an ionic popup? I need the buttons to initially be hidden, but then after something happens the buttons should show up. Any idea how to get that done?
Trying to explain further, what is required here is provide angular directives inside of the $ionicPopup buttons. eg
buttons: [{
text: 'Cancel'
}, {
text: '<b ng-disabled="user.length<1">Delete</b>',
type: 'button-crimson'
}]
But ng-disabled="user.length<1" gets trimmed when the pop-up is rendered.
If you're still looking for an answer to this...
I created a variable for my buttons array
var buttons = [{...}, {...}]
Then would assign that to the object in the popup
$ionicPopup.show({
templateUrl: 'templates/pop-up.html',
title: 'My Popup',
subTitle: 'stuff,
scope: $scope,
**buttons: buttons,**
And then would alter that array
buttons.splice(0, 1, {/*new button*/})
I haven't tested it but it might also work if you wanted to edit a title or class
buttons[0].type = 'newCssClass';
My work-around has been to put the dynamic buttons in the template of the popup rather than the buttons array. It's not ideal but it will work.
eg:
addPopup = $ionicPopup.show({
templateUrl: 'templates/pop-up.html',
title: 'My Popup',
subTitle: 'stuff,
scope: $scope,
buttons: [{
text: 'Cancel',
And then in pop-up.html you can do your usual angular ng-if/ng-hide/ng-disabled/etc stuff like normal. The downside is that those buttons wont show up along the bottom where the ones in the array go, but with some styling work you can make it still look nice.
It should be easy using $scope variables and ng-hide/ng-show
function something_happens(){
$scope.it_happened = true;
}
<button ng-show="it_happened">Qlik Me</button>
The button will only display if $scope.it_happened == true

Google Chart title and column name with special characters

The solution for what i am looking should be here. But, when i try to use ASCII character encodings, the ASCII code is actually printed. Any ideas why?
For example, i have the following code on Google Chart Option:
var optionsTotUsers = {
'title': 'Transaçoes',
'backgroundColor': 'transparent',
'height': '300',
'legend': 'bottom',
'vAxis': { viewWindowMode: "explicit", viewWindow: { min: 0} }
};
This prints the actual &ccedil on the chart title. If i use the 'ç' it prints out �.
I think this will help you.Using UNICODE you can add special characters to the title. The UNICODE for the special characters is available here.You need to use UNICODE as below.
var options = {
'title': 'Transa\u00E7oes',
'backgroundColor': 'transparent',
'height': '300',
'legend': 'bottom',
'vAxis': { viewWindowMode: "explicit", viewWindow: { min: 0} }
};
Click here to see the working sample. jqfaq.com
if you are using jQuery, you can take advantage of the html() function
var options = {
title: $('<div>Transaçoes</div>').html()
...
};
Edit : Dont know why google charts is not able to parse a string with special HTML characters, or why there is not an option for declaring the title as HTML - even <em> and so on is rendered as text, but the above works.
The .html() function worked for me for the Chart title, but I needed to use the .text() function to get character codes to display for vertical and horizontal axes labels.

How to move between panels in Sencha touch

When moving between panels I get the following error
[WARN][Ext.Component#constructor] Registering a component with a id (`logOutButton`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`.
I can go back to the previous screen but the cannot go forward again without getting the above error.
To combat this I have tried using the code below, but it does not work. Can anyone help me out?
var loginView = Ext.getCmp('login');
if(!loginView){
Ext.getCmp('loginTest2').destroy();
loginView = Ext.create('com.view.Login');
}
Ext.Viewport.setActiveItem('login');
I also tried:
if(Ext.getCmp('login')){
Ext.Viewport.setActiveItem('Login');
}else{
Ext.Viewport.setActiveItem(Ext.create('com.view.Login'));
}
Neither of these work and result in the same error and a blank screen. I am using Sencha Touch 2.
we can simply use following line to navigate from one panel to another..
Ext.Viewport.animateActiveItem({ xtype: "cat" }, { type: "slide", direction: "up" });
here, xtype is that we can define for the panel we want to display, like this...,
Ext.define('BeLocal.view.LeftCurveList', {
extend: 'Ext.Panel',
**xtype: 'cat',**
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
width: '100%',
padding:0,
title: 'BeLocal Places',
items:[{
xtype: 'button',
ui: 'back',
text: 'Back',
]
},
]
}
});
To avoid this error do not use id for button or any other item instead of id use action config for button or use item id .to destroy a component using itemId simply use this`
Ext.ComponentQuery.query('list[action=diaryselectlist]')[0].destroy();
above it just destroying a list to whom i gave action not id you can give itemId instead of action in this ..
hope you will enjoy this