maxHeight for onyx.Menu not working properly in enyo - menu

Hey I'm having a problem with menus in my enyo app. Basically, maxHeight isn't doing anything on it. I cut my code down to emphasize just the problem:
enyo.kind({
name: "App",
fit: true,
components:[
{kind: "onyx.MenuDecorator", components: [
{name: "firstMonthContent", content: "Month"},
{name: "firstMonth", kind: "onyx.Menu", maxHeight: 200, onSelect: "getFirstMonth", components: [
{value: "0", content: "Jan", classes: "menuItem"},
{value: "1", content: "Feb", classes: "menuItem"},
{value: "2", content: "Mar", classes: "menuItem"},
{value: "3", content: "Apr", classes: "menuItem"},
{value: "4", content: "May", classes: "menuItem"},
{value: "5", content: "Jun", classes: "menuItem"},
{value: "6", content: "Jul", classes: "menuItem"},
{value: "7", content: "Aug", classes: "menuItem"},
{value: "8", content: "Sep", classes: "menuItem"},
{value: "9", content: "Oct", classes: "menuItem"},
{value: "10", content: "Nov", classes: "menuItem"},
{value: "11", content: "Dec", classes: "menuItem"},
]}
]},
],
});
Just a basic menu, everything works fine except for the maxHeight. Problem is, when I put this into jsfiddle, it works completely fine ( http://jsfiddle.net/sqHSL/17/ ). I created a new enyo file that has only this in it and it still causes this problem so I'm not sure what to do to fix it. Anyone have any advice?

Couldn't figure out the actual reason but I did figure out a work-around.
{kind: "onyx.MenuDecorator", maxHeight: "5px", components: [
{name: "firstMonthContent", content: "Month"},
{name: "firstMonth", kind: "onyx.Menu", onSelect: "getFirstMonth", components: [
{name: "menuScroller2", kind: "enyo.Scroller", defaultKind: "onyx.MenuItem", vertical: "auto", classes: "enyo-unselectable", maxHeight: "200px", components: [
{value: "0", content: "Jan", classes: "menuItem"},
{value: "1", content: "Feb", classes: "menuItem"},
{value: "2", content: "Mar", classes: "menuItem"},
{value: "3", content: "Apr", classes: "menuItem"},
{value: "4", content: "May", classes: "menuItem"},
{value: "5", content: "Jun", classes: "menuItem"},
{value: "6", content: "Jul", classes: "menuItem"},
{value: "7", content: "Aug", classes: "menuItem"},
{value: "8", content: "Sep", classes: "menuItem"},
{value: "9", content: "Oct", classes: "menuItem"},
{value: "10", content: "Nov", classes: "menuItem"},
{value: "11", content: "Dec", classes: "menuItem"},
]}
]}
]},

Related

Nested child elements not displaying in JSON column formatting in Microsoft List in SharePoint Online

I am trying to create a Status column which displays the progress of a multi stage approval flow.
This JSFiddle demonstrates how it should look:
I am now converting the HTML and CSS into the JSON required for column formatting.
All the conditional logic and colors are working, however it is not outputting the nested child elements.
The nested child elements (spans) are the 'arrows' at the end of each stage.
The column formatting therefore looks like this:
The associated HTML in browser developer tools console looks like this:
(you can see that the nested spans are not being output at all)
At first, I was wondering if nested children were allowed in JSON column formatting.
But I have seen other examples where people are using it (example), so that doesn't seem to be the issue.
Below is the JSON column formatting I am using.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style":
{
"font-size": "16px"
},
"children":
[
{
"elmType": "div",
"txtContent": "Stage 01",
"style":
{
"float": "left",
"padding": "10px 30px 10px 40px",
"position": "relative",
"font-family": "Arial",
"background-color": "=if([$Stage1Person] == '', '#eee', '#aeffae')"
},
"children":
[
{
"elmType": "span",
"style":
{
"position": "absolute",
"top": "0",
"right": "-19px",
"width": "0",
"height": "0",
"border-top": "21px solid transparent",
"border-bottom": "20px solid transparent",
"z-index": "2",
"background-color": "=if([$Stage1Person] == '', '#eee', '#aeffae')"
}
}
]
},
{
"elmType": "div",
"txtContent": "Stage 02",
"style":
{
"float": "left",
"padding": "10px 30px 10px 40px",
"position": "relative",
"font-family": "Arial",
"background-color": "=if([$Stage2Person] == '', '#ffdcae', '#aeffae')"
},
"children":
[
{
"elmType": "span",
"style":
{
"position": "absolute",
"top": "0",
"right": "-19px",
"width": "0",
"height": "0",
"border-top": "21px solid transparent",
"border-bottom": "20px solid transparent",
"z-index": "2",
"background-color": "=if([$Stage2Person] == '', '#ffdcae', '#aeffae')"
}
}
]
},
{
"elmType": "div",
"txtContent": "Stage 03",
"style":
{
"float": "left",
"padding": "10px 30px 10px 40px",
"position": "relative",
"font-family": "Arial",
"background-color": "=if([$Stage3Person] == '', '#ffaeae', '#aeffae')"
},
"children":
[
{
"elmType": "span",
"style":
{
"position": "absolute",
"top": "0",
"right": "-19px",
"width": "0",
"height": "0",
"border-top": "21px solid transparent",
"border-bottom": "20px solid transparent",
"z-index": "2",
"background-color": "=if([$Stage3Person] == '', '#ffaeae', '#aeffae')"
}
}
]
}
]
}
Simplified JSON
Here is a more simplified version which also demonstrates how the nested CHILD elements are not being output as HTML:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style":
{
"font-size": "16px"
},
"children":
[
{
"elmType": "div",
"txtContent": "Stage 01",
"style":
{
"float": "left",
"padding": "10px 30px 10px 40px",
"position": "relative",
"font-family": "Arial",
"background-color": "=if([$Stage1Person] == '', '#eee', '#aeffae')"
},
"children":
[
{
"elmType": "span",
"txtContent": "Stage 01 - CHILD"
}
]
},
{
"elmType": "div",
"txtContent": "Stage 02",
"style":
{
"float": "left",
"padding": "10px 30px 10px 40px",
"position": "relative",
"font-family": "Arial",
"background-color": "=if([$Stage2Person] == '', '#ffdcae', '#aeffae')"
},
"children":
[
{
"elmType": "span",
"txtContent": "Stage 02 - CHILD"
}
]
},
{
"elmType": "div",
"txtContent": "Stage 03",
"style":
{
"float": "left",
"padding": "10px 30px 10px 40px",
"position": "relative",
"font-family": "Arial",
"background-color": "=if([$Stage3Person] == '', '#ffaeae', '#aeffae')"
},
"children":
[
{
"elmType": "span",
"txtContent": "Stage 03 - CHILD"
}
]
}
]
}

