Send a flag instead a letter based in a json - json

i don't know if i expleined i receive a json from an odata call and i send it to my table but one field have a X or is empty but instead of showing a X i want to show a flag like in ObjectListItem with a ObjectMarker type="Flagged" and just showing the flag
my table: (i delete some colums for this but my field that i'm interested is Sucursalescolacion and Sucursalesflag)
<Table id="bSucursales"
inset="false"
items="{/}"
visible="false"
enableBusyIndicator="true">
<columns>
<Column>
<Text text="{i18n>colSucursalesid}" />
</Column>
<Column>
<Text text="{i18n>colSucursalesnombre}" />
</Column>
<Column>
<Text text="{i18n>colSucursalesdircalle}" />
</Column>
<Column>
<Text text="{i18n>colSucursalesdirnumero}" />
</Column>
</columns>
<items>
<ColumnListItem press="" type="Active">
<Text text="{Sucursalesdepto}"/>
<Text text="{Sucursalesfono1}"/>
<Text text="{Sucursalesfono2}"/>
<Text text="{Sucursalesactiva}"/>
<Text text="{Sucursaleshoraini}"/>
<Text text="{Sucursaleshorafin}"/>
<Text text="{Sucursalescolacion}"/>
<!-- <ObjectMarker type="Flagged"/> -->
<Text text="{Sucursalesflag}"/>
</ColumnListItem>
</items>
</Table>
my controller
var bSucursales = this.byId("bSucursales");
bSucursales.setVisible(true);
oDataModel.read("/" + resultado2 +"?$filter=Maestropais eq '" + resultado + "'" + "and Maestrometodo eq '" + metodo + "'", {
success: function(oData, response) {
var oResults = oData.results;
oModel.setData(oResults);
bSucursales.setModel(oModel);
},
error: function(oError) {
}
});

You could use expression binding:
<ObjectMarker type="{= ${Sucursalesflag} === 'X' : 'Flagged' : ''}" />
More info: https://sapui5.hana.ondemand.com/#/topic/5cff8d1c3fb84c5db7a00f2daca125af

Also, you can choose to use a formatter as:
<ObjectMarker type="{path: 'Sucursalesflag', formatter: '.formatSalesFlag'}"/>
Define formatter function in your controller:
.
.
.
statusText: function (sSalesFlag) {
if(sSalesFlag == 'X'){
return 'Flagged';
}
else{
return '';
}
}
}
You can write more complex custom formatters for different use-cases. Learn more about customer formatters here

Related

Svg text according to the language to be used

How can I make the text I want to show differ according to the language used.
Example if the text is in:
Spanish I would like to use the text: Hola!
Italian I would like to use the text: Ciao!
English I would like to use the text: Hi!
If no language is passed, a default one, for example English.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg height="30" width="200">
<text x="0" y="15" fill="blue">Hi!</text>
</svg>
Example for language selection, the language could be on cookie or session.
Or it could be passed as a parameter to the file name.svg?Lang=es
You can use a switch element. Change your browser's language settings to prefer Italian or Spanish to see the text change.
<svg width="100%" height="100%" viewBox="0 100 600 300">
<switch font-size="18">
<g systemLanguage="en">
<text x="20" y="220" xml:lang="en-US">Why can't they just speak English ?</text>
<text x="230" y="150" xml:lang="en">English (US)</text>
</g>
<g systemLanguage="es">
<text x="20" y="220" xml:lang="es-ES" font-size="18">¿Por qué no pueden simplemente hablar en castellano ?</text>
<text x="230" y="150" xml:lang="en">Spanish (ES)</text>
</g>
<g systemLanguage="it">
<text x="20" y="220" xml:lang="it" font-size="18">Perchè non possono semplicemente parlare italiano ?</text>
<text x="230" y="150" xml:lang="en">Italian</text>
</g>
</switch>
</svg>
In modern Browsers you can use a Custom Element to dynamically generate the SVG
Use Roberts systemLanguage to enhance the SVG
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/systemLanguage
For React you have to add extra wrapper code around every Custom Element,
React only supports this W3C standard for 71%,
all other Frameworks are 100% BFF with the W3C standard Custom Elements API
customElements.define('svg-text', class extends HTMLElement {
static get observedAttributes() {
return ["bgfill", "width", "height", "stroke", "fill", "text",
"x", "y", "fontsize", "rotate"
]; // update whenever these attributes change
}
connectedCallback() {
let [bgfill = "pink", width = 200, height = 150, stroke = "none", fill = "green",
text = "Hello", x = "50%", y = "50%", fontsize = "1em", rotate = "0"
] = this.constructor.observedAttributes.map(x => this.getAttribute(x) || undefined);
this.innerHTML = `<svg width='${width}' height='${height}'` +
`xmlns='http://www.w3.org/2000/svg'>` +
`<rect width='100%' height='100%' fill='${bgfill}'/>` +
`<text dominant-baseline='middle' text-anchor='middle' font-size='${fontsize}'` +
` x='${x}' y='${y}' fill='${fill}' ` +
` stroke='${stroke}' transform='rotate(${rotate} ${width/2} ${height/2})'>${text}</text></svg>`
}
attributeChangedCallback(name, oldValue, newValue) {
if (this.isConnected) this.connectedCallback();
}
});
// example changing attribute
setTimeout(() => {
document.querySelector("svg-text").setAttribute("text", "Ola!");
}, 21e2)
<svg-text bgfill='lightblue' fill="blue" width="100" fontsize="3em" height="100">
</svg-text>
<svg-text fill="green" width="75" height="25" text="Hallo">
</svg-text>
<svg-text bgfill="gold" fill="red" width="50" text="Bonjour" rotate="90" fontsize="2em">
</svg-text>

