I am unable to delete any row in my interactive report.
Steps: Create new interactive report page.
Create page item P400_EMPLOYEE_ID referring to PK employee_id and set to hidden.
For the virtual column 'del', properties are:
Type: link
URL: javascript:void(null);
Link Text:
Link Attributes: data-id=#EMPLOYEE_ID#
Create Dynamic Action option:
Name: DA_DELETEROW
Event: Click
Selection Type: jQuery Selector
jQuery Selector: .delete-irrow
Event Scope: Dynamic
right-click on the Dynamic Action DA_DELETEROW and select Create True Action :
Action: Confirm
Text: Are you sure to delete this employee?
2nd true action:
Action: Set Value
Set Type: JavaScript Expression
JavaScript Expression: $(this.triggeringElement).parent().data('id')
Selection Type: Item(s)
Item(s): P400_EMPLOYEE_ID
3rd true action:
Action: Execute PL/SQL Code
PL/SQL Code: Delete from employee_leave where employee_id= :P400_EMPLOYEE_ID;
Items to Submit: P400_EMPLOYEE_ID
Last true action set as refresh the region.
Despite this, i can see the delete button but unable to delete any row.
It just refreshes the page on delete and no row is deleted from report or table.
Please help!!!!!!
Why are you trying to remove a row from the Interactive Grid using dynamic actions? Wouldn't it be simpler to delete the row from the database and refresh the Interactive Report?
Related
I have an interactive grid in APEX page under same region I have created an Item: "P300_ADD_MODIFY_REASON".
I want to put a validation for that item, which when I did with a PLSQL expression (:P300_ADD_MODIFY_REASON is not null) and Server side condition in validation for Item is null. It is working when I do modification in report and add reason but it doesn't work if I miss to add reason and do modification later, post then when I add reason it gives error. To resolve it I have do some change in report with added reason then it works.
What I understand is, that item which holds value doesn't capture in validation when I try to save page 2nd time.
I am sure there should be some other method to put validation on Item as with column I am able to.
TIA
The issue is that the "Save" button of the interactive grid is used. That will just cause a submit of the interactive grid region, not a full page submit.
The fastest workaround is to create an additional button on the page that submits the page and hide the default save button on the IG. This will also submit the interactive grid changes and submit the page item P4_NEW which will then fire the validation.
To hide the default save button on the interactive grid (since that shouldn't be used), set the IG Region > Attributes > Initialization JavaScript Function to
function (config)
{
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup = toolbarData.toolbarFind( "actions2" );
//Hide save button
toolbarGroup.controls.splice(toolbarGroup.controls.indexOf("save"),1);
config.toolbarData = toolbarData;
return config;
}
A cleaner solution is to remove the original "Save" button from the interactive grid and add a new "Save" button with a custom action to submit the page. For that use the following Initialization Javascript Function instead of the one above:
function (config)
{
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup2 = toolbarData.toolbarFind( "actions2" );
//Hide original save button (last array element)
toolbarGroup2.controls.pop();
// Add new button with page submit action
toolbarGroup2.controls.push(
{
type: "BUTTON",
label: "Save",
action: "save",
//icon: "icon-ig-save",
iconBeforeLabel: true,
hot: true,
action: "custom-ig-save"
});
config.initActions = function( actions ) {
actions.add( {
name: "custom-ig-save",
action: function(event, focusElement) {
apex.submit('SAVE');
}
});
}
config.toolbarData = toolbarData;
return config;
}
Our team is using chart.js to present the result of benchmark test per each Github commit.
You can see the attached graph for your information.
We are thinking if it is possible to change those commit hash into HTML link, so that users can click on it and redirect to corresponding Github commit.
We have tried to pass HTML tag into label attribute as below but it still doesn't work.
$.each(data, function (key, val) {
barChartData.labels.push('<a href={github_link}>'+key+'</a>');
...
})
new Chart(ctx, {
type: 'bar',
data: barChartData,
options: { ... }
})
Does anyone know how to make it into a link in x-axis instead of displaying those commit hashes as plain text?
I have created the following button for an interactive grid (IG) using JavaScript Initialization Code in the IG attributes section.
function(config) {
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
lastToolbarGroup = toolbarData.toolbarFind("actions4"),
assembleButton = {
type: "BUTTON",
hot: false,
icon: "fa fa-send u-info-text",
iconBeforeLabel: true,
action: "assemble-as"
};
lastToolbarGroup.controls.push( assembleButton );
config.toolbarData = toolbarData;
// this is how actions are added
config.initActions = function(actions) {
actions.add({
name: "assemble-as",
label: "Assemble as ...",
action: function(event, focusElement) { apex.event.trigger("#hiddenAssembleAsButton", "hidden_assemble_as_button_click"); }
});
}
return config;
}
Then I created the hiddenAssembleAsButton using that name as the Static ID under advanced.
The button is defined by a dynamic action Hidden_Assemble_As_Button_Click which is where I think I should be able to redirect the page, but I'm not sure.
It seems like the page redirect should happen in the jQuery Selector but I don't know what to put there or if that's the correct area to add the code.
I can add images if necessary but I feel like I've described this pretty well.
Sometimes, you need a button somewhere in the interactive grid, but you still like to use the declarative options APEX provides with basic buttons, like doing all the stuff like passing variable values, calculating checksums or opening a dialog when your target page is a model page. This can be difficult in pure javascript.
In this case, you can also just create a basic button, set it up all the way you like in the designer, then hide it using Advanced --> Custom Attributes: style="display:none". Also, set a static ID like button1.
Then, in your action, you can simply trigger a click on the button.
actions.add({
name: "assemble-as",
label: "Assemble as ...",
action: function(event, focusElement) { $('#button1').click(); }
});
Clicking the button does something. It triggers an event called hidden_assemble_as_button_click binded to an id #hiddenAssembleAsButton. You want it to redirect. The simplest option is to do the redirect right in that code. Replace the actions.add block with this one:
actions.add({
name: "assemble-as",
label: "Assemble as ...",
action: function(event, focusElement) { window.location.href = "http://www.stackoverflow.com"; }
});
I have a form which has a select field (your color). In front of the select field, I have a button that produces a popup which allows users to create new color before they submit. I am submitting that color form via Ajax. After adding a new color to the database, the popup closes.
I want the newly added color to show in the select list without reloading the page.
Is this possible?
I think you can do this by the same ajax where the success triggers. Code below may help a little :
$(".submit").click(function () {
$.ajax({
url: 'url where your view waits',
data: {
'post': "your data on post",
},
type: 'post',
cache: false,
success: function (data) {
// here you can do DOM manipulation add new object to the list.
// You can also get data from backend in json format an then
// add it to your DOM.
},
});
});
I hope this helps.
I am using a tab panel (Ext.tab.Panel) that has 4 tabs and on one of the child screens when the user make a selection from a radio button group, I would like the tab panel to refresh itself (i.e. load new text, new icons). How can I force the tab Panel (which is the core navigational element of the app) to refresh?
I have tried setting the show: function() { } method on the view as follows:
Ext.define('MyApp.view.Main', {
extend: 'Ext.tab.Panel',
...
show: function() {
this.callParent();
... reload stuff
}
});
The tabs/icons in a Ext.tab.Panel make up the items property of the component. To change these tabs/icons you must change the items.
Use setItems(items) to effectively change the tabs/icons of the Ext.tab.Panel inside your listener.
var tabpanel = Ext.getCmp('tabpanelid'); // Get appropriate panel using its id
// Removes the current tabs, and inserts the following 2 tabs
tabpanel.setItems([
{
title: 'Tab1',
iconCls: 'info',
html: 'Foo'
},
{
title: 'Tab2',
iconCls: 'reply',
html: 'Bar'
}
);
Check out a working example here.
UPDATE: To modify one of the current items, use getItems(), modify the appropriate items, and call setItems(items).
Updated Example