Is it possible to enable/disable element in Dropdown based on item properties?
var json = {
questions: [
{
type: "dropdown",
name: "car",
title: "What car are you driving?",
isRequired: true,
colCount: 0,
choices: [
{ title: "One", value: "91", isDeleted: true },
{ title: "Two", value: "91", isDeleted: false },
{ title: "Three", value: "91", isDeleted: false }
],
/** What is the expression should I use here? */
choicesVisibleIf: "{item}.isDeleted == false"
}
]};
Here is a playground: https://plnkr.co/edit/LIp8pZbyXVB3UfBD
Thanks.
in my opinion tt would be easier to get choicesByUrl from a restFul Api & add an isDeleted Filter there /getChoices?isDeleted=true .....because anyway the title & value is going to by dynamic
var json = {
questions: [
{
type: "dropdown",
name: "car",
title: "What car are you driving?",
isRequired: true,
colCount: 0,
choicesByUrl: {
url: "https://getChoices/rest/v2?isDeleted=false",
valueName: "title"
}
}
]
};
Related
I'm trying to set the default value given a list of radio items in Sanity Studio.
Code:
export default {
name: 'banner',
title: 'Banner',
type: 'document',
fields: [
{
name: "category",
title: "Category",
description: "Choose a category",
type: "string",
options: {
layout: "radio",
list: [
{ title: "Documentary", value: "documentary" },
{ title: "Fiction", value: "fiction" },
],
},
// set initial value here ?
},
]
}
There is a property called initialValue that can set the default value of a string easily, but I can't figure out how to do this with radio items.
How can I have the radio item Fiction already selected when the page is loaded?
name: 'banner',
title: 'Banner',
type: 'document',
fields: [
{
name: "category",
title: "Category",
description: "Choose a category",
type: "string",
options: {
layout: "radio",
list: [
{ title: "Documentary", value: "documentary" },
{ title: "Fiction", value: "fiction" },
],
},
initialValue: "documentary", // set initialValue's value to one of the `value`s in your list of radio items
},
]
}```
When trying to filter array using Lodash, i am getting all the element of that array. Need to get the specific array only. Please find my coding so far
var sizeList = [{
id: 1,
title: "Test1",
type: [{
name: "1.1",
present: false
}, {
name: "1.2",
present: true
}, {
name: "1.3",
present: false
}]
}, {
id: 2,
title: "Test2",
type: [{
name: "2.1",
present: false
}, {
name: "2.2",
present: true
}, {
name: "2.3",
present: false
}]
}, {
id: 3,
title: "Test3",
type: [{
name: "3.1",
present: false
}, {
name: "3.2",
present: true
}, {
name: "3.3",
present: true
}]
}],
result = _.filter(sizeList, {
type: [{
name: '3.3'
}]
});
console.log(result);
My problem is, when i filter with name:3.3 i am getting all the element in Test3 array including 3.1, 3.2 and 3.3. I need to only 3.3. Can anyone please help.
You can map the items after filtering by type, and filter the type array as well:
var sizeList = [{"id":1,"title":"Test1","type":[{"name":"1.1","present":false},{"name":"1.2","present":true},{"name":"1.3","present":false}]},{"id":2,"title":"Test2","type":[{"name":"2.1","present":false},{"name":"2.2","present":true},{"name":"2.3","present":false}]},{"id":3,"title":"Test3","type":[{"name":"3.1","present":false},{"name":"3.2","present":true},{"name":"3.3","present":true}]}];
var result = _(sizeList)
.filter({
type: [{ name: '3.3' }]
})
.map(({ type, ...o }) => ({
...o,
type: _.filter(type, { name: '3.3' })
}))
.value();
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
I am writing an app where a fixed length list gets generated based on the nested JSONArray. Whenever any elements gets clicked from the list and if it has a "sub data" array,the list gets populated with this "sub data". Basically, you can think of it as menus which has submenus and those submenus has subsubmenus and so on.
I have implemented two methods for going to sublevels [next()] which works fine but I don't know how to implement prev() method to go one level up in the menu. Currently, I can make it go one level up but if user is inside more than two level then I don't know how to keep the track of all above levels.
Here is the codepen -
codepen
let JSONModel = (_id, _lvl, _title, _data) => {
return {
id: _id,
lvl: _lvl,
title: _title,
data: _data
};
};
let Menu = [
{
id: "01",
lvl: "01",
title: "menu 1",
data: []
},
{
id: "02",
lvl: "01",
title: "menu 2",
data: []
},
{
id: "03",
lvl: "01",
title: "menu 3",
data: []
},
{
id: "04",
lvl: "01",
title: "menu 4",
data: [
{
id: "01",
lvl: "02",
title: "submenu 1",
data: []
},
{
id: "02",
lvl: "02",
title: "submenu 2",
data: [
{
id: "01",
lvl: "03",
title: "sub submenu 1",
data: []
},
{
id: "02",
lvl: "03",
title: "sub submenu 2",
data: []
},
{
id: "03",
lvl: "03",
title: "sub submenu 3",
data: []
},
{
id: "04",
lvl: "03",
title: "sub submenu 4",
data: []
}
]
},
{
id: "03",
lvl: "02",
title: "submenu 3",
data: []
},
{
id: "04",
lvl: "02",
title: "submenu 4",
data: []
}
]
}
];
let demo = new Vue({
el: "#app",
data: {
input: Menu,
prevMenu:[]
},
computed: {},
created: function () {
},
methods: {
next: function(val1,val2) {
if (val1.length != 0) {
this.input = val1;
this.prevMenu = val2;
console.log(this.prevMenu);
}
},
prev: function() {
console.log(this.prevMenu);
this.input = this.prevMenu;
}
}
});
$("#prevmenu").on("click", function() {
demo.prev();
});
Using your code, you can simply do this:
https://codepen.io/webkit_il/pen/bjebZR?editors=0011
next: function(val1,val2) {
if (val1.length != 0) {
this.input = val1;
this.prevMenu.push(val2);
}
},
prev: function() {
let _menu = this.prevMenu.slice(); // this is just to clone the array
this.input = _menu[_menu.length - 1];
this.prevMenu.pop();
}
changed your prevMenu into an array, then everytime you
go back just use the last one, and remove it from the array...
good luck!
I have smartclient ListGrid with some columns. ListGrid has some text fields with edit mode (double click to enter) and boolean fields.
All I need to do is disable editMode for boolean fields (disable double click) and still enable normal 'one-click' to change boolean value.
Double click should work for other columns.
Any ideas?
My code:
isc.ListGrid.create({
ID: "ColumnsList",
saveLocally: true,
filterLocalData: true,
alternateRecordStyles: true,
canReorderRecords: true,
selectionAppearance: 'rowStyle',
autoFetchData: false,
showRollOver: true,
canRemoveRecords: true,
deferRemoval: false,
initWidget: function () {
this.Super('initWidget', arguments);
var me = this;
var fields = [
{name: 'id', primaryKey: true, required: true, showIf: 'false', canEdit: false, canHide: false},
{
name: 'name',
validOperators: [],
canEdit: true,
canHover: false,
canSort: false,
title: 'DB Column Name'
},
{
name: 'primaryKey',
validOperators: [],
width: '12%',
canEdit: true,
canHover: true,
canSort: false,
//canToggle: true,
title: 'Primary Key',
type: 'boolean',
changed: function (form, item, value) {
// my logic to allow only one value per column is selected
}
}
];
me.setFields(fields);
}
}
You may add recordDoubleClick:"return false" on the boolean field, to prevent the grid-level handler from firing.
isc.ListGrid.create({
ID: "countryList",
width:550, height:224, alternateRecordStyles:true,
// use server-side dataSource so edits are retained across page transitions
dataSource: countryDS,
// display a subset of fields from the datasource
fields:[
{name:"countryCode", title:"Flag", width:40, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png", canEdit:false},
{name:"countryName"},
{name:"continent"},
{name:"member_g8", recordDoubleClick:"return false"},
{name:"population"},
{name:"independence"}
],
autoFetchData: true,
canEdit: true
})
Alternatively if you want to disable double click on all boolean fields you could use the following:
isc.ListGrid.create({
rowDoubleClick: function (record, recordNum, fieldNum) {
if (this.getField(fieldNum).type != "boolean") {
this.Super("rowDoubleClick", arguments);
}
},
fields: [
{ name: "isActive", type: "boolean", canEdit: false },
{ name: "firstName", type: "text", canEdit: true },
{ name: "lastName", type: "text", canEdit: true },
],
data: [
{ isActive: false, firstName: "Alex", lastName: "Smith" },
{ isActive: true, firstName: "Jane", lastName: "Monroe" },
]
});
I'm not 100% I understood the question, but if you're looking for a way to allow/disallow the changing of boolean fields take a look at ListGridField.canToggle
I have an empty grid, with the columns defined as below:
var json = { };
json.col1 = { label: 'Select', selector: 'checkbox' };
json.bndryName = "Boundary Name";
return json;
The boundary grid is initialized as below and the data/collection is loaded on a button click,and when I set allowSelectAll:true, I donot see the the header column rendered with a checkbox to select All. Please advise.
this._bndryGrid = new (declare([OnDemandGrid, Selection,Selector,ColumnResizer]))({
selectionMode: "multiple",
columns: columns,
class:'grid',
loadingMessage: "Loading data...",
noDataMessage: "No results found."
}, this.ap);
I'm not sure you've provided enough to go on here (and your grid doesn't even include allowSelectAll: true), but here is an example that works:
require({
packages: [
{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v1.0.0'
},
{
name: 'dstore',
location: '//cdn.rawgit.com/SitePen/dstore/v1.1.1'
}
]
}, [
'dojo/_base/declare',
'dgrid/OnDemandGrid',
'dgrid/Selection',
'dgrid/Selector',
'dstore/Memory',
'dojo/domReady!'
], function(declare, OnDemandGrid, Selection, Selector, Memory) {
var data = [
{ id: 1, name: 'Peter' },
{ id: 2, name: 'Paul' },
{ id: 3, name: 'Mary' }
];
var store = new Memory({ data: data });
var options = {
allowSelectAll: true,
collection: store,
columns: [
{ field: 'id', label: '', selector: 'checkbox' },
{ field: 'name', label: 'Name' }
]
};
new (declare([ OnDemandGrid, Selection, Selector ]))(options, 'gridcontainer');
});