How to reorder fields in Keystone's Admin UI - node.js

Question

I'm trying to make Keystone into a CMS. So, I need models for Article, Category, ImagePage, AttachmentPage and so on. Every model I mentioned has a subset of common fields like: title, content, meta: {title, description, keywords} and so on.
In Keystone a model is constructed like this:
Article.add(fieldsCollectionObject)
so I defined the common fields in external file:
var T = require('keystone').Field.Types;
module.exports = {
title: { type: T.Text, required: true },
content: { type: T.Html, wysiwyg: true, height: 400 },
meta: {
title: { type: T.Text },
desc: { type: T.Textarea, height: 50 },
keywords: { type: T.Text },
},
publishedDate: { type: T.Date, index: true, dependsOn: { state: 'published' } },
state: { type: T.Select, options: 'draft, published, archived', default: 'draft', index: true },
};
and having require'd it in model's file I do:
const _ = require('lodash');
const pageDef = require('./common/Page.js');
const keystone = require('keystone');
const T = keystone.Field.Types;
<...>
Article.add(_.defaultsDeep({
brief: { type: T.Html, wysiwyg: true, height: 150 },
category: { type: T.Relationship, ref: 'Category', many: false, collapse: true },
tags: { type: T.Relationship, ref: 'Tag', many: true },
}, defs.authored, pageDef));
Now, the problem is with the order of fields in the Admin UI - unsurprisingly the brief, category and tags go before fields from pageDef. Is there any way to impose an order I want? Like title, brief, content, <the rest>?

Answer 1

defaults and defaultsDeep mutate the first object passed as a parameter to it (your initial object of Keystone fields). To have your own order, you would need to pass the objects to _.defaultsDeep in the order that you want them to appear in the object, and hence the order that they appear in the Admin UI.
Helpfully, duplicate items will not be included in the resulting object. So you would have something like this:
const _ = require('lodash');
const pageDef = require('./common/Page.js');
const keystone = require('keystone');
const T = keystone.Field.Types;
//....
let articleDef = {
brief: { type: T.Html, wysiwyg: true, height: 150 },
category: { type: T.Relationship, ref: 'Category', many: false, collapse: true },
tags: { type: T.Relationship, ref: 'Tag', many: true };
};
Article.add(_.defaultsDeep({
title: pageDef.title,
brief: articleDef.brief,
content: pageDef.content},
pageDef, articleDef));

Answer 2

The answer above turned out to be way to go. So I expanded and built upon it:
lib/util.js
const _ = require('lodash');
class Util {
static sourceFields (fields, ...sources) {
const source = _.defaultsDeep(...sources);
const result = [];
for (let fieldSet of fields) {
result.push(_.isArray(fieldSet) ? _.pick(source, fieldSet) : fieldSet);
}
return result;
}
}
module.exports = Util;
models/common/traits.js
var T = require('keystone').Field.Types;
module.exports = {
title: { type: T.Text, required: true },
content: { type: T.Html, wysiwyg: true, height: 400 },
indexImage: { type: T.CloudinaryImage },
meta: {
title: { type: T.Text },
desc: { type: T.Textarea, height: 50 },
keywords: { type: T.Text },
},
// <...>
}
models/Article.js
const util = require('../lib/utils.js');
const defs = require('./common/traits.js');
const keystone = require('keystone');
const T = keystone.Field.Types;
// < var Article declaration... >
const ownDef = {
brief: { type: T.Html, wysiwyg: true, height: 150 },
category: { type: T.Relationship, ref: 'Category', many: false, collapse: true },
tags: { type: T.Relationship, ref: 'Tag', many: true },
images: { type: T.Relationship, ref: 'Image', many: true, collapse: true },
attachments: { type: T.Relationship, ref: 'Attachment', many: true, collapse: true },
};
Article.add(...util.sourceFields([
'Content', ['title', 'brief', 'content', 'indexImage', 'category', 'tags'],
'Media', ['images', 'attachments'],
'SEO', ['meta'],
'Status', ['pageType', 'author', 'state', 'publishedDate'],
], ownDef, defs));
So, in traits.js I define common fields, in Article.js - fields I use only in Article model. Then, in Article model I add the fields to the List with the help of sourceFields() function. sourceFields() gets an array of fieldsets and unspecified number of field definition objects (like ownDef and defs).
The fieldset is either a string or an array of field names (keys in definition objects). If it's string it'll be a header in Admin UI, if it's array then it'll be a set of fields ordered just like field names in the array - the function basically inserts field definition into a "slot" specified in fieldset.