In typeahead js while using multiple data-sets (as seen here typeahed multiple datasets) each category is sent as a separate parameter while initialising the typeahead. Is it possible to have dynamic categories from a single data source instead of multiple data sources.
$('#multiple-datasets .typeahead').typeahead({
highlight: true
},
{
name: 'nba-teams',
display: 'team',
source: nbaTeams,
templates: {
header: '<h3 class="league-name">NBA Teams</h3>'
}
},
{
name: 'nhl-teams',
display: 'team',
source: nhlTeams,
templates: {
header: '<h3 class="league-name">NHL Teams</h3>'
}
});
Here nba-teams and nhl-teams are sent as separate parameters to typeahead().IS there a way to send N datasets or specify the category the data belongs to like
data = [
{ value: 'Chicago Blackhawks', data: { category: 'NHL' } },
{ value: 'Chicago Bulls', data: { category: 'NBA' } },
{ value: 'LA Galaxy', data: { category: 'MLS' } },
{ value: 'Seattle Founders', data: { category: 'MLS' } },
]
try using signature: typeahead(options, [*datasets]); it worked for me with the latest version combiined with Bloodhound object for source property.
* ref-usage(internal project)
Related
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.
I am trying to use this tutorial to make an autocomplete recommendation populated by a list of files in a folder 'template'. How can I modify the JS code to show recommendations based on file names in the template folder instead of the listed generated in the sample code?
I am using this tutorial.
$(function(){
var currencies = [
{ value: 'Afghan afghani', data: 'AFN' },
{ value: 'Albanian lek', data: 'ALL' },
{ value: 'Algerian dinar', data: 'DZD' },
{ value: 'European euro', data: 'EUR' },
{ value: 'Angolan kwanza', data: 'AOA' },
{ value: 'East Caribbean dollar', data: 'XCD' },
...
{ value: 'Vietnamese dong', data: 'VND' },
{ value: 'Yemeni rial', data: 'YER' },
{ value: 'Zambian kwacha', data: 'ZMK' },
{ value: 'Zimbabwean dollar', data: 'ZWD' },
];
Here is my json file
{
id: '81224112234234222223422229',
type: 'message',
message: 'vacation',
attachments: [
{
type: 'template',
elements: [
{
id: '123123123123123',
title: 'job',
text: 'job',
properties: {
code: 'IO002',
value: 'messenger/IO001,messenger2(IO)/IO002,messenger3(IO)/IO003'
}
},
{
id: '123123123123123',
title: 'Date',
text: 'date',
properties: {
code: '2017-11-09~2017-11-09',
value: '2017-11-09~2017-11-09'
}
},
{
id: '123123123123123',
title: 'Sequence',
text: 'sequence',
properties: {
code: '1',
value: '1process/1,2process/1,3process/1'
}
}
]
}
],
module: 'temp'
}
i am using react.js and i want to extract all properties
result
job code: I0002
job value:messenger/IO001,messenger2(IO)/IO002,messenger3(IO)/IO003
date code:2017-11-09~2017-11-09
date value:2017-11-09~2017-11-09
sequence code:1
sequence value:1process/1,2process/1,3process/1
i tried to execute like this
const job=elements.filter(x=>x.text==='job');
const date=elements.filter(x=>x.text==='date');
const sequence=elements.filter(x=>x.text==='sequence');
is it proper way to use filter or another way to extract data from json file?
i am new to react.js and es6,javascript.so i have no idea to display each property.
how can i solve my problem? pz give me a tip.i want to extract properties
You can use
var yourobject=JSON.parse(jsondata);
const job=yourobject.job;
Basically i've made proyxy-component which renders different components based on what the :type is and it works great. The point is that I create a schema of the form controls and a separate data object where the data from the form controls is stored. Everything is working good but i have a problem when formData object contains nested objects.
In my example test.test1
How can i make the v-model value dynamic which is generated based on what the string is.
My Compoennt
<proxy-component
v-for="(scheme, index) in personSchema.list"
:key="index"
:type="scheme.type"
:props="scheme.props"
v-model="formData[personSchema.prefix][scheme.model]"
v-validate="'required'"
data-vv-value-path="innerValue"
:data-vv-name="scheme.model"
:error-txt="errors.first(scheme.model)"
></proxy-component>
Data
data() {
return {
selectOptions,
formData: {
person: {
given_names: '',
surname: '',
sex: '',
title: '',
date_of_birth: '',
place_of_birth: '',
nationality: '',
country_of_residence: '',
acting_as: '',
test: {
test1: 'test',
},
},
},
personSchema: {
prefix: 'person',
list: [
{
model: 'given_names',
type: 'custom-input-component',
props: {
title: 'Name',
},
},
{
model: 'surname',
type: 'custom-input-componentt',
props: {
title: 'Surname',
},
},
{
model: 'test.test1',
type: 'custom-input-component',
props: {
title: 'test 1',
},
},
{
model: 'sex',
type: 'custom-select-component',
props: {
title: 'Sex',
options: selectOptions.SEX_TYPES,
trackBy: 'value',
label: 'name',
},
},
],
},
};
},
I would recomment you to write a vue-method (under the data section) that returns the object for v-model
v-model="resolveObject(formData[personSchema.prefix][scheme.model])"
or
v-model="resolveObject([personSchema.prefix] , [scheme.model])"
There you can do handle the dot-notation and return the proper nested property.
I don't think it's possible directly with v-model, you can take a look at:
https://v2.vuejs.org/v2/guide/reactivity.html
Maybe the best solution would be use a watch (deep: true) as a workaround.
(I would try first to use watch properties inside formData[personSchema.prefix][scheme.model].)
Here is the test data:
[{
id: 1,
isActive: true,
documentIdentifier: '00012345',
sourceSiteName: 'Aviation Industry Ltd.',
targetSiteName: 'VendorName',
createDate: '2013-03-06T14:12:03.2341054+02:00',
archiveEvent: 'Rejected',
archive: 'PurchaseOrder',
previousWhatsNewEvents: [{
id: 2,
isActive: true,
documentIdentifier: '00012345',
sourceSiteName: 'Aviation Industry Ltd.',
targetSiteName: 'Vendor Name',
createDate: '2013-03-06T14:12:03.2341054+02:00',
archiveEvent: 'Approved',
archive: 'PurchaseOrder',
isPin: true,
IsDocumentReadByMe: false,
IsDocumentReadByOthers: true,
documentYear: 2013,
businessDirection: 1
}],
isPin:true,
IsDocumentReadByMe:false,
IsDocumentReadByOthers:true,
documentYear:2013,
businessDirection:1
}
Here is the template:
tpl: [
'<div class="n-row-title">',
'<div class="n-doc-status n-doc-status-{archiveEvent:this.toLower} n-float-left"> </div>',
'<span class="n-hmargin-10">{archiveEvent}</span>',
'</div>',
'<div class="n-clear"></div>',
'<div class="n-row-sub-title">{createDate:date("m/d/Y H:i")}</div>',
'<div class="n-whatsnew-previous-events">',
'<tpl for="previousWhatsNewEvents">',
'<div class="n-row-title">',
'<div class="n-doc-status n-doc-status-{archiveEvent:this.toLower} n-float-left"> </div>',
'<span class="n-hmargin-10">{archiveEvent}</span>',
'</div>',
'<div class="n-clear"></div>',
'<div class="n-row-sub-title">{createDate:date("m/d/Y H:i")}</div>',
'</tpl>',
'</div>',
{
toLower: function (value) {
return value.toLowerCase();
}
}
]
Here is how Chrome is rendering the template:
Here is how IE8 is rendering it:
Any one know of a workaround?
UPDATE
Here is my module :
Ext.define('XX.model.WhatsNew', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'isActive', type: 'boolean' },
{ name: 'documentIdentifier', type: 'string' },
{ name: 'sourceSiteName', type: 'string' },
{ name: 'targetSiteName', type: 'string' },
{ name: 'createDate', type: 'date', dateFormat: 'c' },
{ name: 'archiveEvent', type: 'string' },
{ name: 'archive', type: 'string' },
{ name: 'previousWhatsNewEvents' },
{ name: 'isPin', type: 'boolean' },
{ name: 'IsDocumentReadByMe', type: 'boolean' },
{ name: 'IsDocumentReadByOthers', type: 'boolean' },
{ name: 'documentYear', type: 'int' },
{ name: 'businessDirection', type:'int'}
],
hasMany: {
model: 'auxClasses.notifications.WhatsNew',
name: 'previousWhatsNewEvents'
},
proxy: {
type: 'rest',
url: 'api/WhatsNew/'
}
});
The template could not read the date format from the inner previousWhatsNewEvents childs... that made the dates go wrong!!
Your association is overridden by the field with the same name. Even if that was not the case, you association would not load the child nodes from the data because its associationKey is not configured (see the class description for an example of what it does).
Then again, if you got there, the data view component probably don't support associations... Update: That's wrong, see bellow.
So your fast way out of this is to replace the stock date format function with your own, that casts date strings using Ext.Date.format instead of new Date over which you have no control and that may vary between browsers, as pointed out by Evan.
The trick is that you need a date input format to use Ext.Date.format. In your template, you'll know the expected format:
tpl: [
'{createDate:this.date}',
{
date: function(value) {
var readFormat = 'c',
displayFormat = 'm/d/Y H:i',
date = Ext.Date.parse(value, readFormat);
return Ext.Date.format(date, displayFormat);
}
}
]
And you can even think of replacing the Ext.util.Format.date function by adding an argument to it:
Ext.util.Format.date = function(value, outFormat, inFormat) {
var date;
if (value) {
if (value instanceof Date) {
date = value;
} else if (inFormat) {
date = Ext.Date.parse(value, inFormat);
} else {
// backward compatibility
date = new Date(value);
}
return Ext.Date.format(date, outFormat);
} else {
return '';
}
};
Update
After further investigation, it appears that data view do in fact support model associations: the view's prepareData method calls getAssociatedData on the model. So, as pointed by Even again, the cleanest solution is probably to configure your association correctly.
That means removing this field:
fields: [
...
{ name: 'previousWhatsNewEvents' },
...
]
Adding the associationKey option:
hasMany: {
model: 'auxClasses.notifications.WhatsNew',
name: 'previousWhatsNewEvents',
associationKey: 'previousWhatsNewEvents'
}
And finally you have to ensure that your data is loaded through the Reader for the nested records to be read -- simply put, that means through a Proxy. So with the load method of a store, it will work while with any other way it will probably not (for example the loadData method of the store doesn't use the proxy).