How get only those object which has name equal to Delhi inside the object as element in Json?

Here i m given some data in Json formate. I want to fillter it with it atrribute .
[
{
"_id": "1",
"name": "ShalimarBhagh",
"city_id": "1",
"location_id": "1",
"country_name": "India"
},
{
"_id": "2",
"name": "Janpat, Delhi",
"city_id": "1",
"location_id": "2",
"country_name": "India"
},
{
"_id": "3",
"name": "MSP, Delhi",
"city_id": "1",
"location_id": "3",
"country_name": "India"
},
{
"_id": "4",
"name": "MSP, Pune",
"city_id": "2",
"location_id": "4",
"country_name": "India"
},
{
"_id": "5",
"name": "Anand Pur",
"city_id": "1",
"location_id": "5",
"country_name": "India"
},
]
From the Above Json file just want to display only those object which has arrtibute with that value ( name:"Delhi")
it Should be Displayed like that by using node.js and React
{
"_id": "2",
"name": "Janpat, Delhi",
"city_id": "1",
"location_id": "2",
"country_name": "India"
},
{
"_id": "3",
"name": "MSP, Delhi",
"city_id": "1",
"location_id": "3",
"country_name": "India"
},
Just use array's filter method:
const data = [
{
_id: "1",
name: "ShalimarBhagh",
city_id: "1",
location_id: "1",
country_name: "India",
},
{
_id: "2",
name: "Janpat, Delhi",
city_id: "1",
location_id: "2",
country_name: "India",
},
{
_id: "3",
name: "MSP, Delhi",
city_id: "1",
location_id: "3",
country_name: "India",
},
];
const filtered = data.filter((item) =>
item.name.toLowerCase().includes("delhi")
);
console.log(filtered);
Let's say your array is stored in a variable called elements.
What you can do is filter all of the elements with a condition that the name includes string "Delhi"
const elements = [
{
"_id": "1",
"name": "ShalimarBhagh",
"city_id": "1",
"location_id": "1",
"country_name": "India"
},
{
"_id": "2",
"name": "Janpat, Delhi",
"city_id": "1",
"location_id": "2",
"country_name": "India"
},
{
"_id": "3",
"name": "MSP, Delhi",
"city_id": "1",
"location_id": "3",
"country_name": "India"
},
{
"_id": "4",
"name": "MSP, Pune",
"city_id": "2",
"location_id": "4",
"country_name": "India"
},
{
"_id": "5",
"name": "Anand Pur",
"city_id": "1",
"location_id": "5",
"country_name": "India"
}];
const result = elements.filter(element => element.name.includes("Delhi"));
console.log(result);
Now result contains all elements whose name includes Delhi. Note that this does not modify the original array, instead it returns a new array.
You can use the .filter() function. If the array is named arr then:
var new_array = arr.filter(function callback(element, index, array) {
return (element.name.includes("Delhi"))
});
Where new_array is the filtered array.