How to access value 0 of json data (react-native) expo

I have some json data such as:
[{"timestamp":"2020-03-23T14:00:00.000Z","symbol":"AAL","name":"American Airlines Group","industry":"Industrials","open":10.9,"high":11.36,"low":10.01,"close":10.25,"volumes":55494100},
{"timestamp":"2020-03-22T14:00:00.000Z","symbol":"AAL","name":"American Airlines Group","industry":"Industrials","open":10.6526,"high":12,"low":10.3,"close":10.38,"volumes":62681800},
{"timestamp":"2020-03-19T14:00:00.000Z","symbol":"AAL","name":"American Airlines Group","industry":"Industrials","open":11.6,"high":12.16,"low":10.01,"close":10.29,"volumes":71584500},{"timestamp":"2020-03-18T14:00:00.000Z","symbol":"AAL","name":"American Airlines
I want to get only the 0 index value:
This one: [{"timestamp":"2020-03-23T14:00:00.000Z","symbol":"AAL","name":"American Airlines Group","industry":"Industrials","open":10.9,"high":11.36,"low":10.01,"close":10.25,"volumes":55494100},{"timestamp":"2020-03-22T14:00:00.000Z",
My code:
let movies = state.myListData.map((val) => {
return (
<View key={val.symbol} style={styles.text}>
<Text style={styles.text} key={val.symbol}>
{val.high}
</Text>
<Text style={styles.text} key={val.symbol}>
{val.close}
</Text>
</View>
);
});
Right now I am getting all the values, but how can I get only the value 0? Is there any way to do that?
You may simply do this:
let item = state.myListData[0];
let movie = (
<View key={item.symbol} style={styles.text}>
<Text style={styles.text} key={item.symbol}>
{item.high}
</Text>
<Text style={styles.text} key={item.symbol}>
{item.close}
</Text>
</View>
)

Embed html FlameGraph into Azure wiki

I need to embed app Flame Graph into Azure Devops wiki page.
FlameGraph is an visualization of an app's call stack in a very simple and understandable form. Physically it is a SVG image which is rendered by browser like this (clickable):
However, I want to embed not a usual FlameGraph, but a HTML graph which is a huge piece of 70K+ HTML and JS lines. This code having rendered looks totally like SVG, here is the sample
<g id="" class="func_g" onmouseover="s(this, '', 'perf')" onmouseout="c('', 'perf')"
onclick="zoom(this, 'perf')" >
<title>consular_function</title>
<rect x="531.6" y="398" width="0.6" height="15.0" fill="rgb(220,220,220)" rx="2.2" ry="2.2" />
<text text-anchor="" x="534.61" y="408.5" font-size="12" font-family="Verdana" fill="rgb(0,0,0)" >
</text>
</g>
<g id="" class="func_g" onmouseover="s(this, '', 'perf')" onmouseout="c('', 'perf')"
onclick="zoom(this, 'perf')" >
<title>db_function</title>
<rect x="1367.2" y="446" width="0.1" height="15.0" fill="rgb(130,202,250)" rx="2.2" ry="2.2" />
<text text-anchor="" x="1370.18" y="456.5" font-size="12" font-family="Verdana" fill="rgb(0,0,0)" >
</text>
</g>
<g id="" class="func_g" onmouseover="s(this, '', 'perf')" onmouseout="c('', 'perf')" onclick="zoom(this, 'perf')" >
<title>db_function</title>
<rect x="1402.0" y="414" width="1.7" height="15.0" fill="rgb(130,202,250)" rx="2.2" ry="2.2" />
<text text-anchor="" x="1405.03" y="424.5" font-size="12" font-family="Verdana" fill="rgb(0,0,0)" >
</text>
</g>
<g id="" class="func_g" onmouseover="s(this, '', 'perf')" onmouseout="c('', 'perf')"
onclick="zoom(this, 'perf')" >
<title>consular_function</title>
<rect x="1037.6" y="302" width="4.6" height="15.0" fill="rgb(220,220,220)" rx="2.2" ry="2.2" />
<text text-anchor="" x="1040.59" y="312.5" font-size="12" font-family="Verdana" fill="rgb(0,0,0)" >
</text>
</g>
<g id="" class="func_g" onmouseover="s(this, '', 'perf')" onmouseout="c('', 'perf')"
onclick="zoom(this, 'perf')" >
<title>moduled_function (3,218 us, 0,04%)</title>
<rect x="10.8" y="494" width="0.7" height="15.0" fill="rgb(237,110,36)" rx="2.2" ry="2.2" />
<text text-anchor="" x="13.78" y="504.5" font-size="12" font-family="Verdana" fill="rgb(0,0,0)" >
</text>
</g>
<defs >
<linearGradient id="background_mem" y1="0" y2="1" x1="0" x2="0" >
<stop stop-color="#eeeeef" offset="10%" />
<stop stop-color="#eeeee0" offset="90%" />
</linearGradient>
</defs>
<style type="text/css">
.func_g:hover { stroke:black; stroke-width:0.5; cursor:pointer; }
</style>
</svg>
<script type="text/ecmascript">
// Javascript for svg file
// Used to control flame graph operations, e.g. zoom in/out, search, etc
if(typeof window.flameGraph == "undefined") window.flameGraph={}; // global flame graph elements (contained width, it is a hashmap for each svgId)
if(typeof window.searchButton == "undefined") window.searchButton={}; // global searching button hashmap for each svgId
if(typeof window.detailedTextField == "undefined") window.detailedTextField={}; // global detailed text box (on the bottom of graph) hashmap for each svgId
if(typeof window.matchedTextField == "undefined") window.matchedTextField={}; // global matched text box (on the right of detailed text box) hashmap for each svgId
if(typeof window.isSearching == "undefined") window.isSearching={}; // global hashmap for each svg whether it is in searching mode or not
if(typeof window.revertGraph == "undefined") window.revertGraph={}; // global hashmap for each svg whether the flame graph is reverted or not
revertGraph['mem'] = 0;
function init(evt, hlString, svgId) { //init function used to initialize the variables
if(svgId == undefined) return;
flameGraph[svgId] = document.getElementById(svgId).getAttribute("svg_width"); // get flame graph width by internal svg label "svg_width"
searchButton[svgId] = document.getElementById(svgId + "_search"); // get search button
detailedTextField[svgId] = document.getElementById(svgId + "_details").firstChild; // get details text box
matchedTextField[svgId] = document.getElementById(svgId + "_matched"); // get matched text box
isSearching[svgId] = 0; // not searching
if(hlString.length != 0) search(hlString, svgId); // if needed -> highlight string with search function when creating flame graph
}
init(null, '', 'mem');
function jumpToPage(title) { // jump to formatted dev trace page
var reg = new RegExp('(?<=w)([0-9]+)(?=\\s\\()');
var pageNo = reg.exec(title);
if(pageNo == null) {alert('target not found.'); return;}
showDevTrace('' + pageNo[0] + '_html');
}
function s(node, id, svgId) { // mouse-over action
detailedTextField[svgId].nodeValue = "" + getTitleText(node); // show the text of current choosing node
if(id.length != 0) window.parent.highlightFrame(id);
}
function c(id, svgId) { // mouse-out action
detailedTextField[svgId].nodeValue = ' ';
if(id.length != 0) window.parent.unhighlightFrame(id);
}
function getTitleText(e) { //return the title string of the e node
var text = findChild(e, "title").firstChild.nodeValue;
return (text);
}
function findChild(e, name, attr) { // looking for the child (of e) whose name is equal to "name"
var children = e.childNodes;
for(var i=0; i<children.length;i++) {
if(children[i].tagName == name) {
if(attr == undefined) return children[i]; //return the child node
else children[i].attributes[attr].value; // if attr is inputed, return the attr value of this child node
}
}
return;
}
table, th, td {
background-color: #FFFFF1;
padding: 7px;
border: 1px solid black;
border-collapse: collapse;
overflow: visible;
font-size: 12px;
alig: left;
}
<style></body>
</html>
full code is too big so I put full working sample into a fiddle.
I tried to put HTML/JS lines directly into Azure page but it does not render this code showing it like plain-text, for simple HTML like tables and lists Azure works though.
How to embed this piece into Azure? I know that iframe is still not supported but maybe there is another way?
P.S. Maybe there is way to convert html-rendered graph into SVG, does Azure renders such SVG correctly?

React with Kendo-ui Grid - Wrong column header

I have a React application using redux as state manager. In this application we are deciding to use Kendo Ui grids. The first test is Ok but we noticed that the columns are totally wrong. We define only 5 Columns to be displayed in the table but we noticed that all the columns from the json object get displayed. For example in the render method I have this code:
render() {
return (
<div>
<Grid
style={{ height: '400px' }}
data={this.state.gridData}
>
<Column field="ProductID" title="ID" width="40px" />
<Column field="ProductName" title="Name" width="250px" />
<Column field="Category.CategoryName" title="CategoryName" />
<Column field="UnitPrice" title="Price" width="80px" />
<Column field="UnitsInStock" title="In stock" width="80px" />
</Grid>
</div>
);
}
which should show only:
ID | Name | CategoryName | Price | In stock
but what it renders are those headers:
ProductID | ProductName | SupplierID | CategoryID | UnitPrice | UnitsInStock
which are the from the json object directly:
"ProductID " : 1,
"ProductName" : "Chai",
"SupplierID" : 1,
"CategoryID" : 1,
"UnitPrice" : 18.0000,
"UnitsInStock" : 39
In other words, no matter which columns I define (as <Column /> tag), the grid shows always the json field as column headers.
Following libs are imported:
import { Grid, GridColumn as Column, GridCell } from '#progress/kendo-react-grid';
I'm using exactly the exmaple from this page:
https://www.telerik.com/kendo-react-ui/components/grid/
There is no error in the console, so it is hard to find whats going on.
Any idea?
Update:
I added this console.log statement and i see that the columns are empty:
constructor(props: IProps) {
super(props);
this.state = { producuts: [{ ProductID: 'Cindy', ProductName: 'Jones', UnitPrice: 'cindy.jones#telerik.com' }]
};
this.grid = null;
}
render() {
return (
<div>
<Grid
data={this.state.producuts}
reorderable={true}
ref={(g) => { this.grid = g; }}
>
<GridColumn field="ProductID" title="ID" />
<GridColumn field="ProductName" title="Name" />
</Grid>
<button onClick={() => {
console.log(this.grid);
console.log(JSON.stringify(this.grid.columns));
}}>
log current properties into browser console.
</button>
</div>
);
}
This line console.log(JSON.stringify(this.grid.columns)) has always empty array result []
Although the headers should be:
ID | Name
but they appear like this:
I recently had the same problem. We are using 'react-hot-loader' which leads to your described error.
In the source code of the grid is a type comparison:
this.initColumns(children.filter(function (child) { return child && child.type === GridColumn; }));
When using react-hot-loader a Column is not of type GridColumn, but of type Proxycomponent. So the type check fails and the grid renders the default columns.
Workaround:
reactHotLoader.disableProxyCreation = true;
var grid = (<KendoGrid data={ { data: this.state.Products, total: 1} }
pageable={true} >
<KendoColumn field="ProductName" title="Product Name" />
<KendoColumn field="UnitPrice" title="Unit Price" format="{0:c}" width="120px" />
<KendoColumn field="UnitsInStock" title="Units In Stock" width="120px" />
<KendoColumn field="Discontinued" width="120px" />
</KendoGrid>);
reactHotLoader.disableProxyCreation = false;
Disabling the proxy creations solves the problem, but this workaround is quite dirty.
We disabled react-hot-loader in our project to solve this issue.

Windows Media Player Skin Repeat Button

I am trying to get the code for the repeat button to work. The shuffle is working, but the repeat does not. Any help would be great! The button is part of the main background. The .wms file is below. I am using .png files for my images. Not really sure what I should all add on to here.
<THEME>
<VIEW
clippingColor = "#780E85"
backgroundImage = "wmpSkin2.png"
titleBar = "False"
width="925"
height="502"
backgroundColor="none"
transparencycolor="#780E85"
scriptFile="skin.js"
onLoad="OnOpenStateChange();">
<player PlayState_onchage="OnOpenStateChange();"
OpenState_onchange="OnOpenStateChange();"
modeChange="OnOpenStateChange();"
>
</player>
<BUTTONGROUP
mappingImage = "wmpSkinMapping.png"
hoverImage = "wmpSkinHover2.png">
<!-- Control buttons -->
<PLAYELEMENT mappingColor = "#000080"
upToolTip = "Play" />
<PAUSEELEMENT mappingColor = "#0000FF"
upToolTip = "Pause" />
<STOPELEMENT mappingColor = "#FFFF00"
upToolTip = "Stop" />
<BUTTONELEMENT mappingColor = "#FF00FF"
upToolTip = "Next"
onClick="jscript:player.controls.next()"
cursor="system"
enable="wmpenabled.player.controls.next" />
<BUTTONELEMENT mappingColor = "#00FF00"
upToolTip = "Previous"
onClick="jscript:player.controls.previous()"
cursor="system"
enable="wmpenabled.player.controls.next" />
<!-- Minimize, Full Mode, Exit Buttons -->
<BUTTONELEMENT mappingColor = "#808000"
upToolTip = "Minimize"
onClick="view.minimize();" />
<BUTTONELEMENT mappingColor = "#FFA500"
upToolTip = "Return to Full Mode"
onClick="view.returnToMediaCenter();" />
<BUTTONELEMENT mappingColor = "#008000"
upToolTip = "Close"
onClick="JScript: view.close();" />
<!-- Shuffle and Repeat -->
<BUTTONELEMENT id="btnShuffle"
mappingColor="#008080"
upToolTip="Turn Shuffle On"
downToolTip="Turn Shuffle Off"
onClick="player.settings.setMode('shuffle',down);"
down="wmpprop:player.settings.getMode('shuffle')"
sticky="true"
>
</BUTTONELEMENT>
<BUTTONELEMENT id="btnRepeat"
mappingColor="#800080"
onclick="jscript:player.settings.setMode('loop',down);"
upTooltip="Enable Repeat"
downTooltip="Disable Repeat"
down="wmpprop:player.settings.getMode('loop')"
sticky="true">
</BUTTONELEMENT>
</BUTTONGROUP>
<seekSlider zindex="2"
left="230" top="141"
backgroundImage="sleekbar.png"
thumbImage="sleekbtn.png"
thumbHoverImage="sleekbtnHover.png"
transparencyColor="#780E85"
borderSize="5"
useForegroundProgress="false"
>
</seekSlider>
<text id="metadata"
left="240"
top="169"
width="275"
fontSize="6"
fontSmoothing="true"
fontFace="Arial"
foregroundColor="#003EAA"
scrollingDelay="50"
scrollingAmount="1"
justification="Center"
scrolling="true"
toolTip=""
passThrough="true"
fontStyle="normal">
</text>
<text id="metadata2"
left="240"
top="169"
width="275"
fontSize="6"
fontSmoothing="true"
fontFace="Arial"
foregroundColor="#003EAA"
scrollingDelay="50"
scrollingAmount="1"
justification="Center"
scrolling="true"
toolTip=""
passThrough="true"
fontStyle="normal">
</text>
</VIEW>
</THEME>