I want to preview a reference name in the studio
I have and icon type, for example one which has the title 'facebook'
export default {
name: 'icon',
title: 'Icon',
type: 'document',
fields: [
{
name: 'name',
title: 'Name',
type: 'string'
},
]
}
I reference this in a menu elsewhere like this
{
name: 'icon',
title: 'Icon',
type: 'reference',
to: [{ type: 'icon' }]
},
and then try to preview like this
preview: {
select: {
title: 'icon',
},
prepare(selection) {
const { title } = selection;
return {
title: title.name,
}
}
}
but my selection returns the reference object, with _ref etc. not the object itself. Is there a way to preview this reference?
You can dot your way into the property on the reference that you'd like to use in the preview like this:
preview: {
select: {
title: 'icon.name',
},
prepare(selection) {
const { title } = selection;
return {
title: title.name,
}
}
}
Side note: Since the prepare function now just passes through its input, you can remove it altogether. This would be sufficient:
preview: {
select: {
title: 'icon.name'
}
}
Related
in a normal way with out translation but i want to translate the two object array and bind into a component
<InfoNews
v-for="infonew in infonews"
:id="infonew.id"
:title="infonew.title"
:content="infonew.content"
/>
data() {
return {
infonews: [
{
id: "01",
title: "what we do",
content:"industke aecimen book. ",
},
{
id: "02",
title: "our mission",
content:"ggdddg",
},
],
};
Make infonews a computed property. The title and content of each should be the translation keys.
export default {
computed: {
infonews() {
return [
{
id: "01",
title: this.$t("what we do"),
content: this.$t("industke aecimen book"),
},
{
id: "02",
title: this.$t("our mission"),
content: this.$t("ggdddg"),
},
]
};
}
}
I'm trying to change the links based on the variable user_role which is stored in Vuex(store). I'm not able to find an appropriate way to track the change and based on its value I want to perform some method. Any suggestions on how to do it?
------------------------------store.js-------------------------------
export default new Vuex.Store({
state: {
user_role: "User"
},
mutations: {},
actions: {},
modules: {}
});
-----------------------------------component.vue---------------------------
export default {
name: "Navbar",
data() {
return {
links: [
{ text: "Projects", route: "/projects" },
{ text: "Requests", route: "/requests" },
{ text: "", route: "" },
{ text: "Resources", route: "/resources" }
],
pers_actions: ["Profile", "LogOut"],
};
},
watch: {
user_role: {
if (user_role === "PM") {
this.links[2] = {
text: "Allocations",
route: "/allocations"
};
} else if (user_role === "PMO") {
this.links[2] = {
text: "Reports",
route: "/reports"
};
} else if (user_role === "User") {
this.links = [
{
text: "Allocations",
route: "/allocations"
}
];
}
}
},
Rather than explicitly mutating your local data in response to some state change, it is better to compute your links within a computed property because it will automatically update whenever some dependent data has changed. It'll "just work".
computed: {
links() {
switch (this.$store.state.user_role) {
case: "PM": return [
{ text: "Projects", route: "/projects" },
{ text: "Requests", route: "/requests" },
{ text: "Allocations", route: "/allocations" },
{ text: "Resources", route: "/resources" },
];
case: "PMO": return [
{ text: "Projects", route: "/projects" },
{ text: "Requests", route: "/requests" },
{ text: "Reports", route: "/reports" },
{ text: "Resources", route: "/resources" },
];
// For any other role
default: return [
{ text: "Allocations", route: "/allocations" },
];
}
}
}
I am trying to customize the prview section for a document insanity.io. To that extent, I have created the following document:
export default {
name: 'news',
type: 'document',
title: 'News',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
...
{
name: 'author',
title: 'Author',
type: 'string',
},
...
],
preview: {
select: {
title: 'title',
subtitle: 'author',
}
}
}
This works exactly as I want in Studio. The title section in the preview pane shows the title of the document and the subtitle section shows the name of the author.
However, if I try to modify the output of author by using prepare, then it no longer works. For instance, take a look at the following variation of the same document:
export default {
name: 'news',
type: 'document',
title: 'News',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
...
{
name: 'author',
title: 'Author',
type: 'string',
},
...
],
preview: {
select: {
title: 'title',
author: 'author',
}
},
prepare(selection) {
const { author } = selection
return {
...selection,
subtitle: author && `${author} is the author`
}
}
}
The title preview field is rendered, but nothing shows up in the subtitle section. However, as far as I understand -- this should work. And I wondering why not.
Any ideas?
prepare is actually a function called in preview. You have it as a seperate field of the root object. Move prepare inside preview like so:
preview: {
select: {
title: 'title',
author: 'author'
},
prepare(selection) {
const { author } = selection
return {
...selection,
subtitle: author && `${author} is the author`
}
}
}
I have an object of type block to get a WYSIWYG editor. It looks like this:
{
title: "Block",
type: "block",
styles: [
{ title: "Normal", value: "normal" },
{ title: "H1", value: "h1" },
{ title: "H2", value: "h2" },
{ title: "H3", value: "h3" },
{ title: "H4", value: "h4" },
{ title: "Quote", value: "blockquote" }
],
lists: [{ title: "Bullet", value: "bullet" }],
marks: {
decorators: [
{ title: "Strong", value: "strong" },
{ title: "Emphasis", value: "em" }
],
annotations: [
{
title: "URL",
name: "link",
type: "object",
fields: [
{
title: "URL",
name: "href",
type: "url"
}
]
}
]
}
}
But I see no option to be able to choose the color of the text. Is there a way to enable this? Maybe a plugin?
There is indeed a plugin for this. In your terminal, cd to you Sanity Content Studio folder, then run:
sanity install #sanity/color-input
This will append #sanity/color-input to the plugins array in your sanity.json file and locally install the #sanity/color-input npm package.
Then, go ahead and add the color type to the annotations array in the block content where you want to enable text color. E.g.:
export default {
name: 'blockContent',
type: 'array',
title: 'Block Content with Color',
of: [
{
type: 'block',
marks: {
annotations: [
{name: 'color', title: 'Color', type: 'color'}
]
}
}
]
}
Also, keep in mind that you'll now get text annotated with color specifics. How (and if) your front-end(s) choose to render the structured text is up to you.
I'm a new sencha learner , what i want to do is adding an image to the nested list text.
I tried to modify kithcensink exapmle code,This is my nestedlist
Ext.require('Ext.data.TreeStore', function() {
Ext.define('Kitchensink.view.NestedList', {
requires: ['Kitchensink.view.EditorPanel', 'Kitchensink.model.Kategori'],
extend: 'Ext.Container',
config: {
layout: 'fit',
items: [{
xtype: 'nestedlist',
store: {
type: 'tree',
id: 'NestedListStore',
model: 'Kitchensink.model.Kategori',
root: {},
proxy: {
type: 'ajax',
url: 'altkategoriler.json'
}
},
displayField: 'text',
listeners: {
leafitemtap: function(me, list, index, item) {
var editorPanel = Ext.getCmp('editorPanel') || new Kitchensink.view.EditorPanel();
editorPanel.setRecord(list.getStore().getAt(index));
if (!editorPanel.getParent()) {
Ext.Viewport.add(editorPanel);
}
editorPanel.show();
}
}
}]
}
});
});
I modified the store file
var root = {
id: 'root',
text: 'Lezzet Dünyası',
items: [
{
text: 'Ana Menü',
id: 'ui',
cls: 'launchscreen',
items: [
{
text: 'Et Yemekleri',
leaf: true,
view:'NestedList3',
id: 'nestedlist3'
},
{
text: 'Makarnalar',
leaf: true,
view: 'NestedList2',
id: 'nestedlist2'
},
{
text: 'Tatlılar',
leaf: true,
view: 'NestedList4',
id: 'nestedlist4'
},
{
text: 'Çorbalar',
view: 'NestedList',
leaf: true,
id: 'nestedlist'
}
]
}
]
};
How should I edit the code to add image near the nested list text ?
For example , in this site you can see a nested list example , I need an images near Blues,Jazz,Pop,Rock.
Generally, you can do more than what you need by customizing your getItemTextTpl (place it into your Ext.NestedList definition, for example:
getItemTextTpl: function(node) {
return '<span><img src="image_url" alt="alternative_text">{text}</span>';
}
Define whatever template you like through that returning string.