We Keep Coding

Dynamically add values to specific property in object - Fluent UI React ContextualMenu

I have the following ContextualMenu structure inside my SPFx Extension build with Fluent UI React:
const menuProps: IContextualMenuProps = {
items: [
{
key: 'Access',
itemType: ContextualMenuItemType.Section,
sectionProps: {
topDivider: true,
bottomDivider: true,
title: 'Sites you have access to',
items: [
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
],
},
},
],
};
I also a MS Graph call running getting me some SharePoint Sites & Teams.
I would now like to push those dynamic responses to the to the menuProps at the right place.
So basically add the dynamic array into the nested items object.
items: [
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
],
How can I target that "object"? (hope I understand correctly and items is an object...)
Is there a way to do this using array.push()?

To make this library agnostic, it would look something like this:
const obj = {
items: [
{
key: 'Access',
itemType: '',
sectionProps: {
topDivider: true,
bottomDivider: true,
title: 'Sites you have access to',
items: [
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
],
},
},
],
};
obj.items[0].sectionProps.items.push({ key: 'DynamicValue3.1', text: 'DynamicValue3.2' })
console.log(obj.items[0].sectionProps.items)
Your console.log would return this:
[
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
{ key: 'DynamicValue3.1', text: 'DynamicValue3.2' }
]
If you can access menuProps: IContextualMenuProps, then just replace obj with the necessary variable.

How to transform only 2 properties but keep remaining same as is in a nested object structure?

Apologies if title is not clear.
I am using json2csv npm package to prepare csv from json object and this package allows us to add a hook to transform object before actual csv line is prepared.
I only need to manipulate two properties out of all. How can I do this effectively? My code feels too bloated.
const {
Parser: Json2csvParser,
transforms: { unwind },
} = require('json2csv');
const json2csvFields = [
{ value: 'root.filename', label: 'File Name' },
{ value: 'issue.root.priority', label: 'Priority' },
{ value: 'issue.root.url', label: 'URL' },
{ value: 'issue.root.startline', label: 'Start Line' },
{ value: 'issue.root.stopline', label: 'Stop Line' },
{ value: 'issue.root.startcolumn', label: 'Start Column' },
{ value: 'issue.root.stopcolumn', label: 'Stop Column' },
{ value: 'issue.root.issuename', label: 'Issue Name' },
{ value: 'issue.root.issuecategory', label: 'Issue Category' },
{ value: 'issue._', label: 'Issue Description' },
];
const sampleData = [
{
root: {
filename:
'/home/users/john-doe/workspace/foo-project/src/main/classes/foo.cls',
},
issue: {
root: {
priority: 1,
url: 'www.example.com',
startline: 100,
stopline: 105,
startcolumn: 20,
stopcolumn: 25,
issuename: 'blah',
issuecategory: 'Category A',
},
_: ' Fox ',
},
},
];
const json2csvOptions = {
fields: json2csvFields,
quote: '',
header: true,
transforms: [
(item) => ({
'root.filename': item.root.filename.replace(
'/home/users/john-doe/workspace/foo-project/src/main/classes/',
''
),
'issue._': `"${item.issue._.trim()}"`,
// Except for the above two, everything else doens't need any transformation.
'issue.root.priority': item.issue.root.priority,
'issue.root.url': item.issue.root.url,
'issue.root.startline': item.issue.root.startline,
'issue.root.stopline': item.issue.root.stopline,
'issue.root.startcolumn': item.issue.root.startcolumn,
'issue.root.stopcolumn': item.issue.root.stopcolumn,
'issue.root.issuename': item.issue.root.issuename,
'issue.root.issuecategory': item.issue.root.issuecategory,
}),
],
};
const json2csvParser = new Json2csvParser(json2csvOptions);
const csv = json2csvParser.parse(sampleData);
console.log(csv);
This prints below output:
File Name,Priority,URL,Start Line,Stop Line,Start Column,Stop Column,Issue Name,Issue Category,Issue Description
foo.cls,1,www.example.com,100,105,20,25,blah,Category A,"Fox"
EDIT: Updated code to a working example.

