I'm learning Polymer 1.8 and I'm trying to get data from an api.
after that i want to bind data from my ontap() function with a dom-repeate, but I'm getting a weird error in the console:
[dom-repeat::dom-repeat]: expected array for items, found [{"requestnum":"1045","orgid":"EAGLENA"},{"requestnum":"1046","orgid":"EAGLENA"},{"requestnum":"1047","orgid":"EAGLENA"},{"requestnum":"1048","orgid":"EAGLENA"},{"requestnum":"1049","orgid":"EAGLENA"}]
i can't solve this problem could any one help me?
What is wrong in this code????
im using polymer 1.8
*this is my html file maximo-test-card.html:
<dom-module id="maximo-test-card">
<template>
<template is="dom-repeat" items="{{hi}}">
<li>
<span>{{item.requestnum}}</span>
</li>
</template>
<div>{{hi}}</div>
<iron-ajax
id="requestRepos"
headers='{"Content-Type": "application/json", "Accept": "someAccept", "Authorization": "someAuthorizationToken"}'
url="http://vaganet.vaganet.fr:9080/maximo/oslc/os/mxinvres?oslc.select=*"
handle-as="json"
on-response="ontap"> </iron-ajax> </template>
<script src="maximo-test-card.js"></script>
</dom-module>
*this is my js file maximo-test-card.js:
Polymer({
is: 'maximo-test-card',
properties: {
repos: {
type: Array
},
githubrepository:{
type: Array
},
hi:{
type: Array,
},
},
ready: function () {
this.$.requestRepos.generateRequest();
//console.log(hi)
//this.name=hi
},
ontap: function (data) {
this.repos = data.detail.response.member;
hi = []
for (var i = 0; i < 5; i++) {
hi[i] = {"requestnum":this.repos[i].requestnum,"orgid":this.repos[i].orgid}
}
this.hi = JSON.stringify(hi)
alert(this.hi);
return this.hi;
},
});
Related
I'm building a SPA using vue.js, I need to assign a div background-image referencing something in the following path:
I'm trying to reference src/assets/img/firstCard.jpg but for some reason it doesn't shows the image, this is how I'm binding the image:
HTML:
<a class="card">
<div
class="card__background"
v-bind:style="secondCard">
</div>
<div class="card__content">
<p class="card__category">Gratuita</p>
<h3 class="card__heading">Ademas en diferentes plataformas.</h3>
</div>
</a>
JS:
<script>
export default {
data () {
return {
thirdCard: {
'background-image': require('#/assets/img/firstCard.jpg')
},
secondCard: {
'background-image': require('#/assets/img/firstCard.jpg')
},
firstard: {
'background-image': require('#/assets/img/firstCard.jpg')
}
}
}
}
</script>
Thank you all for your time.
You can try to make method or computed property:
getUrl (img) {
return require(`#/assets/img/${img}.jpg`);
}
then call that method in data object (for background-image you need to specify url):
data () {
return {
firstCard: {
'background-image': `url(${this.getUrl('firstCard')})`
}
}
},
I am new to vue.js and currently I am building an app for learning purposes.
What I want to do:
I have a parent component which has a bunch of buttons with different id's.
The child component will wait for those id's to be sent by the parent and it will decide what to display based on the id. Thats all.
I wont post the full code because it's too large but I have tried a bunch of stuff like props and state but honestly it is so confusing.
I come from React background and I am still confused.
Parent component
<template>
<button id="btn1">Show banana</button>
<button id="btn2">Show orange</button>
</template>
<script>
export default {
name: 'Parent',
data: function {
//something
},
props: {
// ?????
}
};
</script>
**Child component**
<template>
<p v-html="something.text">
</template>
<script>
export default {
name: 'Child',
data: function() {
something: ''
if(id from parent === id I want) {
something = object.withpropIneed
}
},
};
</script>
You need to map the data from parent and pass it to child, thats it!
In example i make passing a html string and binding that html received through 'fromParentHtml' prop mapped on child, so inside child component 'this.fromParentHtml' pass to exists because it is defined in props and every time you click in parent button executes the 'show' function and change the value from passed prop to child through parent 'html' data .. =)
<template>
<div>
Current html sent to child '{{html}}'
<br>
<button #click="show('banana')">Banana</button>
<button #click="show('orange')">Orange</button>
<button #click="show('apple')">Apple</button>
<!-- Create child component -->
<child-component :fromParentHtml="html"></child-component>
</div>
</template>
<script>
export default {
name: "test3",
components: {
'child-component': {
template: "<div>Child component... <br> <span v-html='fromParentHtml'></span> </div>",
//Child component map a prop to receive the sent html from parent through the attribute :fromParentHtml ...
props: {
fromParentHtml: {
required: true,
type: String
}
}
}
},
data(){
return {
html: ''
}
},
methods: {
show(fruit){
this.html = '<span>The fruit is ' + fruit + ' !</span>';
}
}
}
</script>
<style scoped>
</style>
If helped you please mark as correct answer! Hope it helps.
Edit 1:
Assuming you have webpack to work with single file components, to import another component just do:
<template>
<div>
<my-child-component></my-child-component>
</div>
</template>
<script>
//Import some component from a .vue file
import ChildComponent from "./ChildComponent.vue";
export default {
components: {
//And pass it to your component components data, identified by 'my-child-component' in the template tag, just it.
'my-child-component': ChildComponent
},
data(){
},
methods: {
}
}
</script>
Just for the sake of it, I think you were looking for this:
<template>
<button id="btn1" #click = "id = 1">Show banana</button>
<button id="btn2" #click = "id = 2">Show orange</button>
<child-component :childid = "id"></child-component>
</template>
<script>
import childComponent from 'childComponent'
export default {
name: 'Parent',
data () {
return {
id: 0
}
},
components: {
childComponent
}
};
</script>
**Child component**
<template>
<p v-html="something.text">
</template>
<script>
export default {
name: 'Child',
props: {
childid: String
},
data: function() {
something: ''
if(this.childid === whatever) {
something = object.withpropIneed
}
},
};
</script>
Solved my problem by taking a different approach.
I have implemented state and my component behaves exactly as I wanted to.
I found this link to be helpful for me and solved my problem.
Thank you.
How can I pass External date filters(Like start and end date), inside the custom HTML Page so that report gets rendered when I pass those values and clicks on submit I have the below HTML Page which gives a embedded report but I am trying to work those input box's how can I do this?
Is this possible or still present inside the ideas tab? Please guide my on it as How should I achieve this?
My HTML Code:-
<html>
<body>
<h2>PowerBI Embedded Report</h2>
<form action="/action_page.php">
<input type="text" name="sdate" placeholder="Start Date"><br>
<input type="text" name="edate" placeholder="End Date"><br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
window.onload = function () {
var models = window['powerbi-client'].models;
var embedConfiguration = {
type: 'report',
accessToken: 'H4sIAAAAAAAEAC2Wx8rGDHaD7-XfOuDeArNw7717Z7_uvbeQe88XZvaCA8-RhP7nHzt7hzkr_vnvf0wUrmKBLexiTDSgmbSBLCFMqVC6-C2i2HSVSJG9OiWtTMjFe-ozi5tfZwsJuH3jRKiWsWGkrJ8kTbfMnVzTj4OKVV9RRz7RZpAwcm40K-EEJQtxbTXppsVoOEkOSnS_vLLEuOgmXJVLj4Z-mVWAoP93FnZcFOOtt5qIhUr68Ey7OjCNk9kjWIJuF8XvESV5RlTJrqiIQtVCcgDiEb6EZby7zRKpFpnIK4_icXPfZt60foH2YSNBtQHYQHrcyRxfpC3FbPcJAwu4H4TQVbtU9FxatuKrgxj7wIgscp_S4lV0XD6zRZ4sXnvbMjhKCFzNVVBFK3Z_3GXY-2idfi7HrvPNC2H1ZnaK-spl4-ZBAuZkahc_n4VMyc9TXfrH41G0YMZ8jA4gPpXGD_A2INi7u4ryh2dTI7IGQLcGVJ5d5XE-vCah0-A992s4Z79skvXXUDmrrsFOQtMAaL38AxqJyYujTXRPVXcW1Lp5UbeqbHGo1214b0TanpkhAdVL9DKEcRwYorfZQuSYqBfifFNzEcaDEj7plWpfEsIjLUPKYCgKpTj8XUiXgPnbbh9aQcZj9A8bXVVJ7T66yq0w6yBK4Y4bbgAUdBsvQEAlwnbhlnfHJFQpEbfnI2ai27xv7wCbJQmPk1RjKAuNW4kyInXvyrlDqEGdWTXIBYrsNWRQzW4VHYaUwTVc2pJ1ca4REmG1XqEgUIqbVY5ZKp0qsiRlSlH_gJiKbOuSDwF-QB7rz1uqc0aB3SJYy1-a8aB7WAnikHqm_1RI2mUvd-P1jLAMNgUIED93o4J1VMNzrPxCZCf2sVMxVxKRG7JmpcW2Z6F-TUlNQXijBdfjIedowwqqvZxxrjHX1xadvDBfG8jvYw_7PDjNBmjXiuI15sW0p-Plb8FS7FY-6vP6bPpMX2xnUWdMF_MFpfEeRRFshol_oHYd5LUSN5FOKicqD46h_kXUPRjPjCbjpD9b3G2lQ2IDEDtHCcd98HyycVCoj1CWd2FHtJMl3y47dZtejF6L9csgg4yJXL_91EQ9nh51IQzVRNTH1CK71jH-IXKkyaMfDrS0xL_lJ4s-bgPr6Uc82FjDdxcCa1sz-Vu_2-iKCEGlN0kJ-GRsgqT2oF_fDQ3WH-xY8-LpISOWs63iuCQ85_o6-l1aY-tjOnyfNIhZzSQuFk7k1bNdLQYIvBae4aBEoGLuMeLzibLWgXL8UoIfgrAJdWPqI1AQs4w1StLipBo6UtvtAqVU6YSqrV8PoLL3zWY5po7RbmibofrbcFH3c5r-U1cS-PqnK9e7p1g9xr4iouek8_m7ZBsYdOcm9fNPnjbRjB1fystufOkjdG8TCAK3SYziSLWejh8mFWg8dhDQfBu8aAKXKxxgO5XOSwLIabNBpvyA_UpKMk_vUWLt4YYkT1HHqbvXW9bxWak6gtCgu5jRCt0tZAcBBge1H1iYip9ZGonoVKjql50clPxVD5JD5UCcUcsfJygcCRC8lc_nJpJpYykXltkwQdg29Ayaw4z9mTcrVMOUlUECcz_x5I99NUwpVwHOxkYlaD37Yo1M1OcMC4DoBnQZQXOXj_6nB1bvsCUK_IGX9FLn0zAM2fvGnAVGDpnMVKA_s_QkHuP-kS1Jh6i95Qi2Ef-fU3KWUJdTgvqrsM_yUubWGyMmY1v7NZ9ghRzn1fVzIAgooVqc4Ioi-SNYTyJNe-rm8uNE204qSw18D_74YIdLncOKQCiztDsRVR3SoaGkZCRKcvJvOiyixD7bI8EKuViPe3oaCS6X9MmlwRFgIPn2AzG5_DPP44wRMsLMlazx3MRWy7x0RFKnPXl_8XJmxtn0GXhkJk6n6Vx3YJeIzgPWvGn9bMn-fhA_HPO4XB-QwBQHZmRfpT7RMtfnSNFy_mnyJMs64j0KnnPRNOU_qFPTseR3VOK5nNFcwrMEAG37QgLcBeKLDfHeKzRY3nkif93uIaaXfdm1c2sicAPO6i6OQVpNppoU9_uv3t5X82YX0qFquk1Mhh1cckAjq9HVAl5DG0G9CQ4i0WOEwvbmgqIPXZdKbjaXctwnuS11dGl_sfxtSCR9oi7Ov9LS-de__vmvf7jtXY5ZK9-_maCHuhkdZADin0C4F0AXWt7AnERSEfneiU5xz_3M3pwPObY0x1WEezH2b_iL6FJiCHuX8hpqqOt74FCd00p7KK8e-d3iy-svelX5oJ8_R8HPKlHSELHCEP_y06NU0wsZM7V-oJxb3rttIOjlKy3VqZw5IFiUitUKYECjTEH2cKCicPt57De29lKSi0LGjoFAQbj2wQu8HZ8jh1MLAda_OwarS8bYACiFKT6fmJ0JpHnT0nLFWqIQN6xHvCZOTm4Y_4Hxj03_1oQZcmDgSZs1Iqz9ANESlLYkDtOMjMvrzrBC8c1qCLmWa4nJI4ldKIp7oPwrdrTGEuaiYi8WODETWCqq_QfzuzTlpoR_lMXoMToQpp6Y75VyYpir6Zx_q7y2nrLj3Mo_WVn8mGR68N4UIbiemwf7WzE5BXNkUiFc0_ayqynxmcbVT7SERI5Q7ew7GfPXom9z0GZBvgVFY8Jl2wBy1oJx5dh7O1yBNZU7yvURaM7GCqJSl99qZOUo04LrPfGcsuEND9SDykxfvpQFbPel7RBlFgsdLdOz-YhcqxHKtEEYZcIfMLDpI9h1b7Dx8TQ5bLr-2nkfhfPgzHXHd2goAFT1B6Uhf0zWcvUUkZ43_5w5ZfaFyfm9dO7k7COMT5sbuZguvkNLdHMwS6qVWXKjBktgbmbyzE2u3lAmMwN88YDl-mCCz5upiqPkCGSOu7Lmi0Q5YP1m98f3h06UeweqzeumWVB1_Yf5f_8PAgjN0hoLAAA=',
id: 'cd0cbb78-41ca-4db1-b739-e982f59694a2',
tokenType: models.TokenType.Embed,
embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=cd0cbb78-41ca-4db1-b739-e982f59694a2&groupId=a78aa4c1-fa2f-4e4d-b21e-3d47bb89618e'
};
var report;
var $reportContainer = $('#reportContainer');
report= powerbi.embed($reportContainer.get(0), embedConfiguration);
var Filter1 = {
$schema: "http://powerbi.com/product/schema#advanced",
target: {
table: "reporting_validation_agg_group",
column: "aggregation_end_date_local_1"
},
logicalOperator: "AND",
conditions: [
{
operator: "LessThanOrEqual",
value: "12/20/2017"
}
]
}
var Filter2 = {
$schema: "http://powerbi.com/product/schema#advanced",
target: {
table: "reporting_validation_agg_group",
column: "aggregation_end_date_local_1"
},
logicalOperator: "AND",
conditions: [
{
operator: "GreaterThan",
value: "12/10/2017"
}
]
}
report.on('loaded', event => {
report.getFilters()
.then(filters => {
filters.push(Filter1);
filters.push(Filter2);
return report.setFilters(filters);
});
});
}
function reloadreport(){
var $reportContainer = $('#reportContainer');
powerbi.embedNew($reportContainer.get(0), embedConfiguration);
};
</script>
<script src="jquery.js"></script>
<script src="es6-promise.js"></script>
<script src="powerbi.js"></script>
<div id="reportContainer"></div>
</body>
</html>
See if this solution helps you too:
https://community.powerbi.com/t5/Desktop/Power-BI-JavaScript-filter-between-2-dates/td-p/312204
Basically, you define an ADVANCED filter with the 'AND' operator referring to the intersection of the 2 dates.
You would, however, need to parse your input text (or datepicker) to the format required by the filter..
Please note that you can define the filters as part of the loadConfig by using the property filters: [filter1, filter2] as well..
I am trying to display and refresh periodically some server data using dgrid and derivative of Request dstore. The data are paginated and needs to be updated periodically. As a first naive approach I tried to call Dgrid.refresh() with setInterval. However, that results in complete rebuilding of grid rows which visually creates flickering effect. Using Trackable to the store does not help. Can anyone advise me how to refresh rows in the dgrid which would only update changed rows?
Here is my code reproducing the issue:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DGrid flickering on slow updates</title>
<style>
#import "./dojo-release-1.11.1/dojo/resources/dojo.css";
#import "./dojo-release-1.11.1/dijit/themes/claro/claro.css";
#import "./META-INF/resources/webjars/dgrid/1.0.0/css/dgrid.css";
#import "./META-INF/resources/webjars/dgrid/1.0.0/css/skins/claro.css";
html, body {
padding: 10px;
width: 100%;
height: 100%;
}
</style>
<script>
var dojoConfig = {
async:true,
baseUrl: "./",
packages:[
{ name:"dojo", location:"dojo-release-1.11.1/dojo" },
{ name:"dijit", location:"dojo-release-1.11.1/dijit" },
{ name:"dgrid", location:"META-INF/resources/webjars/dgrid/1.0.0" },
{ name:"dstore", location:"META-INF/resources/webjars/dstore/1.1.1" }
]
};
</script>
<script src="dojo-release-1.11.1/dojo/dojo.js"></script>
<script>
require(["dojo/parser",
"dojo/dom",
"dojo/_base/declare",
"dstore/Store",
"dstore/Trackable",
"dstore/Cache",
"dstore/Memory",
"dstore/QueryResults",
"dojo/Deferred",
"dgrid/Grid",
"dgrid/Keyboard",
"dgrid/Selection",
"dgrid/extensions/Pagination",
"dojo/domReady!"],
function(parser, dom, declare, Store, Trackable, Cache, Memory, QueryResults, Deferred, Grid, Keyboard, Selection, Pagination)
{
parser.parse();
console.log("Parsed");
var makeSlowRequest =
function(kwArgs)
{
var responseDeferred = new Deferred();
var responsePromise = responseDeferred.promise;
// resolve promise in 2 seconds to simulate slow network connection
setTimeout(function ()
{
console.log("Generating response");
var data = {items: [], total: 100};
kwArgs = kwArgs || {start:0, end:100};
for(var i = kwArgs.start; i < kwArgs.end; i++)
{
data.items.push({id: "id-" + i,
name: "test-" + i,
value: Math.floor((Math.random() * 10) + kwArgs.start)
});
}
responseDeferred.resolve(data);
}, 2000);
return new QueryResults(responsePromise.then(function (data) { return data.items; }),
{ totalLength: responsePromise.then(function (data) { return data.total;}) });
};
var SlowStore = declare("SlowStore",
[Store, Trackable],
{ fetch: function (kwArgs) { return makeSlowRequest(kwArgs); },
fetchRange: function (kwArgs) { return makeSlowRequest(kwArgs); }
});
var store = new SlowStore();
var TestGrid = declare([Grid, Keyboard, Selection, Pagination]);
var grid = new TestGrid({
collection: store,
columns: {name: "Name", value: "Value"},
rowsPerPage: 10,
selectionMode: 'single',
cellNavigation: false,
className: 'dgrid-autoheight',
pageSizeOptions: [10, 20],
adjustLastColumn: true
}, dom.byId("grid"));
grid.startup();
// update grid every 5 seconds
var timer = setInterval(function(){console.log("Refreshing grid"); grid.refresh();}, 5000);
});
</script>
</head>
<body class="claro">
<div id="grid"></div>
</body>
</html>
I am guessing that instead of calling refresh I need get the request range from the dgrid (possibly using aspect on gotoPage) and call store.fetchRange(), iterate over the results, compare each item with previous results and invoke store.update or store.add or store.delete. I suppose that would give me what I want but before taking this approach I wondering if there is an easier way to refresh dgrid with updated data. Using Cache store does not work as it expects to fetch all the data from the server:
var store = Cache.create(new SlowStore(), {
cachingStore: new (Memory.createSubclass(Trackable))()
});
I am new to YUI but I veteran of JQuery UI. So this one has me stumped. I cannot get my Datatable to render with the Rest service. I have two version of the code. One that I use the captured JSON object from the service as just a data object and a local datasource. That one works fine. When I attempt to switch to the GET plugin and get it from the service. It just never renders.
My local example:
#main("Play 2.1") {
<script type="text/javascript">
YUI().use("datatable", "datasource-local", "datasource-jsonschema", "datatable-datasource", function (Y) {
var data = [
{"script":{"id":34534,
"scriptText":"234523452345234",
"modifiedDate":1367525647000,
"status":"Reviewed",
"qcDate":1367526006000,
"location":{"id":1},
"orderInfo":{"id":1,
"orderName":"Order Name",
"dealerName":"Dealer Name"}
}},
{"script":{"id":656435,
"scriptText":"36536543636365",
"modifiedDate":1367525646000,
"status":"Reviewed",
"qcDate":1367526017000,
"location":{"id":1},
"orderInfo":{"id":43534534,
"orderName":"Order Name",
"dealerName":"Dealer Name"}
}}
];
var localDataSource = new Y.DataSource.Local({source:data});
localDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
schema:{
resultListLocator:"",
resultFields:[
{
key:"id",
locator:"script.id"
},
{
key:"scriptText",
locator:"script.scriptText"
},
{
key:"modifiedDate",
locator:"script.modifiedDate"
}
]
}
});
var simple = new Y.DataTable({
columns:["id", "scriptText", "modifiedDate"],
summary:"Example Summary",
caption:"Example Caption"
});
simple.plug(Y.Plugin.DataTableDataSource, {
datasource:localDataSource
});
simple.render("#dataGrid");
simple.datasource.load();
});
</script>
<span id="listView">
<div id="dataGrid" style="height: 95%;width: 100%;"></div>
</span>
<div id="dataCheckArea">
<h3>RAW DATA AREA</h3>
<ul>
#records.map {record =>
<li>#record.toString</li>
}
</ul>
</div>
}
My REST Service example:
#main("Welcome to Play 2.1") {
<script type="text/javascript">
YUI().use("datatable", "datasource-get", "datasource-jsonschema", "datatable-datasource", function (Y) {
var dataSource = new Y.DataSource.Get({
source:"http://localhost:9000/reviewRecords?q=query"
});
dataSource.plug(Y.Plugin.DataSourceJSONSchema, {
schema:{
resultListLocator:"",
resultFields:[
{
key:"id",
locator:"script.id"
},
{
key:"scriptText",
locator:"script.scriptText"
},
{
key:"modifiedDate",
locator:"script.modifiedDate"
}
]
}
});
var dataGrid = new Y.DataTable({
columns:["id", "scriptText", "modifiedDate"],
summary:"Example Summary",
caption:"Example Caption"
});
dataGrid.plug(Y.Plugin.DataTableDataSource, { datasource:dataSource });
dataGrid.render("#dataGrid");
dataGrid.datasource.load();
});
</script>
<span id="listView">
<div id="dataGrid" style="height: 95%;width: 100%;"></div>
</span>
** edited because the original submission lost my second code block.
The problem wasn't with my javascript code. The issue was with how I was sending the response. The YUI framework expects that the response will be wrapped in a callback function. When I changed my response to give a JSONP response with the callback it all started working.
YUI.Env.DataSource.callbacks.yui_3_11_0_1_1379097239018_187([
{"script":{"id":34534,
"scriptText":"234523452345234",
"modifiedDate":1367525647000,
"status":"Reviewed",
"qcDate":1367526006000,
"location":{"id":1},
"orderInfo":{"id":1,
"orderName":"Order Name",
"dealerName":"Dealer Name"}
}},
{"script":{"id":656435,
"scriptText":"36536543636365",
"modifiedDate":1367525646000,
"status":"Reviewed",
"qcDate":1367526017000,
"location":{"id":1},
"orderInfo":{"id":43534534,
"orderName":"Order Name",
"dealerName":"Dealer Name"}
}}
])
I did this by using a JSONP call in the method response from Scala/Play 2.1
def reviewRecords(q: String, callback: String) = Action {
val reviewRecords = reviewRecordsService.currentReviewRecords
Ok(new Jsonp(callback, Json.toJson(DataTablesReturnObject(reviewRecords.size, reviewRecords.toArray)))).as("application/json")
}
I am going to edit the title of my original question to include the keywords for Play 2.1 and Scala because this ends up being a little different than a Java response.