Mongoose $aggregation and $lookup till nth child in the same collection for parent-child relation

I have a collection called customers with the details as similar to below.
[
{accountCode: "1", parentId: "1", accountName: "John Doe" },
{accountCode: "1.1", parentId: "1", accountName: "John Doe" },
{accountCode: "1.1.1", parentId: "1.1", accountName: "John Doe" },
{accountCode: "2", parentId: "2", accountName: "John Doe" },
{accountCode: "2.1", parentId: "2", accountName: "John Doe" },
{accountCode: "2.1.1", parentId: "2.1", accountName: "John Doe" },
{accountCode: "2.1.1.1", parentId: "2.1.1", accountName: "John Doe" },
{accountCode: "3", parentId: "3", accountName: "John Doe" },
{accountCode: "3.2", parentId: "3", accountName: "John Doe" },
{accountCode: "3.2.1", parentId: "3.2", accountName: "John Doe" },
{accountCode: "3.2.2", parentId: "3.2", accountName: "John Doe" },
{accountCode: "3.2.3", parentId: "3.2", accountName: "John Doe" },
{accountCode: "3.2.3.1", parentId: "3.2.3", accountName: "John Doe" }
]
all the accounts are inherited by its accountCode. I have upto 4 levels at this moment (every levels seperated by ., it may grow as per the requirement.
I was trying to aggregate the data as below
[
{
accountCode: 1, children:[{
accountCode: 1.1, children: [{
accountCode: 1.1.1, children: []
}]
}]
},
{
accountCode: 2, children:[{
accountCode: 2.1, children: [{
accountCode: 2.1.1, children: [{
accountCode: 2.1.1.1, children: []
}]
}]
}]
},
{
accountCode: 3, children:[{
accountCode: 3.2, children: [
{ accountCode: 3.2.1, children: [] },
{ accountCode: 3.2.2, children: [] },
{ accountCode: 3.2.3, children: [
{ accountCode: 3.2.3.1, children: [] }
] }
]
}]
}
]
I'm kind of new to aggregation using mongoose, and grouping of the data using the aggregation. Hopw do I create this kind of tree? I googled and tried many answeres from stackoverlow and some of them are: Answer 1, Answer 2, etc.. but couldnt understand since the requirement is kind of different compared to my requirement. In my case, all the data is in single collection. I tried using $graphLookup as well.
Kindly help me with creating an aggregation query.

Docusign API Date and name tabs don't show

I can successfully create and manage envelopes/documents via the DocuSign API. However, while the SignHere tab works perfectly, the other tabs (fullName, date) won't show. As the 'anchorIgnoreIfNotPresent' flag is set to false, I should get an error message if the anchors were not found, which I don't. The pdf-file looks quite right. The anchors are NOT placed in any form fields. Any ideas?
Thanks a lot, Mario
JSON:
{
"recipients": {
"signers": [{
"email": "info#xyz.com",
"name": "Hans Wurst",
"recipientId": "1",
"tabs": {
"signHereTabs": [{
"anchorString": "*#dssng#*",
"anchorXOffset": "0",
"anchorYOffset": "0",
"anchorIgnoreIfNotPresent": "false",
"anchorUnits": "pixels"
}],
"fullName": [{
"anchorString": "*#dsname#*",
"anchorXOffset": "0",
"anchorYOffset": "0",
"anchorIgnoreIfNotPresent": "false",
"anchorUnits": "pixels"
}],
"date": [{
"anchorString": "*#dsdate#*",
"anchorXOffset": "0",
"anchorYOffset": "0",
"anchorIgnoreIfNotPresent": "false",
"anchorUnits": "pixels"
}]
}
}]
},
"emailSubject": "Neues DocuSign-Dokument zum Unterzeichnen",
"documents": [{
"documentId": "1",
"name": "Contract.pdf",
"documentBase64": "JVBERi0xLjcNJeLjz9n..."
}],
"status": "sent"
}
The issue in your JSON is the the other tab groups should be named in plural like this:
"tabs": {
"signHereTabs": [{
"anchorString": "*#dssng#*",
"anchorXOffset": "0",
"anchorYOffset": "0",
"anchorIgnoreIfNotPresent": "false",
"anchorUnits": "pixels"
}],
"fullNameTabs": [{
"anchorString": "*#dsname#*",
"anchorXOffset": "0",
"anchorYOffset": "0",
"anchorIgnoreIfNotPresent": "false",
"anchorUnits": "pixels"
}],
"dateTabs": [{
"anchorString": "*#dsdate#*",
"anchorXOffset": "0",
"anchorYOffset": "0",
"anchorIgnoreIfNotPresent": "false",
"anchorUnits": "pixels"
}]

Mongoose mongodb - get all the data from the collections

I'm using MongoDB with Mongoose,
I want to create an list of countries, each country has a name and a list of cities, and each city has a name and a list of hostels.
the users can add new hostels and rate the existing hostels.
my JSON is supposed to look something like this:
{[
countryName: "Argentina",
cities: [{
cityName: "Buenos Aires",
hostels: [{
hostelName: "hostel A",
hostelLocation: "Florida Street 180",
hostelPhone: "+954454646"
},{
hostelName: "hostel B",
hostelLocation: "28 Mayo Street 180",
hostelPhone: "+959898944"
}]
},{
cityName: "Bariloche",
hostels: [{
hostelName: "hostel C",
hostelLocation: "...",
hostelPhone: "..."
},{
hostelName: "hostel D",
hostelLocation: "...",
hostelPhone: "..."
}]
}]
],
[
countryName: "Brazil",
cities: [{
cityName: "Rio De Janero",
hostels: [{
hostelName: "hostel A",
hostelLocation: "...",
hostelPhone: "..."
},{
hostelName: "hostel B",
hostelLocation: "...",
hostelPhone: "..."
}]
},{
cityName: "Salvador",
hostels: [{
hostelName: "hostel C",
hostelLocation: "...",
hostelPhone: "..."
},{
hostelName: "hostel D",
hostelLocation: "...",
hostelPhone: "..."
}]
}]
]
}
How do I implement this structure in Mongo?
Have you tried creating models?http://docs.mongodb.org/manual/core/data-modeling-introduction/
Consider using separated cities and having redundant country parameters for a single model method. Also consider using multiple models for not redundant storage.
city name: String,
country: String,
hostels: {hostel info / model reference}
If you want an example app try the one I used.
https://scotch.io/tutorials/using-mongoosejs-in-node-js-and-mongodb-applications

Resources