After listing the two properties with special treatment, use Object.fromEntries and Object.entries to transform all the issue.root properties to their flat structure with .s in the property names. Then that object can be spread into the returned object.
const transformsFn = ({ root, issue }) => ({
'root.filename': root.filename.replace(
'/home/users/john-doe/workspace/foo-project/src/main/classes/',
''
),
'issue._': `"${issue._.trim()}"`,
...Object.fromEntries(
Object.entries(issue.root).map(
([key, val]) => [`issue.root.${key}`, val]
)
),
});
const json2csvOptions = {
fields: json2csvFields,
quote: '',
header: true,
transforms: [transformsFn],
};

JSON tv4 object valid if true and if other object is present

is possible to validate JSON, if value of object is true, then this object is valid, and if Obj2.included == true is valid, if Obj1.included == true ?
This is small piece of schema:
'attachments': {
'type': 'object',
'properties': {
'ZalA': {
'type': 'object',
'properties': {
'included': {
'type': 'boolean'
},
'version': {
'type': 'integer'
}
},
'required': [
'included',
'version'
]
},
'ZalB': {
'type': 'object',
'properties': {
'version': {
'type': 'integer'
},
'included': {
'type': 'boolean'
},
'required': [
'included',
'version'
]
}
}
}
}
I would like to check:
if ZalA.included == true, then valid.
if ZalA.included == true and ZalB.included == true, then valid.
if ZalA.included == false and ZalB.included == true, then invalid.
Is it possible to check these constraints with tv4 JSON validator ?

I've got a solution for you. But first of all you had a little mistake in your schema, because of required-property that was within properties:
'ZalB': {
'type': 'object',
'properties': {
'version': {
'type': 'integer'
},
'included': {
'type': 'boolean'
},
'required': [
'included',
'version'
]
}
}
When you use it you have to define it outside before or after properties. As you have done this with ZalA :) otherwise it does not work.
Now to your answer, I did a little experiment with this very interesting validator and came up with this:
// schema to be used for validating
var schema = {
'type': 'object',
'properties': {
'ZalA': {
'type': 'object',
'properties': {
'included': {
'type': 'boolean',
'enum': [
true
]
},
'version': {
'type': 'integer'
}
},
'required': [
'included',
'version'
]
},
'ZalB': {
'type': 'object',
'properties': {
'version': {
'type': 'integer'
},
'included': {
'type': 'boolean',
'enum': [
true
]
}
},
'required': [
'included',
'version'
]
},
'required': [
'ZalA'
],
}
};
// data to be checked against
var data = {
'ZalA': {
'version': 1,
'included': true
},
'ZalB': {
'version': 2,
'included': true
}
}
tv4.validateResult(data, schema); // Object { missing=[0], valid=true, error=null}
Schema has to be configured so that it matches your check-list:
if ZalA.included == true, then valid.
'required': [
'ZalA'
],
Requires ZalA at the end of schema after properties so that ZalA has to be present, so you can repeat this option as often as you want in each level. But this is not enougth to fulfill your check-list. Next configurations are:
'required': [
'included',
'version'
]
plus
'included': {
'type': 'boolean',
'enum': [true]
},
included-property (and actually version-property as well, it was already in your question) of ZalA must be present and true so that ZalA can be considered valid. You can define an array of different types to check whether the property has a certain value or you can use pattern-option.
These configurations are applied for ZalB too but with one difference:
'required': [
'ZalA'
],
Only ZalA is required and not ZalB at the end.
And we are done! With these configurations all your next conditions are fulfilled:
if ZalA.included == true and ZalB.included == true, then valid.
if ZalA.included == false and ZalB.included == true, then invalid.
And if ZalB.included is granted to be false as well as true then just do this:
'enum': [
true, false
]
Or omit enum-option completely so that it must be a boolean on the first place.
This is really a good validator. Thanks for your question, I'll use it for furture projects.
P.S. You may can spare yourself to define a second schema for ZalB and just referencing(using $ref) to the schema for ZalA, but I did not test this. On the other hand you could use this little schema:
var schema = {
'type': 'object',
'properties': {
'included': {
'type': 'boolean',
'enum': [
true
]
},
'version': {
'type': 'integer'
}
},
'required': [
'included',
'version'
]
};
And use it in this way:
// a bundle of objects to be checked
var data = [{
'version': 1,
'included': true
},{
'version': 2,
'included': true
}];
// iterate through each object
for(var i=0; i < data.length;i++){
var obj = data[i];
// validate each object
var result = tv4.validateResult(obj, schema);
if(!result.valid){
console.log("not valid: ",result.error);
}
}
I just speak for myself but for me this is the most important side of the validator-documentation. Because it contains all options you can define for certain properties to be valided:
http://json-schema.org/latest/json-schema-validation.html

