I have a webix form like below:
var myform = {
id: "formID",
view : "form",
scroll: false,
elements : datasheet,
rules : {
"name":webix.rules.isNotEmpty
}
};
var datasheet = [
{view:"text", label:'Name', name:"fname", value: "Put your name"},
{view: "checkbox", id:"field_a", label:"Second age", value:1},
{view: "template", template: "Header Template", type: "header"},
{view: "template", template:"<div id= 'mydiv'><ul><li>1st item</li><li>2nd item</li></ul></div>"}
]
In similar fashion as above, I want to have a list (< ul> < /ul> or < li> < /li>, may be inside a div) to hold some image items. How can I define that inside the datasheet variable above so that I can manage that list later by populating or removing items.
Thanks.
Just place a webix list widget inside of the form. You can use all lists API against it ( load, add, delete, update, etc. )
var datasheet = [
{view:"text", label:'Name', name:"fname", value: "Put your name"},
{view: "checkbox", id:"field_a", label:"Second age", value:1},
{view: "template", template: "Header Template", type: "header"},
{ view:"list", id:"form_list" }
];
https://webix.com/snippet/5ac32116
Related
I am new to the Tabulator plug-in and I am attempting to copy data from one table to another using the Tabulator copyToClipboard method but with no success.
In my application I have created eleven <div> elements (one for the [Crew Leader] and one each for up to ten [Crew Members]) to serve as containers for the Tabulator tables to be instantiated. I am hoping to copy data from the [Crew Leader] table and paste it into each of the affected [Crew Member] tables thus mitigating data re-entry. This sequence of copy/paste events is triggered by the click event bound to a <button> in the header of the [Crew Leader] table. The following function is called by the <button> click event:
function CloneTable() {
// Verify the [Crew Leader] Tabulator table is present....
var tableLeader = Tabulator.prototype.findTable("#CrewLeaderTable");
if (tableLeader.length > 0) {
alert("The Tabulator table #CrewLeaderTable was found.\ntable.length = " + tableLeader.length);
tableLeader.copyToClipboard("all");
alert("The table contents were copied to the clipboard.");
}
else {
alert("The Tabulator table #CrewLeaderTable was not found.");
}
}
The first alert message verifies that the #CrewLeaderTable object has been found as anticipated. However, the second alert verification is never received thus indicating failure of the Tabulator copyToClipboard method.
I have read through as much of the relevant Tabulator documentation as I can find and I am hoping I have simply overlooked something in my setup.
The following is a copy of my Tabulator constructor:
var table = new Tabulator(divid, {
height: "100%",
layout: "fitDataFill",
movableRows: true, //enable user movable rows
tabEndNewRow: true, //create empty new row on tab
rowContextMenu: myActionContextMenu,
keybindings: {
"navUp": true, //enable navUp keybinding using the "up arrow" key
"navDown": true, //enable navDown keybinding using the "down arrow" key
},
columns: [
{ title: "Phase Code", field: "phaseCode", width: 144, editor: "select", editorParams: { values: function (cell) { return window.laborPhaseCodes; } } },
{ title: "Date Worked", field: "dateComp", hozAlign: "center", sorter: "date", editor: dateEditor },
{ title: "Start Time", field: "timeStart", hozAlign: "center", sorter: "time", editor: timeEditor },
{ title: "Finish Time", field: "timeFinish", hozAlign: "center", sorter: "time", editor: timeEditor },
{ title: "Memo", field: "memo", width: 144, hozAlign: "left", editor: "input" },
{ title: "<button type='button' id='btnClone' class='btn btn-success btn-sm py-0' style='font-size:10px;'>Clone</button>", headerSort: false, headerClick: tabCloneTable }
],
cellEdited: function (cell) {
}
});
I have spent a couple of days trying to figure out the best way to "clone" the data from one table into another. The Tabulator documentation is fairly comprehensive but I fear I have overlooked something. Any assistance is greatly appreciated.
It looks like copyToClipboard doesn't return the data, it is maintained internally and not accessible. But, with what you are doing set/getData works fine.
Here is an example, https://jsfiddle.net/nrayburn/19sjg74k/7/.
Basically, what you want to do is call getData on the parent table and setData on the child table.
const crewLeaderTable = Tabulator.prototype.findTable('#CrewLeaderTable')[0];
const crewMemberTable = Tabulator.prototype.findTable('#CrewMember1Table')[0];
const crewLeaderData = crewLeaderTable.getData();
// You could also use replaceData or addData, depending on the requirements
crewMemberTable.setData(crewLeaderData);
I'm having difficulties retrieving my input values through Extjs6's references. There doesn't seem to be a clear cut answer and google is polluted with answers that seem distinct to many different Extjs versions.
I have a window which contains a textfield and a save button, from the textfield I need to retrieve the user's input and pass it along to my ajax call.
My code:
window.updatePassword = function(button) {
var win = new Ext.Window({
referenceHolder: true,
items: [{
xtype: 'form',
items: [{
xtype: 'textfield',
fieldLabel: "newPassword",
reference: 'newPassword',
inputType: 'password'
}],
}],
buttons: [{
text: 'save',
handler: function (btn) {
Ext.Ajax.request({
url: '../../Password_updatePassword.action',
params : {
newPassword: win.newPassword
},
scope: this,
disableCaching: true
});
},
scope: this
}]
});
win.show(this);
};
The things I've tried so far:
this.lookupReference('newPassword')
win.values
win.getValues()
win.newPassword
Ext.getCmp('newPassword')
Any advice would be appreciated.
this.lookupReference('newPassword') - This refers to current object
and handler dont have any component to lookup.
win.values - doesnt make any sense unless you have created a config
in win.
win.getValues() - again doesnt make any sense unless you have create a method in win.
win.newPassword - again same.
Ext.getCmp('newPassword') - getCmp works with id, not with reference.
To get the reference of password field you can lookup on win object,
win.lookupReference('newPassword');
To get the value you have to use getValue() method.
win.lookupReference('newPassword').getValue();
I'm using the docusign rest gem to create and send DocuSign envelopes. But I'm having problems having custom fields I have set on my template to show up. I have 2 signers on my template, that have common fields to both of them so I had to set up each custom field twice since DocuSign doesn't allow for shared fields it seems.
This is the API call I'm doing when setting up my envelope, as per the DocuSign API docs:
custom_fields = {
textCustomFields: [
{
name: "host_address",
value: "Testing Host Address",
required: "true",
show: "true",
},
{
name: "host_civil_status",
value: "Host Civil Status",
required: "true",
show: "true",
},
{
name: "host_id_number",
value: "123HOSTID",
required: "true",
show: "true",
},
{
name: "host_tax_number",
value: "123HOSTTAX",
required: "true",
show: "true",
},
{
name: "nomad_address",
value: "Testing Nomad Address",
required: "true",
show: "true",
},
{
name: "nomad_civil_status",
value: "Nomad Civil Status",
required: "true",
show: "true",
},
{
name: "nomad_id_number",
value: "123NOMADID",
required: "true",
show: "true",
},
{
name: "nomad_tax_number",
value: "123NOMADTAX",
required: "true",
show: "true",
},
{
name: "property_addres",
value: booking.listing.property.full_address,
required: "true",
show: "true",
},
{
name: "property_address",
value: booking.listing.property.full_address,
required: "true",
show: "true",
},
{
name: "property_deposit",
value: (booking.deposit * booking.price).to_s,
required: "true",
show: "true",
},
{
name: "property_description",
value: "Property Description",
required: "true",
show: "true",
},
{
name: "property_start_date",
value: booking.start_date.strftime("%d/%m/%Y"),
required: "true",
show: "true",
},
{
name: "property_end_date",
value: booking.end_date.strftime("%d/%m/%Y"),
required: "true",
show: "true",
},
{
name: "property_stay_length",
value: distance_of_time_in_words(booking.start_date, booking.end_date),
required: "true",
show: "true",
},
{
name: "property_montly_rent",
value: booking.price.to_s,
required: "true",
show: "true",
},
]
}
#envelope = client.create_envelope_from_template(
status: 'sent',
email: {
subject: "The test email subject envelope",
body: "Envelope body content here"
},
template_id: "77xxxxxxxxxxxxxxxxxxxxxxxxxx",
signers: [
{
embedded: true,
name: booking.listing.user.name,
email: booking.listing.user.email,
role_name: 'Host',
},
{
embedded: true,
name: booking.user.name,
email: booking.user.email,
role_name: 'Nomad',
}
],
custom_fields: custom_fields
)
Unfortunately, there are two different objects in the DocuSign system that essentially have the same name of "custom field." You're using the wrong one.
The two objects are:
1. Metadata custom data fields
These objects come in two flavors: textCustomFields and listCustomFields.
These objects can be set at the account level to require that every every (or some) envelopes sent include additional metadata at the envelope level.
The objects can also be set at the envelope level programmatically.
These "custom fields" are not visible to the signer. They are not fields (tabs) visible on the documents. They are associated with the envelope as additional metadata. These are the type of custom fields that your code example is using.
Adding/listing the custom fields set at the account level: docs.
Adding a custom metadata field to an envelope: use the customFields attribute of the envelope definition.
2. Customized tabs (fields)
A customized tab (called a 'field' in the DocuSign web tool) is a version of a DocuSign tab (text tab, sign here tab, date tab, etc) that has been customized. Then, later, instead of re-customizing another instance of the tab, the customized tab can be re-used.
This is what you want to use.
To use the API to list them, update them, etc: docs.
To use them in a document
Disclaimer: I'm reading the docs, I have not tried this. Please add a comment after you try it:
You will need the customTabId for the customized tab. Use the CustomTabs::list API call.
You also need to know the base tab type: Text, etc. Use the type value which is also returned by the CustomTabs::list API call.
Then, when creating your document, for each recipient who gets a customized, tab, create the tab as usual, but include the customTabId as part of the tab's definition. Eg, see the text tab object definition in Envelopes::create API call.
I have a problem with multimodel binding.
In init function of controller i set JSON model in ui.core
var oModel = new sap.ui.model.json.JSONModel(data1);
sap.ui.getCore().setModel(oModel, "model1");
in View I have a template of ColumnListItem and I bind it in a table
var template = new sap.m.ColumnListItem({
id: "first_template",
type: "Navigation",
type : sap.m.ListType.Active,
visible: true,
selected: true,
cells: [ new sap.m.Label({
text: "{name}"
})
],
press: [oController.pressListMethod]
});
oTable.bindItems("model1>/events", template, null, null);
oPage.addContent(oTable);
With simple Model it work's rigth but in Multimodel table only gets the number of items but not the properties of the model. Any solution ?
You need to use the model name in the template, too:
var template = new sap.m.ColumnListItem({
id: "first_template",
type: "Navigation",
type : sap.m.ListType.Active,
visible: true,
selected: true,
cells: [
new sap.m.Label({
text: "{model1>name}" // No leading "/" here since the binding is relative to the aggregation binding below
})
],
press: oController.pressListMethod
});
oTable.bindItems("model1>/events", template);
oPage.addContent(oTable);
So in my PhoneJS web app, I have a dxList widget, with checkboxes on each item. I want to be able to select multiple items, and then do something with them. I'm trying to bind the 'checked' binding to an observable, but I get an 'undefined' error.
Here's the code for the dxTemplate for the list
<div data-options="dxTemplate:{name:'item'}">
<span data-bind="text: $data.information"></span>
<div data-bind="dxCheckBox: { checked: check_boxes }"></div>
</div>
The problem is that check_boxes is in the viewModel, not the item array. I need to access values in the viewModel. I've tried viewModel.check_boxes, but with no success.
Here's the js code:
AppNamespace.otherView = function (params) {
var viewModel = {
my_list: [
{
key: 'Group 1',
items: [
{ information: 'Test 1' },
{ information: 'Test 2'},
{ information: 'Test 3' }
]
}
],
check_boxes: ko.observable(false),
//...etc
Has anyone had any experience with this, and is there a solution?
Thanks!
Knockout provides special properties to access parent binding contexts. In your case both $parent and $root should work.
More on this topic in Knockout docs: Binding context.