I'm creating a MegaMenu dynamically, starting from a map:
this.menuItems = new Array<MegaMenuItem>();
this.map.forEach((value: Map<string, any[]>, key: string) => {
const catArray: Array<Array<any>> = new Array<Array<any>>();
value.forEach((inValue: any[], inKey: string) => {
const catMenu = {
label: inKey,
items: inValue
};
catArray.push([catMenu]);
});
const moduleMenuItem: any = new Object();
moduleMenuItem.label = key;
moduleMenuItem.items = catArray;
this.menuItems.push(moduleMenuItem);
});
In HTML:
<p-megaMenu [model]="menuItems"></p-megaMenu>
The MegaMenu is correctly configured. If I test it with the example of the PrimeNg site it works fine. It seems like the object menuItems is not properly created but I can't understand where I'm wrong.
Related
I have a spreadsheet where a user can list classes and Google Classroom enrollment codes, represented by the array userClassCodes. This array is allowed to contain blank values when the range contains blank cells. This array is represented in the following way:
[ ['class name 01', 'class code 01'], ['class name 02', 'class code 02'], ...]
I am using the Google Classroom API to get a list of the sheet user's enrollment codes and course IDs. I would like to iterate through the userClassCodes array and add the class ID to the array when there is a matching class code in the API response. If there is no match, I would like to preserve the entry in the array and add a blank value for the course ID.
I am having trouble properly constructing an array that will achieve the desired output. Here is my current code:
function googleClassroomImport() {
var userClassCodes = SpreadsheetApp.getActive().getRange("Sheet1!A1:B25").getValues();
var newArray = [];
var options = {
teacherId: 'me',
courseStates: 'ACTIVE',
pageSize: 50
};
var response = Classroom.Courses.list(options);
response.courses.forEach(function (course) {
for (let i = 0; i < userClassCodes.length; i++) {
if (userClassCodes[i][1] == course.enrollmentCode) {
newArray.push([userClassCodes[i][0], userClassCodes[i][1], course.id]);
}
else {
newArray.push([userClassCodes[i][0], userClassCodes[i][1], ""]);
}
}
});
console.log(newArray);
}
Try this:
function googleClassroomImport() {
const ss = SpreadsheetApp.getActive();
const sh = ss.getSheetByName("Sheet0");
const rg = sh.getRange("A1:B25");
const vs = rg.getValues().filter(r => r[0] && r[1]).filter(e => e);
const arr = vs.map(r => r[1]);
var options = { teacherId: 'me', courseStates: 'ACTIVE', pageSize: 50 };
var response = Classroom.Courses.list(options);
response.courses.forEach(course => {
let idx = arr.indexOf(course.enrollmentCode);
if (~idx) {
vs[idx].push(course.id);
} else {
vs[idx].push('');
}
});
console.log(newArray);
}
I have this code in content.js, wherein I want to pass the listData to popup.js using chrome.runtime. how can I possibly do that?
var dataImage: any = document.getElementsByClassName("image");
var dataName: any = document.getElementsByClassName("name");
var dataJobTitle: any = document.getElementsByClassName("title");
var listData: Array<any> = [];
for (let x in [dataImage, dataName]) {
const image = dataImage[x]?.firstElementChild?.src;
const name = dataName[x]?.innerText;
const job = dataJobTitle[x]?.firstElementChild?.innerText;
listData.push({ image: image, name: name, job: job });
}
console.log(listData);
These listData will be map as html <li> in popup
**in contentScript.js:**
chrome.runtime.sendMessage({
total_elements: totalElements // or whatever you want to send
});
**in eventPage.js (your background page):**
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse){
localStorage["total_elements"] = request.total_elements;
});
reference : Chrome Extension how to send data from content script to popup.html
How to prevent the suggestedResult from collapsing after clicking result using SearchWidget?
CodePen, copied below
// An open data address search API for France
const url = "https://api-adresse.data.gouv.fr/";
const map = new Map({
basemap: "streets-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [2.21, 46.22], // lon, lat
scale: 3000000
});
const customSearchSource = new SearchSource({
placeholder: "example: 8 Boulevard du Port",
// Provide a getSuggestions method
// to provide suggestions to the Search widget
getSuggestions: (params) => {
// You can request data from a
// third-party source to find some
// suggestions with provided suggestTerm
// the user types in the Search widget
return esriRequest(url + "search/", {
query: {
q: params.suggestTerm.replace(/ /g, "+"),
limit: 6,
lat: view.center.latitude,
lon: view.center.longitude
},
responseType: "json"
}).then((results) => {
// Return Suggestion results to display
// in the Search widget
return results.data.features.map((feature) => {
return {
key: "name",
text: feature.properties.label,
sourceIndex: params.sourceIndex
};
});
});
},
// Provide a getResults method to find
// results from the suggestions
getResults: (params) => {
// If the Search widget passes the current location,
// you can use this in your own custom source
const operation = params.location ? "reverse/" : "search/";
let query = {};
// You can perform a different query if a location
// is provided
if (params.location) {
query.lat = params.location.latitude;
query.lon = params.location.longitude;
} else {
query.q = params.suggestResult.text.replace(/ /g, "+");
query.limit = 6;
}
return esriRequest(url + operation, {
query: query,
responseType: "json"
}).then((results) => {
// Parse the results of your custom search
const searchResults = results.data.features.map((feature) => {
// Create a Graphic the Search widget can display
const graphic = new Graphic({
geometry: new Point({
x: feature.geometry.coordinates[0],
y: feature.geometry.coordinates[1]
}),
attributes: feature.properties
});
// Optionally, you can provide an extent for
// a point result, so the view can zoom to it
const buffer = geometryEngine.geodesicBuffer(
graphic.geometry,
100,
"meters"
);
// Return a Search Result
const searchResult = {
extent: buffer.extent,
feature: graphic,
name: feature.properties.label
};
return searchResult;
});
// Return an array of Search Results
return searchResults;
});
}
});
// Create Search widget using custom SearchSource
const searchWidget = new Search({
view: view,
sources: [customSearchSource],
includeDefaultSources: false
});
// Add the search widget to the top left corner of the view
view.ui.add(searchWidget, {
position: "top-right"
});
3d version of code sample above
There is no documented way to do this through the API, as far as I can tell. But by adding the esri-search--show-suggestions to the SearchWidget, the suggestions will reappear:
const searchWidget = new Search({
view: view,
sources: [customSearchSource],
includeDefaultSources: false,
//autoSelect: false,
goToOverride: function(view, { target, options }) {
view.goTo(target, options);
const widget = document.querySelector('.esri-search__container')
widget.className += ' esri-search--show-suggestions'
},
});
Working CodePen here
I need the count of Status column in Sharepoint list. I have used React as the mode in spfx.
#autobind
private async _loadAsyncData(): Promise<Chart.ChartData> {
const items: any[] = await sp.web.lists.getByTitle("Sales").items.select("Title", "Salesamt", "Status").get();
let lblarr: string[] = [];
let dataarr: number[] = [];
items.forEach(element => {
lblarr.push(element.Title);
dataarr.push(element.Salesamt);
});
let chartdata: Chart.ChartData = {
labels: lblarr,
datasets: [{
label: 'My data',
data: dataarr
}]
};
return chartdata;
}
Can someone help me to get the count of items in the status column in the above code
Hi Nilanjan Mukherjee,
If your list is not very large, you can consider enumerating the whole list.
Another way is to use RenderListData() + CAML/Aggregations
Create a test list
Use below PnP code to get the count (note that the count is 2 while the row number is 3)
const caml: ICamlQuery = {
ViewXml: `<View><ViewFields><FieldRef Name="Title"/><FieldRef Name="johnjohn"/></ViewFields><Aggregations Value="On"><FieldRef Name="johnjohn" Type="Count"/></Aggregations></View>`
};
const r = await sp.web.lists.getByTitle('mm').renderListData(caml.ViewXml);
console.log(r);
Result:
Check below blog to get more details:
https://codeatwork.wordpress.com/2017/10/13/aggregation-using-caml-query/
BR
I am using agGrid where the columns are dynamically created. My objective is to get the old value and new value after checking the checkboxes. I try to use "onCellValueChanged" but it didnt work. If I use "onCellClicked" then I am not getting Old Value and New Value.
For your understanding I want to mean by Old Value and New Value that if user checked then Old Value is false and New Value is true.
HTML
<ag-grid-angular class="ag-theme-balham" [gridOptions]="siteJobDeptGridOptions"
[rowData]="siteJobDeptRowData" [columnDefs]="siteJobDeptColDef" [paginationPageSize]=10 [domLayout]="domLayout"
(gridReady)="onGridReady($event)">
</ag-grid-angular>
TS File
export class SiteJobDeptConfigComponent implements OnInit {
ngOnInit() {
this.domLayout = "autoHeight";
this.getAllSiteJobConfig();
this.generateColumns();
}
onGridReady(params: any) {
params.api.sizeColumnsToFit();
params.api.resetRowHeights();
}
generateColumns()
{
let deptColDef = [];
let colSiteJob = {
field: 'SiteJobName', headerName: 'Site Job Name',resizable: true,
sortable: true, filter: true, editable: false,
}
this.siteJobDeptCommonService.getEntityData('getpublisheddepts')
.subscribe((rowData) => {
deptColDef.push(colSiteJob);
for(let dept of rowData)
{
deptColDef.push({
field: dept.DeptName, headerName: dept.DeptName, width:100,resizable: true,
cellClass: 'no-border',
cellRenderer : params => {
var input = document.createElement('input');
input.type="checkbox";
input.checked=params.data[dept.DeptName];
return input;
},
onCellValueChanged: this.siteDeptCellValueChanged.bind(this),
})
}
this.siteJobDeptColDef = deptColDef;
},
(error) => { alert(error) });
}
siteDeptCellValueChanged(dataCol: any) {
let checkedOldValue = "Old Check Value - " + dataCol.oldValue;
let checkedNewValue = "New Check Value - " + dataCol.newValue;
}
getAllSiteJobConfig()
{
let siteJobRowData = [];
this.siteJobDeptCommonService.getEntityData('getallsitedeptjob')
.subscribe((rowData) => {
for(let siteJobDetail of rowData)
{
for(let deptAllow of siteJobDetail.DeptAllow)
{
tempArray[deptAllow["DeptName"]] = deptAllow["IsAllow"];
}
siteJobRowData.push(tempArray);
}
this.siteJobDeptRowData = siteJobRowData;
},
(error) => { alert(error) });
}
}
The grid looks like below:-
Can you please help me how to get Old Data and New Data value from checkbox that is dynamically generated?
It should be "cellValueChanged" not "onCellValueChanged" in the column definition creation.
You can find here.
When you declare your method in the params object, there are oldValue and newValue properties that give the result that you are looking for:
onCellValueChanged: function(params) {
console.log(params.oldValue);
console.log(params.newValue)
}