Keystone-classic: Display Virtuals As NoEdit Fields In Keystone Admin UI

Created on 19 Jul 2015 · 12Comments · Source: keystonejs/keystone-classic

Source

philipheinser

Most helpful comment

I believe you can do what you need with the existing functionality by using the post init hook. For example:

Assume the Post list model has the following, of which contentFull will be filled from the content.full virtual:

...
content: {
    brief: { type: Types.Html, wysiwyg: true, height: 150 },
    extended: { type: Types.Html, wysiwyg: true, height: 400 }
},
contentFull: {type: Types.Html, wysiwyg: true, height: 400, noedit: true}
...
Post.schema.virtual('content.full').get(function() {
    return this.content.extended || this.content.brief;
});

Then you can fill up contentFull as follows:

Post.schema.post('init', function() {
    this.contentFull = this.content.full;
});

webteckie on 11 Sep 2015

👍4

All 12 comments

Could you add a description.

morenoh149 on 20 Jul 2015

@morenoh149 are virtuals supposed to display in the admin ? They are not right? I was just looking here https://github.com/JedWatson/sydjs-site/blob/master/models/User.js and when i run this example, I don't see an admin field for url.

Just was hoping you could confirm my understanding.

matthewchung74 on 10 Sep 2015

@foobar8675 virtuals are not viewable from the adminUI afaict. Because a virtual is more like a function or computed value and are not actually persisted to the mongodb database. See http://mongoosejs.com/docs/guide.html#virtuals

Displaying a virtual property may be possible but would require execution of the virtual property getter for every document you want to display in the adminUI. It would also require virtuals: true option to be passed to toObject or toJson, otherwise you can't get a listing of virtual properties. This could be a new feature.

morenoh149 on 11 Sep 2015

@morenoh149 I would love to see some my virtual in the admin ui as non editing fields. We could have a setting virtuals: true if someone would like to enable this.

philipheinser on 11 Sep 2015

I believe you can do what you need with the existing functionality by using the post init hook. For example:

Assume the Post list model has the following, of which contentFull will be filled from the content.full virtual:

...
content: {
    brief: { type: Types.Html, wysiwyg: true, height: 150 },
    extended: { type: Types.Html, wysiwyg: true, height: 400 }
},
contentFull: {type: Types.Html, wysiwyg: true, height: 400, noedit: true}
...
Post.schema.virtual('content.full').get(function() {
    return this.content.extended || this.content.brief;
});

Then you can fill up contentFull as follows:

Post.schema.post('init', function() {
    this.contentFull = this.content.full;
});

webteckie on 11 Sep 2015

👍4

@JedWatson fyi, in the example I gave above the HTML tags are displayed when rendering the contentFull property in the Admin UI, if using the noedit:true attribute. I believe that was resolved a long time ago and it's broken again! By the way, I tested this with 0.4...not sure what the behavior is in 0.3

webteckie on 11 Sep 2015

thanks for the explanation @morenoh149 @webteckie that is a clever workaround and works for me! thank you.

matthewchung74 on 11 Sep 2015

@foobar8675 although it works, you may be disappointed to know that that it is not a reliable solution (:- Mongoose post methods run asynchronously! That means if the Admin UI thread renders before the post init method has finished then you will not get your virtual value rendered!!! It would take some extra logic in keystone to watch server-side async field changes and have the Admin UI dynamically react to those. Not sure if that's a feature in the road map, though. I know, a bummer :-)

webteckie on 11 Sep 2015

yeah that is a bummer. :(

matthewchung74 on 11 Sep 2015

If I'm not mistaken it should work if you use pre('save') instead.