I would like to change the color of the Display Only text on a form depending on its value. As I read it, I have created a Dynamic Action to set it, but it doesn't work. To test it, I created a second True Action in the same place that sets the value of another item. This works, so the Action fired, but the color did not change. I tried coloring by a static value (f.e. green), but nothing changed. I have an another simple test project where this method works.
The APEX version is 21.1.6
If you check the properties of the display only item in the inspector you'll see that the actual page item has an input tag with attribute "hidden" so it is not displayed. Following the hidden element there is another tag with an element id of item_name_DISPLAY. That is where you want to set the style.
Example:
Page item "P33_DISPLAY_ONLY" of type "Display Only"
Dynamic action on change of "P33_DISPLAY"
True action of type "Execute Javascript" with code
$('#P33_DISPLAY_ONLY_DISPLAY').css({ color: "red" });
Note the id: it is P33_DISPLAY_ONLY_DISPLAY not P33_DISPLAY_ONLY
Add a client-side condition to each true action per color you want to set.
Related
I am using Oracle Apex 18.2.
I have an interactive grid and a custom button to add a new row to the IG using,
apex.region("myRegionStaticId").widget().interactiveGrid('getActions').invoke('row-add-row'); then set a column's value using, $s("myColumnStaticId","2");. When I try it, it adds the first row without setting any columns' values and starts setting the value from the second row on. Even using selection-add-row or insert-record, there is always something with the first row. Here is a sample,
[https://apex.oracle.com][1]
ws = ESLAM_WS
user = forhelp
pwd = forhelppwd
app = TEST
page = Add Row on top of an IG.
After a lot of talking and testing, I've found that $s with setTimeout isn't very reliable. I've set up page 7 again to demonstrate.
If you click the Rowaddrow button twice in rapid succession (the second time before the first setValue returns), the second row will not be initialized. I'll show you a workaround for this below, but you'll
If you lower the setTimeout to, say, 10 ms, and try focusing in the Expiry Date column before clicking the Rowaddrow button, you'll find it doesn't work. This means that, while the setTimeout of 100 ms works now, it could break in the future if the IGs internal logic changed. Unlikely but who knows.
For the moment, I would say that $s can only be reliably used to set a column value in an IG for the active row. When the row-add-row action adds a new record, it does make it active, but that is done asynchronously via setTimeout. This is because the IG is based on the flyweight pattern and there are a number of async (setTimeout based) heuristics that are built in to handle focus and blur events to correctly enable and disable rows and cells as needed.
I've found the following to be the most reliable solution. Unfortunately, it's more complex than what you had before - but it was the only way I could wrangle it all together. Feel free to use it or not. See page 8 for an example.
Right-click the custom Rowaddrow button and select Create Dynamic Action. Set the Name of the DA to rowAddRow button clicked. The When settings will automatically be configured for the click event on the button.
Select the action for the new DA. Set Action to Execute JavaScript and enter the following JavaScript in the Code attribute.
addRowClicked = true; // Global used to distinguish custom button click
this.triggeringElement.disabled = true; // Disable button to serialize access
apex.region("KITCHEN_SHARE_DTL").widget().interactiveGrid("getActions").invoke("row-add-row");
Create a new Dynamic Action and set the Name to New row initialized. In the When section, set Event to Row Initialization [Interactive Grid], Section Type to Region, and Region to KITCHEN_SHARE_DTL.
Under Client-Side Condition, set Type to JavaScript expression and enter the following code in JavaScript Expression (which ensures the DA only fires for the click of the Rowaddrow button):
addRowClicked === true
Select the action for the new DA. Set Action to Set Value, Set Type to Static Assignment, and Value to 2. In Affected Elements, set Section Type to Column(s) and Column(s) to INGREDIENT_ID. This will replace the static assignment that was being done with $s. Ensure that Fire on Initialization is disabled.
Right-click the True branch for the DA and select Create TRUE Action. Set the Action to Set Value, Set Type to SQL Statement, and enter the following code in SQL Statement:
select MIN(EXPIRY_DATE) from stock
where ingredient_id = TO_NUMBER(:INGREDIENT_ID);
Set Items to Submit to INGREDIENT_ID and disable Escape Special Characters. In Affected Elements, set Selection Type to Column(s) and Column(s) to EXPIRY_DATE. Ensure that Fire on Initialization is disabled.
Right-click the True branch for the DA and select Create TRUE Action. Set Action to Execute JavaScript Code and enter the following JavaScript in the Code attribute.
addRowClicked = false; // Unset the global
$x('ADD').disabled = false; // Enable the button
Change the following code:
$s("INGREDIENT_ID","2");
with the following one:
setTimeout(function(){ $s("INGREDIENT_ID","2"); }, 100);
It seems that the IG needs a little time to render the new row before you are able to change any value.
I have several tabs. There is a date picker on each tab. I need that date to be the same on all tabs no matter what. So, if the user changes the date on Tab 1, then goes to tab 2, the date on tab 2 will have changed also. I have never created an application level item before and I thought that might be the most efficient way to accomplish what I need (by setting that item's value to the date the user selected). My problem is that I don't know how to set the value of the application item and also how to retrieve that value on another tab.
You didn't describe what exactly you're trying to do, but - if each tab represents its own table, why do you keep the same date value in all of them? Doesn't look like a normalized data model. Consider using a single date column (in one - master - table) and use (i.e. reference) it in others (i.e. details).
As of your question: How about creating a global page (i.e. page 0) and having a date picker item on it? You can display it on any other page you want. For example, if you set its value while on tab 1 and then move on to tab 3, you can again modify that value which will be visible on all other pages. Basically, you'd maintain just one item instead of as many as number of tabs involved. (BTW, doesn't that remind you of what I described in the first paragraph?).
Alternatively, create a date picker item on tab 1 page; on all other pages, create a "lookup" (display) item which would simply display what's been selected on tab 1. That's easy to do, just make its source to be an "Item", such as P1_DATE_ITEM.
In Shared Components > Application Items create new Item called G_DATE.
Then for every datepicker add Dynamic Action on Event Change.
In True action Set Value select Type PL/SQL Expression with code
:G_DATE := :P1_DATEPICKER1;
and Items to Submit :P1_DATEPICKER1
Next in every datepicker Source set Type PL/SQL Expression with code
:G_DATE
used Always (...)
Regards
History, I am an experienced PL/SQL dev learning to use Apex and struggling with some of the concepts. Before working with PL/SQL I worked with various platforms including Delphi and VB.
Problem, how to pick up the value set in component from another component. The object of the exercise is to make the report in an interactive grid change dependant on a value selected in a drop down, the value in the drop down being in the where clause as a bind var. My original setup for this did not work. After various experiments with this I produced this test case where the object is for the label to display the value selected in the drop down:-
Page view
P300_SELECT (left) is a simple drop down, unmodified with the default values. P300_SELECTED_VALUE is a label set to display the value in P300_SELECT:-
Component setup
This does not work! And it continues not to work when I change the source setup of the label to be STATIC VALUE and set the value to &P300_SELECT.
I have also tried adding a CHANGE dynamic action on the drop down to call refresh on the label, it still does not work! In desperation to confirm that the value was indeed changing for the drop down I added a second true action to the change event executing the following javascript:
apex.message.alert($v("P300_SELECT"));
Sure enough, this works showing that the event is firing and that the value is correct:-
Label no change, but alert message works...
SO WHAT IS HAPPENING?
Why does the label not update even with a refresh called on it?
What do I have to do to make this work?
Thanks in advance for your help!
Bob
To do this
1 - Create one dynamic action to start when you change the value of P300_SELECT.
2 - Now there is a lot of ways to do this step, but I will sugest to do in this way. Create one true action in this dynamic action, this true action is "Execute PL/SQL code". The code is:
BEGIN
:P300_SELECTED_VALUE := :P300_SELECT;
END
In this true action put the item P300_SELECT in the field "Items to submit". And the item P300_SELECTED_VALUE in "Items to Return".
3 - Now create one more true action in this same dynamic action. This true action is "Refresh" and select the region of your report/IG.
***If the item P300_SELECTED_VALUE is just to test, so discard the first true action above and fill the field next of your select statement "Page items to submit" with the item P300_SELECT.
Why what you have try don't work?
1 - The source section is used to set the value when the page is loaded, this setup not affect changes after the page is loaded.
2 - The report is not refreshed because the item is not in the session after you change it.
Ex. https://apex.oracle.com/pls/apex/f?p=145797:15
Use this workspace to check something:
workspace: STACKQUESTIONS
user: test
password: test
app: 145797
page: 15
login on: https://apex.oracle.com/pls/apex/f?p=4550
I'm using Application Express to build a page with a form that shows all the rows in Table A. Table A has to contain all the values from Table B that have a specific "Status".
I'm looking for a way to update Table A so that new rows with the correct status from Table B are added to Table A.
Is there a way to add a button to the page that inserts into Table A those rows? I have no problems with coding the query itself, but on Apex' Page Designer, when I add a button (which I called Refresh) to the page, I can't find a place to add the Insert Query.
Any tips?
there are several ways to do what you need, the simplest one would be to bind a dynamic action to the click event on the button.
On the button definition go to "Action when button clicked" region and on the action field select "Defined by dynamic action"
On execute validations choose "No"
Then, back on the page definition, create a dynamic action, on Event choose "Click", on Selection type choose "Button" this will make a field named button appear whit a list of the available buttons to choose.
In condition you can define a true/false evaluation. if so then you would be able to define actions to execute in both cases, if you leave it empty ("No condition") then all the actions defined will be executed.
Once defined click next and here you decide the action type, the one you need is "Execute PL/SQL Code", which will show a text field on which you can paste your code, and the parameters needed from the page.
finally you can specify if the action will have a repercussion on any kind of visual component on the page, this is for efficiency, but is not necessary.
That would be all, once created, when you click the button the code will be executed on the server.
here is jsbin http://emberjs.jsbin.com/wumufifasu/edit?html,js,output with input where it is possible to enter id of the item and its text will be displayed nearby.
But there are two items with same "id" property and thus to display correct text they can be selected from the list on the bottom.
With "manual selection" itemId is changed only once - very first time , afterwards it's not set and subsequently "itemText" CP which observes itemId is not triggered.
The weird thing is that this effect is caused by setting value for "itemText" CP, and doesn't occur when this.setProperties({'itemId': item.id, 'itemText': item.text}); is replaced with this.setProperties('itemId', item.id);
Why's that?
A property cannot be both a computed property and also one that you set. If you set what was a computed property, the value you set destroys the computed property definition. The property becomes a simple value. You have to decide: do you want Ember to compute the property, or do you want to set it yourself?
(Actually, there is a notion of setting a computed property. But it requires writing the computed property definition in a special way. You don't need that here. If you interested in this feature, see http://guides.emberjs.com/v1.10.0/object-model/computed-properties/#toc_setting-computed-properties).
The problem is, you are using duplicate IDs--not a good idea. When the user clicks on one of the items, you pass the item itself as the parameter to the action, but from the ID of the item, since there are duplicate IDs, in the controller action you no longer have any way to find the correct item from the ID. I would suggest adding an index parameter to the loop, then passing that back as the action parameter.
By the way, why are you defining items in your component? It duplicates the items used as the model. You should pass the model into the component.
See http://emberjs.jsbin.com/likazerune/1/edit?html,js,output.
For ember 2/3 You can preserve computation by usng get and set method directly:
...
yourProperty: computed('propertyForComputation', {
get(key) {
// logic here
},
set(key, value) {
// logic here
},
}),
...