I have this JSON schema, I tried to populate multiple select component with the uniform autoform.
(() => {
const ajv = new Ajv({ allErrors: true, useDefaults: true, keywords: ["uniforms"] });
const schema = {
title: 'Address',
type: 'object',
properties: {
city: {
type: 'string',
uniforms: {
options: [
{ label: 'New York', value: 'new york' },
{ label: 'Nashville', value: 'nashville' },
],
},
},
}
};
function createValidator(schema) {
const validator = ajv.compile(schema);
return (model) => {
validator(model);
if (validator.errors && validator.errors.length) {
return { details: validator.errors };
}
};
}
const schemaValidator = createValidator(schema);
return new JSONSchemaBridge(schema, schemaValidator);
})()
And the result look like this
Rendered component with this JSON schema
The multiselect component example from antd
could I render multiselect component instead select component (which default from uniform)?
Can I select new york and nashville at the same time?
Related
i'm looking for a solution to update an echart when new data comes in. Currently i have a chart and a drop down with some data.When i open the page, data is displaying at the chart perfectly fine. But when i use the drop down and change option to next data, nothing is happening. The previous data is still on the chart. Any ideas how to update the chart (object) when data changes ?
My code:
chart1: EChartOption = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Tests Open','Tests Approved', 'Tests Failed']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
magicType: { title: '1', show: true, type: ['line', 'bar',] },
restore: { title: 'Restore', show: true },
saveAsImage: { title: 'Save Chart',show: true }
}
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: []
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Tests Open',
type: 'bar',
data: [],
itemStyle: {
color: '#FDD051'
}
},
{
name: 'Tests Approved',
type: 'bar',
data: [],
itemStyle: {
color: '#2EAD6D'
}
},
{
name: 'Tests Failed',
type: 'bar',
data: [],
itemStyle: {
color:'#F0533F'
}
},
]
};
refreshChart(statistics: TestResultSiteStatistics) : void {
let months = [];
let open = [];
let approved = [];
let failed = [];
for (let month in statistics.monthly){
months.push(month);
approved.push(statistics.monthly[month].approved);
open.push(statistics.monthly[month].open);
failed.push(statistics.monthly[month].failed);
}
this.chart1.xAxis[0].data = months;
this.chart1.series[0].data = open;
this.chart1.series[1].data = failed;
this.chart1.series[2].data = approved;
}
<div #chart style="height:590px; width:1190px;" echarts [options]="chart1" ></div>
You cannot add data directly to instance because Echarts incapsulated diffucult logic to process data. You need to use method myChart.setOption({series: [new_data]}). It explained in API docs: https://echarts.apache.org/en/api.html#echartsInstance.setOption and https://echarts.apache.org/en/tutorial.html#Loading%20and%20Updating%20of%20Asynchronous%20Data
I was able to add a custom action to the table but I still don't know how to use that custom action to open a record in a different page/modal when it's clicked. How to assign the ID to that record row? How to pass it to a different view?
in the component.html
<ng2-smart-table [settings]="settings" [source]="source" (custom)="onCustomAction($event)"></ng2-smart-table>
in the component.ts
settings = {
mode: 'external',
hideSubHeader: true,
actions: {
position: 'right',
add: false,
edit:false,
delete: false,
custom: [
{ name: 'viewRecord', title: '<i class="far fa-file-alt"></i>'},
],
},
columns: {
firstName: {
title: 'First Name',
type: 'string',
},
lastName: {
title: 'Last Name',
type: 'string',
},
username: {
title: 'Username',
type: 'string',
},
email: {
title: 'E-mail',
type: 'string',
},
age: {
title: 'Age',
type: 'number',
},
},
};
onCustomAction(event): void {
//WHAT TO DO HERE?
}
SOLVED
onCustomAction(event): void {
//get action name to switch in case of different actions.
var actionName = event.action;
//get row id.
var id = event.data.id;
//navigate to edit/view url.
this.router.navigate(url)
}
your can inject NbdialogService in constuctor to open in dialog/Modal
private dialogService: NbDialogService
onCustomAction(event) {
switch (event.action) {
case 'view-details':
this.service.getDetails(event.data.Id)
.pipe(
tap(res => {
this.dialogService.open(UserDetailsComponent, { // inject your component will be displayed in modal
context: {
details: res,
},
});
})
).subscribe();
break;
default:
console.log('Not Implemented Action');
break;
}
or navigate sure as you did by this.router.navigate(url)
I am building a form, that needs to get data dynamically via a JSON request that needs to be made while loading the form. I don't see a way to load this data. Anybody out here who can help?
JSON calls are being done via vue-resource, and the forms are being generated via vue-form-generator.
export default Vue.extend({
template,
data() {
return {
model: {
id: 1,
password: 'J0hnD03!x4',
skills: ['Javascript', 'VueJS'],
email: 'john.doe#gmail.com',
status: true
},
schema: {
fields: [
{
type: 'input',
inputType: 'text',
label: 'Website',
model: 'name',
maxlength: 50,
required: true,
placeholder: companyList
},
]
},
formOptions: {
validateAfterLoad: true,
validateAfterChanged: true
},
companies: []
};
},
created(){
this.fetchCompanyData();
},
methods: {
fetchCompanyData(){
this.$http.get('http://echo.jsontest.com/key/value/load/dynamicly').then((response) => {
console.log(response.data.company);
let companyList = response.data.company; // Use this var above
}, (response) => {
console.log(response);
});
}
}
});
You can just assign this.schema.fields.placeholder to the value returned by the API like following:
methods: {
fetchCompanyData(){
this.$http.get('http://echo.jsontest.com/key/value/load/dynamicly').then((response) => {
console.log(response.data.company);
this.schema.fields.placeholder = response.data.company
}, (response) => {
console.log(response);
});
}
}
I have created a form panel view and I will create some form items iside this panel. The communication to the store, controller and model works fine but how can I create the items in the view?
Json array (retrieved from external service):
{
"data": [
{
"name": "ff",
"xtype": "textfield",
"allowBlank": false,
"fieldLabel": "labelText1"
},
{
"name": "fsdsdf",
"xtype": "textfield",
"allowBlank": false,
"fieldLabel": "labelText2"
}
],
"msg": "Unknown",
"success": true
}
Store:
Ext.define('myApp.store.Forms', {
extend: 'Ext.data.Store',
alias: 'store.Form',
model: 'myApp.view.FormModel',
constructor: function(config) {
var me = this;
config = config || {};
me.callParent([Ext.apply({
autoLoad: true,
proxy: {
type: 'ajax',
url: 'url_to_service',
reader: {
type: 'json',
rootProperty: 'data',
successProperty : 'success'
}
},
storeId: 'formStore'
}, config)]);
// console.error("store loaded");
// console.info(me);
}
});
model
Ext.define('myApp.view.FormModel', {
extend: 'Ext.data.Model',
data: {
name: 'myApp'
}
});
Controller
Ext.define('myApp.view.FormController', {
extend: 'Ext.app.ViewController',
alias: 'controller.form',
init: function(application) {
var store = new myApp.store.Forms();
store.on("metachange", metaChanged, this);
function metaChanged(store, meta) {
var grid = Ext.ComponentQuery.query('form')[0];
grid.fireEvent('metaChanged', store, meta);
};
this.control({
"form": {
metaChanged: this.handleStoreMetaChange
}
});
},
handleStoreMetaChange: function(store, meta) {
var form = Ext.ComponentQuery.query('form')[0];
form.reconfigure(store, meta.data);
}
});
At least the view where I want to create the items from the store.
Ext.define('myApp.view.Form', {
extend: 'Ext.form.Panel',
xtype: 'form',
controller: "form",
viewModel: {
type: "form"
},
title: 'form',
bodyPadding: 10,
autoScroll: true,
defaults: {
anchor: '100%',
labelWidth: 100
},
// How can I add form items here?
});
Within your view you'll need to create a function that matches the form.reconfigure(store, meta.data) call you are making in your controller.
And in that function you can call the form's add function to add items to the form. As you are already supplying the xtype and configuration parameters in the data structure each item can be passed to the add function as it. It would look something like the below code...
reconfigure: function(store, data) {
var me = this;
Ext.each(data, function(item, index) {
me.add(item);
});
}
I have knocked together an Example Fiddle that shows this working. I just mocked out the loading of the data and 'metachange' event as it was easier to get the demo working.
I'm returning a list of .NET serialized objects (Project objects) from a JSON web service via an Ext JS JSON proxy. I'm not able to get my Ext.grid.Panel to properly display my date formatted fields. Why would that be? Search for "this one" below. All other fields are showing properly in my Ext grid. And when I save the date from my calendar control, it stores the date properly in the database. To rule out other issues, I've hard coded the date for you in my object.
Serialized class:
[Serializable]
public class Project
{
public string project_id;
public string project_number;
public string project_name;
public string description;
public DateTime? date_start;
}
Web method:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false, XmlSerializeString = false)]
public List<Project> GetProjects(string myTest, string bar)
{
Database db = DatabaseFactory.CreateDatabase("HIMC-DEV");
DbCommand cmd = db.GetStoredProcCommand("project_get_list");
db.AddInParameter(cmd, "#user_id", DbType.String, "");
DataSet ds = db.ExecuteDataSet(cmd);
DataTable dt = ds.Tables[0];
List<Project> projectList = new List<Project>();
foreach (DataRow row in dt.Rows)
{
Project p = new Project();
p.project_id = row[0].ToString();
p.project_number = row[1].ToString();
p.project_name = row[2].ToString();
p.description = row[3].ToString();
p.date_start = new DateTime(2012, 1, 12); // <=== this one
projectList.Add(p);
}
return projectList;
}
Ext Model:
Ext.define('Project', {
extend: 'Ext.data.Model',
fields: [
{ name: 'project_id' },
{ name: 'project_name' },
{ name: 'project_number' },
{ name: 'description' },
{ name: 'date_start', type: 'date' }
]
});
JSON proxy:
Ext.define('Ext.ux.AspWebAjaxProxy', {
extend: 'Ext.data.proxy.Ajax',
require: 'Ext.data',
buildRequest: function (operation) {
var params = Ext.applyIf(operation.params || {}, this.extraParams || {}),
request;
params = Ext.applyIf(params, this.getParams(params, operation));
if (operation.id && !params.id) {
params.id = operation.id;
}
params = Ext.JSON.encode(params);
request = Ext.create('Ext.data.Request', {
params: params,
action: operation.action,
records: operation.records,
operation: operation,
url: operation.url
});
request.url = this.buildUrl(request);
operation.request = request;
return request;
}
});
Ext Window with embedded form:
Ext.define('ProjectEdit', {
extend: 'Ext.window.Window',
alias: 'widget.projectedit',
title: 'Edit Project',
layout: 'fit',
autoShow: true,
closable : true,
initComponent: function () {
this.items = [
{
xtype: 'form',
width: 650,
height: 300,
bodyPadding: 20,
items: [
{
xtype: 'textfield',
name: 'project_id',
fieldLabel: 'Project ID'
//disabled: true
},
{
xtype: 'textfield',
name: 'project_number',
fieldLabel: 'Project Number'
},
{
xtype: 'textfield',
name: 'project_name',
fieldLabel: 'Project Name'
},
{
xtype: 'datefield',
format: 'm/d/Y',
allowBlank: true,
name: 'date_start',
fieldLabel: 'Start Date'
},
{
xtype: 'combo',
fieldLabel: 'Manager',
emptyText: 'select keyword',
store: keywordStore,
valueField: 'name',
displayField: 'name',
mode: 'remote',
autoSelect: false,
selectOnFocus: true,
shadow: true,
forceSelection: true,
triggerAction: 'all', // not sure what this is?
hideTrigger: true,
//multiSelect:true,
typeAhead: true,
minChars: 1,
renderTo: document.body
},
{
xtype: 'htmleditor',
name: 'description',
fieldLabel: 'Description',
enableColors: false,
enableAlignments: false,
width: '100%'
}
]
}
];
...
Ext grid:
Ext.define('ProjectGrid', {
extend: 'Ext.grid.Panel',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
store: store,
columns: [
{ text: 'Project ID', dataIndex: 'project_id', sortable: true },
{ text: 'Project Number', dataIndex: 'project_number', sortable: true },
{ text: 'Project Name', dataIndex: 'project_name', sortable: true, width: 300 },
{ text: 'Start Date', dataIndex: 'date_start', sortable: true, width: 300, renderer: Ext.util.Format.dateRenderer('Y-m-d') },
{ text: 'Description', dataIndex: 'description', sortable: true, width: 500 }
],
listeners: {
//itemdblclick: this.editProject
itemdblclick: function(view, record, item, index, e) {
//var w = new ProjectEdit();
var w = Ext.widget('projectedit');
w.show(); // show the window
w.down('form').loadRecord(record); // load the record in the form
w.callback = Ext.bind(this.editProject, this); // bind lets you set the scope of the callback (for the project that was double clicked)
}
}
});
me.callParent(arguments);
},
...
});
JSON request image from Firebug NET tab (open in a new tab to make it larger):
The issue you experience seems to be connected with the date format for this date field.
By default ExtJS expects date to be sent in format that differs from one used by .Net.
Updating your model the following way should help:
{ name: 'date_start', type: 'date', dateFormat: 'MS' }
or
{ name: 'date_start', type: 'date', dateFormat: 'U' }
See ExtJS API for dateFormat and its possible values.