I have added two text fields in a form panel:
{
xtype: 'formpanel'
,flex: 1
,id: 'remove'
,defaults: {
xtype: 'textfield'
,readOnly: true
}
,items: [{
bind: {
value: '{loadDetails.firstname}'
}
},{
bind: {
value: '{loadDetails.lastname}'
}
}
I have written the following function for removing the text fields:
onRemove: function(){
Ext.getCmp('remove').setValue("");
}
On executing this the console displays that setValue is not a function.
Ext.getCmp('remove') returns an instance of your form panel, not of your text fields:
var form = Ext.getCmp('remove');
var text1 = form.items.getAt(0);
var text2 = form.items.getAt(1);
text1.setValue("");
text2.setValue("");
yourForm.reset();
will reset all your inputs to the default value
If you need to delete the input field you can try:
yourForm.getComponent(//index of the component).destroy();
If you need to clear the value of a single field you can get the field like these:
form.getComponent(//index)
form.findField(//id of the field)
and then call on it .setValue(''); or .reset();
If instead you need to delete all the input fields from the form you can do it like this:
form.removeAll();
Related
I'm currently trying to make radio buttons in netsuite, I'm have a hard time finding a good resource for help. Has anyone went through this process before?
It seems that you cannot add a custom Radio field to a NetSuite form using the UI customisations.
Radio fields are only supported when working with a nlobjForm object in SuiteScript 1 or SuiteScript 2.
Official code sample (SuiteScript 1):
function radioButtonSamples(request, response)
{
var form = nlapiCreateForm('Sample Form');
// create a field of type 'label' - this field type holds no data and is used for display purposes only
form.addField('orgtypelabel','label','What type of organization are you?').setLayoutType('startrow');
/* add fields of type 'radio'. Notice that this set of radio buttons all specify 'orgtype' as the field
* name for each button. Each radio button is distinguished by the value specified in
* the 'source' parameter. By default, this set of radio fields will appear vertically since
* no layout type has been specified
*/
form.addField('orgtype', 'radio', 'Business To Consumer', 'b2c');
form.addField('orgtype', 'radio','Business To Business','b2b');
form.addField('orgtype', 'radio','Non-Profit','nonprofit');
//default the "Business to Business" radio button as selected when the page loads
form.getField('orgtype', 'b2b' ).setDefaultValue( 'b2b' );
/* now add the second set of radio buttons. Notice that this group also shares the same
* value for name, which is 'companysize'. Also note the use of the setLayoutType method.
* Use this when you want to position the buttons horizontally.
*/
form.addField('companysizelabel','label','How big is your organization?').setLayoutType('startrow');
form.addField('companysize', 'radio','Small (0-99 employees)', 's').setLayoutType('midrow');
form.addField('companysize', 'radio','Medium (100-999 employees)','m').setLayoutType('midrow');
form.addField('companysize', 'radio','Large (1000+ employees)','l').setLayoutType('endrow');
response.writePage( form );
}
Above Code Refactored into SuiteScript 2.0:
/**
* #NApiVersion 2.x
* #NScriptType Suitelet
*/
define(['N/ui/serverWidget'], function (serverWidget) {
function onRequest(context) {
var form = serverWidget.createForm({
title: 'Sample Form'
});
// create a field of type 'label' - this field type holds no data and is used for display purposes only
form.addField({
id: 'orgtypelabel',
label: 'What type of organization are you?',
type: serverWidget.FieldType.LABEL
}).updateLayoutType({
layoutType: serverWidget.FieldLayoutType.STARTROW
});
/* add fields of type 'radio'. Notice that this set of radio buttons all specify 'orgtype' as the field
* name for each button. Each radio button is distinguished by the value specified in
* the 'source' parameter. By default, this set of radio fields will appear vertically since
* no layout type has been specified
*/
form.addField({
id: 'orgtype',
label: 'Business To Consumer',
type: serverWidget.FieldType.RADIO,
source: 'b2c'
});
form.addField({
id: 'orgtype',
label: 'Business To Business',
type: serverWidget.FieldType.RADIO,
source: 'b2b'
});
form.addField({
id: 'orgtype',
label: 'Non-Profit',
type: serverWidget.FieldType.RADIO,
source: 'nonprofit'
});
//default the "Business to Business" radio button as selected when the page loads
form.updateDefaultValues({
values: { orgtype: 'b2b' }
})
/* now add the second set of radio buttons. Notice that this group also shares the same
* value for name, which is 'companysize'. Also note the use of the setLayoutType method.
* Use this when you want to position the buttons horizontally.
*/
form.addField({
id: 'companysizelabel',
label: 'How big is your organization?',
type: serverWidget.FieldType.LABEL
}).updateLayoutType({
layoutType: serverWidget.FieldLayoutType.STARTROW
});
form.addField({
id: 'companysize',
label: 'Small (0-99 employees)',
type: serverWidget.FieldType.RADIO,
source: 's'
}).updateLayoutType({
layoutType: serverWidget.FieldLayoutType.MIDROW
});
form.addField({
id: 'companysize',
label: 'Medium (100-999 employees)',
type: serverWidget.FieldType.RADIO,
source: 'm'
}).updateLayoutType({
layoutType: serverWidget.FieldLayoutType.MIDROW
});
form.addField({
id: 'companysize',
label: 'Large (1000+ employees)',
type: serverWidget.FieldType.RADIO,
source: 'l'
}).updateLayoutType({
layoutType: serverWidget.FieldLayoutType.ENDROW
});
context.response.writePage(form);
}
return {
onRequest: onRequest
};
});
Result:
Official Reference (SuiteScript 1): https://system.netsuite.com/app/help/helpcenter.nl?fid=section_n3144618.html#bridgehead_N3149879
I want when I create new row, In Status columns is checkbox. In Image is Input text
I can not provide you a full sample code right now but you should define a column for your checkbox. Provide a boolean value for that column. Don't forget to add
'type: custom'
It renders the Component you provide. I used a component named MyCheckboxComponent
<nb-checkbox [ngModel]="selected"></nb-checkbox>
nb-checkbox is in nebular library.
settings = {
columns: {
checkBox: {
type: 'custom',
filter: false,
width: '10px',
renderComponent: MyCheckboxComponent
}
}
}
I have a table that I build using a chart wrapper as follows:
var rightWrapper;
function drawVisualization() {
rightWrapper = new google.visualization.ChartWrapper({
"chartType": "Table",
'dataSourceUrl':'https://docs.google.com/spreadsheets/d/1I3N5DtdXGWFootaOCQM201K_ao2ZPWSWyw9_l7QcwQg/gviz/tq?sheet=User_my_crew&headers=1',
'containerId':'target_table_div',
'query':'SELECT A,B,C,D',
'options': { 'width': 700, 'height': 500, 'allowHtml': true }
});
google.visualization.events.addListener(rightWrapper, 'ready', onRightReady);
rightWrapper.draw();
function onRightReady() {
google.visualization.events.addListener(rightWrapper.getChart(), 'select', rightSelectionHandler);
}
function rightSelectionHandler() {
var selection = rightWrapper.getChart().getSelection();
if (selection.length == 1) {
var item = selection[0];
if (item.row != null) {
alert("selected row " + item.row);
var value = (rightWrapper.getSnapshot().getDataTable().getValue(item.row,3));
alert(value);
}
}
}
}
And in that column 3, I have html to build radio buttons. Unfortunately, the actual html is stored, and I don't seem to have a way of polling to find out which radio button is now checked (the getValue listed in the code above always shows me just the html that was used to build the radio buttons, not which one is now "checked").
Unfortunately, it appears any clicks inside that table have to be picked up with the select listener, and the select listener doesn't relay any information beyond the row and column selected. I tried building in change and click functions, and putting s around my radio buttons, too. For instance:
$("#radio").click(function(){ //also tried with .change
alert("working");
});
That never fires, even if I disable my original listener.
So, how can I know what radio button my user selected?
Note: I do need the radio buttons inside the table, as every single row of the table has its own radio buttons to provide me different information on each.
you don't need the form, you just need to wait for the chart's 'ready' event,
before assigning the change event.
see following working snippet,
select a radio to see the name and value...
google.charts.load('current', {
packages: ['controls', 'table']
}).then(function () {
var rightWrapper = new google.visualization.ChartWrapper({
chartType: 'Table',
dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1I3N5DtdXGWFootaOCQM201K_ao2ZPWSWyw9_l7QcwQg/gviz/tq?sheet=User_my_crew&headers=1',
containerId: 'target_table_div',
query: 'SELECT A,B,C,D',
options: { 'width': 700, 'height': 500, 'allowHtml': true }
});
google.visualization.events.addListener(rightWrapper, 'ready', onRightReady);
rightWrapper.draw();
function onRightReady() {
$('input[type="radio"]').on('change', calcForm2);
}
});
function calcForm2(sender) {
console.log(sender.target.name, sender.target.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="target_table_div"></div>
I figured out something that works
I can add a form around my radio buttons with the event.preventdefault code and call a function:
<form name="myForm" onchange="event.preventDefault(); calcForm2(this);">...radiobuttons...</form>
Then in my function I do whatever I want with "this". It comes across as "name=value" so it's pretty easy to split and parse.
I am trying to implement a simple contacts list the one shown here. I setup my data source and everything as given in that example. Now if i want to add a search box or dropdown at the top of the page so that what user selects a drop-down menu or types something in the search box, how do I filter my results. For example: If the user types "GRI" in search box i need to show up all contacts with firstname matching "GRI". Any ideas how do i implement this?
Let's say you show your contacts list like this:
<template is="dom-repeat" items="{{filteredContacts}}" as="contact">
<div>{{contact.name}}</div>
</template>
And you have list that looks like this:
...
...
<script>
filteredContacts: {
type: Array,
value: [],
}
unfilteredContacts: {
type: Array,
value: [{name:"testcontact1"}, {name: "testcontact2"}],
}
//this should be called when input changes on your text input
onFilterTextInputChange : function(){
this.filteredContacts = []; //we empty the array so that old results won't be shown
var filterString = this.$.myFilterTextInput.value(); // we retrieve the text from the text input that we are supposed to filter on
for(var i=0;i<this.unfilteredContacts.length; i++)
{
//Here you make your filtering logics (the example below will only show contacts whose name match exactly what you type in the input field)
var contact = this.unfilteredContacts[i];
if(contact.name == filterString)
this.push("filteredContacts", contact);
}
}
</script>
Note, the code above might not work to just copy-paste. There might be some syntax errors, but you should get the drift on how you can proceed. :)
I am using a <form:input> on my jsp. The input field should be editable but not nullable. Is there a way to handle this on the client side? i,e, disable the deletion of the value in the field but keep the field editable.
Disabling deletion would be inconvenient for users. It would be better to check the value when focus leaves the field and show error message if it's empty. For example, using jQuery:
<form:input id = "f" ... />
.
var f = $("#f");
f.blur(function() {
if (!f.val()) {
... // show error message
}
});
f.change(function() {
if (f.val()) {
... // hide error message
}
});