The ckeditor toolbar missing

I made a custom ckeditor but I had all the basic things plus a few more. I've been trying to use ckeditor and tried both by both replacing textarea element by class name and by javascript code, but in both situations, all I get in my textarea is
My code for it is here:
{{ Form::textarea('LONG_DESCRIPTION', $article->LONG_DESCRIPTION, ['class' => 'edito', 'id'=>'editor1']) }}
<script src="/*****/vendor/ckeditor/ckeditor.js"></script>
<script>
CKEDITOR.replace('editor1',
{
toolbar: 'MyToolbar'
});
</script>
And this is the config file just in case:
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
{ name: 'document', items : [ 'NewPage','Preview' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'
,'Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'tools', items : [ 'Maximize','-','About' ] }
];
};
What am I doing wrong or have wrong for it not to work and just appear as that in the image?

ExtJS 4 TreeStore Static JSON - won't load

I'm simply trying to get a static JSON file to load into a TreeStore, and I'm tearing my hair out.
I have a model:
Ext.define('pronghorn_ui_keyboard.model.CommandKey', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id'
},
{
name: 'key'
},
{
name: 'command'
}
]
});
I have a TreeStore:
Ext.define('pronghorn_ui_keyboard.store.Commands', {
extend: 'Ext.data.TreeStore',
requires: [
'pronghorn_ui_keyboard.model.CommandKey'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'commands',
model: 'pronghorn_ui_keyboard.model.CommandKey',
proxy: {
type: 'ajax',
url: 'commands.json',
reader: {
type: 'json'
}
}
}, cfg)]);
}
});
And I have the following JSON at commands.json:
{
id: 'root',
key: null,
command: null,
children: [
{
id: 't'
key: 't'
command: null,
children: [
{
id: 'te'
key: 'e'
command: 'Trade Equity'
leaf: true
}
]
}
]
}
I'm trying to programmatically load this tree and inspect it in the console. In the Controller init function:
var me = this;
me.getCommandsStore().load({
callback: function() {
me.rootCommandKey = me.getCommandsStore().getRootNode();
me.currentCommandKey = me.rootCommandKey;
console.log(me.currentCommandKey);
console.log(me.currentCommandKey.id);
console.log(me.currentCommandKey.hasChildNodes());
me.initMainCommands();
},
scope: me
});
The console has something for currentCommandKey, but the ID isn't my root ID, and hasChildNodes() is false. So obviously the file isn't being loaded.
What am I doing wrong?

My JSON was invalid; basically missing commas.
Here's the correct JSON:
{
success: true,
children: [
{
string: 't',
key: 't',
command: null,
children: [
{
string: 'te',
key: 'e',
command: 'Trade Equity',
leaf: true
}
],
leaf: false
}
]
}
I need to do a better job of error handling with async calls too. I moved a bunch of stuff into methods on the Store itself and bound that init state on the load event using a local binding, which exposed a bunch of load-terminating-condition flags.