I am adding UIelement by using following code
legendBox = chart[unique].addUIElement(UILayoutBuilders.Column.setBackground( UIBackgrounds.Rectangle ))
.setPosition({ x: 0, y: 100 })
.setOrigin(UIOrigins.LeftTop)
Right now I am able to add series to it by following code
entry = legendBox.addElement(UIElementBuilders.CheckBox);
series.attach(entry);
Instead , can I add the button with some value ? On clicking of that button I need call an function with that value.
For example if I add button with value
<button val="22">Click<button>
Now when i click that button , I need a callback function returning 22.Is it possible ?
In your case, the entry variable is of type UICheckBox.
To apply a custom action when clicking it, the onSwitch method should do it.
series.attach(entry); is only required if you want the button to hide/restore the series, you can remove this code if you want that only your custom action is triggered.
entry = legendBox.addElement(UIElementBuilders.CheckBox)
entry.onSwitch((_, checked) => {
console.log('clicked', checked)
})
See also UIElementBuilders.ButtonBox if you want to add automatic bounce-back.
entry = legendBox.addElement(UIElementBuilders.ButtonBox)
entry.onSwitch((_, checked) => {
if (checked) {
console.log('button pressed')
}
})
Related
I am trying to hide or disable the "Add Row" button right to the IG (Intractive Grid) when the first row is added in Grid.
Only one record should be available in the IG, so once the first is inserted automatically the "Add Row" Button should be hidden or disabled.
I have tried in Js but it’s hiding the button once the page loads.
function(config) {
var i, toolbarData = apex.jQuery.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup = toolbarData.toolbarFind("actions3");
// find and remove the add_row button
for (i = 0; i < toolbarGroup.controls.length; i++ ) {
if ( toolbarGroup.controls[i].action === "selection-add-row" ) //for save and edit it is working
{
toolbarGroup.controls.splice(i,4);
break;
}
}
config.toolbarData = toolbarData;
return config;
}
Looks like a vary complicated procedure for a simple task
possible solutions:
If all you need is adding one row - use a form instead of IG
Initiate the region with one empty line, and remove the "Add row" button all in all
Use a dynamic action which is triggered by the Add row button that disables the same button
I am new in Google script. Could you please help me on this.
I want to create a button in googlesheet with series of text display every after click.
( I dont know what to put in script)
OPEN (green background) --> CLICK--> CLOSE ( red background) --> CLICK--> OPEN (green background)...and so on
Thank you in advance
I believe your goal as follows.
You want to achieve the button which is changed when the button is clicked on the Google Spreadsheet.
For example, when the button with the green color and "OPEN" text is clicked, you want to change it to the button with the red color and "CLOSE" text.
You want to achieve this using Google Apps Script.
Issue and workarounds:
In the current stage, unfortunately, Google Apps Script cannot directly manage the drawing on Google Spreadsheet by editing the text and color. So it is required to think of the workaround for achieving your goal. In this answer, I would like to propose the following 3 workarounds as the methodology.
Workaround 1:
In this workaround, the drawing is used as the button. When the drawing is used as the button, 2 drawings are prepared and both drawings are overwrapped. Each button has the function of button1 and button2, respectively. When a button is clicked, the z index is replaced. By this, the switching button can be achieved. Because in the current stage, the image cannot be directly edited by the Google Apps Script.
Usage:
In order to use the sample script, create 2 buttons as the drawings like the above demo image.
In this case, please overwrap the both drawings.
Please assign the function of button1 and button2 to each button.
Copy and paste the following script to the container-bound script of Spreadsheet and save it.
const button1 = () => switching("button1");
const button2 = () => switching("button2");
function switching(name) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getActiveSheet();
const drawings = sheet.getDrawings();
drawings.forEach(d => d.setZIndex(d.getOnAction() == name ? 0 : 1));
const temp = ss.insertSheet();
SpreadsheetApp.flush();
ss.deleteSheet(temp);
sheet.activate();
}
Click the button. By this, the script is run and the button is switched.
Note:
In this case, in order to refresh the change of z index of drawings, it is required to change the focus to other sheet. By this, when the button is clicked, the button is flashing in a moment. About this, I would like to expect the future update.
Workaround 2:
In this pattern, the drawing is used as the button. In this case, 2 drawings are also prepared, and one button is put to the cell "C3" and another one is other position (as the test, the button is put to "E10".) in the same sheet. Each button has the function of button1 and button2, respectively. When a button is clicked, the clicked button is replaced with the button of the another position. By this, the switching button can be achieved.
Usage:
In order to use the sample script, create 2 buttons as the drawings like the above demo image.
In this case, please put a button to the cell "C3" and another one to other position (as the test, the button is put to "E10".) in the same sheet.
Please assign the function of button1 and button2 to each button.
Copy and paste the following script to the container-bound script of Spreadsheet and save it.
const button1 = () => switching("button1");
const button2 = () => switching("button2");
function switching(name) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getActiveSheet();
const drawings = sheet.getDrawings();
if (drawings[0].getOnAction() == name) {
drawings[1].setPosition(3, 3, 0, 0);
drawings[0].setPosition(10, 5, 0, 0);
} else {
drawings[0].setPosition(3, 3, 0, 0);
drawings[1].setPosition(10, 5, 0, 0);
}
}
Click the button. By this, the script is run and the button is switched.
Note
In this case, it is not required to refresh by focusing to other sheet. But, another button is required to be put to the same sheet.
Workaround 3:
In this workaround, the cell is used as the button. When the cell is used as the button, in this case, the cell "C3" is used. And the OnSelectionChange event trigger is used for executing the script.
Usage:
In order to use the sample script, put the text of "OPEN" and the red color to the cell "C3" like above demo image.
Copy and paste the following script to the container-bound script of Spreadsheet and save it.
function onSelectionChange(e) {
const range = e.range;
const sheet = range.getSheet();
const a1Notation = range.getA1Notation();
if (a1Notation == "C3") {
if (range.getValue() == "OPEN") {
range.setBackground("#ff0000");
range.setValue("CLOSE");
} else {
range.setBackground("#38761d");
range.setValue("OPEN");
}
sheet.getRange("A1").activate();
}
}
Click the cell "C3". By this, the script is run and the text and color of the cell are switched.
Note
In this case, in order to select the button again, it is required to change the selected cell. This is the current specification.
Note:
These are the simple sample scripts. So please modify them for your actual situation.
References:
Class Drawing
Simple Triggers
I'm simultaneously displaying some data in a react-table component and on a interactive map. I'm trying to implement a feature where items can be selected by clicking the table row or the object on the map.
Here is what that looks like.
In my component's state there is a selectedIndex property that holds the array index of currently selected item.
I managed to handle the click events both on react-table row and on the interactive map object and set the appropriate value to the selectedIndex property.
I managed to highlight both the row that displays the selected item and the object that represents the selected item on the map.
getTrProps={(s: any, rowInfo: RowInfo) => {
if (rowInfo == null) {
return {};
}
return {
onClick: (e: any, handleOriginal: any) => {
this.handleSelectedIndexPress(rowInfo.index);
if (handleOriginal) {
handleOriginal();
}
},
style: rowInfo.index === this.state.selectedIndex ?
{background: '#00AFEC', color: 'white'} : {}
}
}
<GlifyPointsLayer
data={state.reportPoints}
click={(e, point: [number, number, number]) => this.handleSelectedIndexPress(point[2])}
color={{r: 1, g: 0, b: 1}}
size={10}
/>
{state.selectedIndex != null &&
<Marker
position={state.reportPoints[state.selectedIndex] as any}
icon={markerIcon}
/>
The only problem is that when the user selects a item by clicking on it on the interactive map, sometimes, the item dose not get highlighted on the table since its not on the currently displayed page.
When that happens I would like to jump to the page where the selected item is.
I know that there is the page property on the ReactTable component with witch I can programmatically control the currently displayed page.
The problem is that when I handle the click event on the interactive map I only have access to the index of the selected element.
handleSelectedIndexPress = (index: number) => {
// Here i need to figure out the page number that the row with index "index" is in.
const selectedIndex = index !== this.state.selectedIndex ? index : null;
this.setState({selectedIndex: selectedIndex});
};
How do I figure out what page number that index is in so that I can set the currently displayed page properly? Keep in mind that react-table rows can be sorted in many different ways so the index is not mathematically linked to the page number.
On page I have fullcalendar, variable which determines how to display now (all events or events with filter), button for changing variable value and function which applies filter.
Variable (true - show all events, false - with filter):
var isShownWithCancelEvents = true;
Button and it's click function:
$('.fc-header-left').append('<span class="fc-button fc-button-show-with-canceled-events fc-state-default"><span class="fc-button-inner"><span id="show_without_canceled_events" class="fc-button-content">Show with filter</span><span class="fc-button-effect"><span></span></span></span>');
$(".fc-button-show-with-canceled-events").click(function() {
isShownWithCancelEvents = !isShownWithCancelEvents;
prepareEvents();
});
Function prepareEvents():
function prepareEvents(){
if (isShownWithCancelEvents) {
$('#calendar').fullCalendar('refetchEvents');
$(".fc-button-show-with-canceled-events .fc-button-content ").text("Show with filter");
}
else {
$('#calendar').fullCalendar ( 'removeEvents', filter );
$(".fc-button-show-with-canceled-events .fc-button-content ").text("Show all events");
}
}
Filter function:
function filter(event) {
return (event.ec_e_id !== null);
}
Also in fullcalendar I use option:
viewDisplay: function(view) {
prepareEvents();
},
Button is working, problem is with fullcalendar option.
Default view on page is agendaWeek. I open page and click button, variable's value changes to false, filter applies. It's OK. Then I click button "Month" and view changes to month. And I see all events. Then I click button "Week" and view changes to agendaWeek - events are filtered. I click button "Month" again - on this view events are filtered too. So, the problem is when first time changing view to another.
I open page and click button, variable's value changes to false, filter applies. It's OK. Then I navigate left or right (next or previous week), and I see all events. Then I return back, where events were filtered and see all events there.
If I add alert into fullcalendar option
viewDisplay: function(view) {
alert("something");
prepareEvents();
},
everything is OK, and filter works every time.
I have added a button to a tab panel in the center region by calling
var add = tabSelection.addButton({
id : 'add',
text : 'Add',
hidden : true,
tooltip : 'Please highlight the correct value and click Add to create new contact',
handler : addContact
});
There are two radio buttons in the west region in an accordion layout, labeled 'internal' and 'external'. I want the tool tip to be changed dynamically by capturing the radio button click.
I am able to capture the radio button click and when I set the tooltip of the button accordingly,
add.setToolTip('Please highlight the correct value and click Add to create new internalcontact'); if internal client is clicked.
add.setToolTip('Please highlight the correct value and click Add to create new external contact'); when external is clicked.
You need to initialise tooltips for it to work:
Ext.QuickTips.init();
And use qtip instead of tooltip.
Also worked for me (on ExtJS 4.1):
Ext.getCmp('buttonId').setTooltip('Tooltip you want to insert');
Another solution without using id, for e.g. with a button tooltip:
var prev_button = new Ext.button.Button({
cls: 'prevButton',
listeners: {
mouseover: function(btn) {
btn.setTooltip('1 ' + granularity.getValue()
+ ' ' + _('before'));
}
}
});