ADF create form with combo box - customization

I'm starting with Oracle ADF and JDeveloper. I'm doing some basic tutorials first.
From the HR database schema, I'm trying this exercise: create a new location, but in CountryId attribute, show all countries list.
This is more user-friendly, so the user can select Italy instead of typing IT .
For this, I'm doing this steps:
In Locations view , choose CountryId attribute and create a LOV. This one must read from CountriesView1, with value CountryId attribute, and show CountryName attribute.
Drop LocationsView1 in a page and select ADF Form.
Select CountryId as a combo box.
Drop Create operation from LocationsView1 as a button.
Drop Commit operation as a button.
When running this page, I see all country names, but when I choose one of them, it does not show me it as selected, and, when commit the new data, CountryId is inserting with null value.
Obviously, I'm doing something in a wrong way. How can I do this simple form, with CountryId as a list?
Can anyone help me, please?
Thanks in advance. Best regards
EDIT: code of dataEntry.jspx
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1" binding="#{backingBeanScope.backing_dataEntry.d1}">
<af:messages binding="#{backingBeanScope.backing_dataEntry.m1}" id="m1"/>
<af:form id="f1" binding="#{backingBeanScope.backing_dataEntry.f1}">
<af:panelStretchLayout id="psl1"
binding="#{backingBeanScope.backing_dataEntry.psl1}">
<f:facet name="center">
<af:panelFormLayout binding="#{backingBeanScope.backing_dataEntry.pfl1}"
id="pfl1">
<af:panelFormLayout binding="#{backingBeanScope.backing_dataEntry.pfl2}"
id="pfl2">
<af:inputText value="#{bindings.LocationId.inputValue}"
label="#{bindings.LocationId.hints.label}"
required="#{bindings.LocationId.hints.mandatory}"
columns="#{bindings.LocationId.hints.displayWidth}"
maximumLength="#{bindings.LocationId.hints.precision}"
shortDesc="#{bindings.LocationId.hints.tooltip}"
binding="#{backingBeanScope.backing_dataEntry.it1}"
id="it1">
<f:validator binding="#{bindings.LocationId.validator}"/>
<af:convertNumber groupingUsed="false"
pattern="#{bindings.LocationId.format}"/>
</af:inputText>
<af:inputText value="#{bindings.StreetAddress.inputValue}"
label="#{bindings.StreetAddress.hints.label}"
required="#{bindings.StreetAddress.hints.mandatory}"
columns="#{bindings.StreetAddress.hints.displayWidth}"
maximumLength="#{bindings.StreetAddress.hints.precision}"
shortDesc="#{bindings.StreetAddress.hints.tooltip}"
binding="#{backingBeanScope.backing_dataEntry.it2}"
id="it2">
<f:validator binding="#{bindings.StreetAddress.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.PostalCode.inputValue}"
label="#{bindings.PostalCode.hints.label}"
required="#{bindings.PostalCode.hints.mandatory}"
columns="#{bindings.PostalCode.hints.displayWidth}"
maximumLength="#{bindings.PostalCode.hints.precision}"
shortDesc="#{bindings.PostalCode.hints.tooltip}"
binding="#{backingBeanScope.backing_dataEntry.it3}"
id="it3">
<f:validator binding="#{bindings.PostalCode.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.City.inputValue}"
label="#{bindings.City.hints.label}"
required="#{bindings.City.hints.mandatory}"
columns="#{bindings.City.hints.displayWidth}"
maximumLength="#{bindings.City.hints.precision}"
shortDesc="#{bindings.City.hints.tooltip}"
binding="#{backingBeanScope.backing_dataEntry.it4}"
id="it4">
<f:validator binding="#{bindings.City.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.StateProvince.inputValue}"
label="#{bindings.StateProvince.hints.label}"
required="#{bindings.StateProvince.hints.mandatory}"
columns="#{bindings.StateProvince.hints.displayWidth}"
maximumLength="#{bindings.StateProvince.hints.precision}"
shortDesc="#{bindings.StateProvince.hints.tooltip}"
binding="#{backingBeanScope.backing_dataEntry.it5}"
id="it5">
<f:validator binding="#{bindings.StateProvince.validator}"/>
</af:inputText>
<af:inputListOfValues id="countryIdId"
popupTitle="Search and Select: #{bindings.CountryId.hints.label}"
value="#{bindings.CountryId.inputValue}"
label="#{bindings.CountryId.hints.label}"
model="#{bindings.CountryId.listOfValuesModel}"
required="#{bindings.CountryId.hints.mandatory}"
columns="#{bindings.CountryId.hints.displayWidth}"
shortDesc="#{bindings.CountryId.hints.tooltip}"
binding="#{backingBeanScope.backing_dataEntry.countryIdId}">
<f:validator binding="#{bindings.CountryId.validator}"/>
</af:inputListOfValues>
<af:commandButton actionListener="#{bindings.Create.execute}"
text="Create"
disabled="#{!bindings.Create.enabled}"
binding="#{backingBeanScope.backing_dataEntry.cb1}"
id="cb1"/>
<af:commandButton actionListener="#{bindings.Commit.execute}"
text="Commit"
disabled="#{!bindings.Commit.enabled}"
binding="#{backingBeanScope.backing_dataEntry.cb2}"
id="cb2"/>
</af:panelFormLayout>
</af:panelFormLayout>
<!-- id="af_one_column_stretched" -->
</f:facet>
</af:panelStretchLayout>
</af:form>
</af:document>
</f:view>
<!--oracle-jdev-comment:auto-binding-backing-bean-name:backing_dataEntry-->
</jsp:root>

Well, I did it!
The steps are:
Drop LocationsView1 in a page and select ADF Form...
Drop Create operation from LocationsView1 as a button.
Drop Commit operation as a button
Remove CountryId input text
(Re)Drop CountryId from LocationsView1. When JDeveloper asks, choose Select One
Choice...
In Bindings section, select CountryId and edit (pen icon)
Choose Dynamic List radio button and CountriesView1 in
ListDataSource combo
Match CountryId from Data Value with CountryId List attribute. Select CountryName in the below section.
Well, finally, all countries from COUNTRIES table are listed, and data are inserted into LOCATIONS table.
I hope this will be useful.
Regards

Related

Oracle Apex 22.21 - Chart Page - Bar Type - How to return a range of date values based on user input

I have a table ORDERS which contains column ORDER_DATE. I have created a Chart as a Bar type.
Right now, the chart returns all the orders because I did not specify a Maximum Rows. The date on the x-axis and the number of orders on the y-axis.
How can I add a form for the user to select a range of dates and return only the values for those dates?
Example:
Doesn't necessarily have to be a calendar. A dropdown is fine as well. Or even a 'text' input since that is the easiest way.. I just need to know how to go about creating this feature. Your help is appreciated. Thank you.
First create a page item as date picker or some other plugin you already have to let users select a date or date range. (make sure that when user selects a date, the page item value is set by using a dynamic action or by a setting that your plugin has (set item value after selection kind of setting) )
Then create a new view with the source of your ORDERS table but it should have a where statement as it filters records by your page item such as:
select count(1)
from ORDERS
where order_date between :P1_DATE_FROM and :P1_DATE_TO
Set the source of the chart to this new view.
After user sets a value, refresh the chart by a dynamic action if it is not refreshed automatically.
In summary, the idea is to make your chart's source filtered by page items that users can change. Then refreshing the chart so that the new page item values are effective.

Get ID from a Row in a Interactive Report

I have an Interactive Report. The Interactive Report is in a form. There are images and other columns, like the ID, in the Report. How can I get the ID of the selected Row and store it in a Page Item?
This is an example based on the "emp" table in the emp/dept dataset. Functionality: when user clicks on an employee name, the empno of that user is set in page item P44_ITEM.
IR source:
select EMPNO,
ENAME,
JOB,
MGR,
HIREDATE,
SAL,
COMM,
DEPTNO
from EMP
There is a page item P44_ITEM that should be set to the EMPNO when the column ename is clicked in the report.
In the report, set the attribute "Column Formatting > HTML Expression" for the column "ENAME" to value <div class="sel-ename" data-empno="#EMPNO#">#ENAME#</div>. Explanation: wrap a div around the text, and add a class "sel-ename" to the cell and a "data-" attribute containing the empno value for the current row.
Create a dynamic action:
Event: Click
Selection Type: jQuery Selector
jQuery Selector: .sel-ename
Create a true action for the dynamic action
Action: Set Value
Set Type: javascript Expression
this.triggeringElement.dataset['empno']
Affected element P44_ITEM
Save and run.

Oracle Apex Dynamic action not working for form items

I have a form with items P1_APP and P1_USER.
P.S. P1_USER is select list.
Display John
Return 1
Display Andy
Return 2
I need to disable when user selects John.
When P1_USER = 'John', P1_APP should get disabled which is a multi select list.
I created dynamic action on P1_APP, True Action= Disable,Affected element P1_APP
Client condition : Item =Value
Item= P1_USER
Value= John
However this is not working.
I have used similar logic to disable interactive grid items and was able to do so. Why is this not working for form?
EDIT: In Value now i am putting 1 which is return value for John.
However when i select John. It disables P1_App upon clicking. But remains disabled even when i choose Andy.
This works for me using the following configuration.
Create form and report on EMP - everyone has access to that sample data, it is a good idea to post questions based on that.
In the form P3_DEPTNO is a select list with source
SELECT d.dname, d.deptno FROM dept d
Add a page item to my form P3_APP. This is a select list with "Allow multi selection" enabled. Select list has 2 static values.
Create a dynamic action on change of P3_DEPTNO.
Client side condition: Item = Value
Item: P3_DEPTNO
Value: 30 (note that this is the return value for SALES, not display value)
add true action of "Disable", affected item P3_APP
Click true action and select "Create Opposite Action". Save.
When I run this it work. Selecting SALES in the select list disables the item P3_APP and selecting something else enables it.

Conditional Formatting based on a dropdown in another sheet

I have a Query function in Sheet2 which is based on a dropdown selection in cell I11 of Sheet1. In the Sheet2 Query, I want to automatically highlight the name selected in the Sheet1 dropdown. Per my example below, if 'New Zealand' is selected in the dropdown I want New Zealand to be highlighted like this:
I have tried MATCH, EXACT, INDIRECT and combinations of these but cannot get any to work. I would really appreciate some help.
on range A2:F use this custom formula:
=COUNTIF(A2, INDIRECT("Sheet1!I11"))
or:
=REGEXMATCH(LOWER(A2), LOWER(INDIRECT("Sheet1!I11")))

How to only display 'Edit' link on certain rows on apex interactive grid?

I have an interactive report apex5.0 which contains several fields.
Would like to disable 'edit' pencil option link where payment_date & code is populated.
Link is to be enabled only where payment_date & code is null.
Disable the edit button for a particular row, based on a specific value in its column.
For ex. If a grid has 3 columns A,B,C and if B contains "Apple", and '01-jan-17', the edit button for that row must be disabled.
What are the different options to do this kind of functionality in apex5.0, enable & disable "EDIT" based on certain criteria?
You could also add a case statement to your report's query.
E.g.
(Case when [some logic] then
--display link
'<img src="#IMAGE_PREFIX#menu/pencil16x16.gif" alt="" />'
End) as col_link
The above example will only display a link if the case statement is met. The link will point to page 47 and we will pass the query's Id column to page 47's item P47_ID
In order to treat this new column as a link you must change the "display as text" property to "standard report column"; you can achieve this when editing the report attributes.
One way is to use JavaScript on page load:
Let's asume that first column is with ID and used to show edit link. Second column is your product name like Apple. Just disable click on this element(cell with ID) or change link, img etc.
var table = $(".a-IRR-table tbody");
table.find('tr').each(function (i, el) {
var $tds = $(this).find('td'),
productId = $tds.eq(0).text(), //first column with ID and edit link
product = $tds.eq(1).text(), //second column
Quantity = $tds.eq(2).text(); //third column
if (product == 'Apple'){
$tds.eq(0).click(false);
$tds.eq(0).replaceWith('');
}
});
Thanks to this answer for JavaScript: Loop Through Each HTML Table Column and Get the Data using jQuery
EDIT:
To hide value based on your Query use CASE. For example:
SELECT
CASE
WHEN B = 'Apple' THEN
'<img src="#IMAGE_PREFIX#edit.gif" alt="">'
ELSE ''
END edit_link,
A,B,C
FROM TABLE_NAME
Click on column edit_link and make it of type Link
Choose your target to edit page
For link text select #EDIT_LINK#
Escape special characters must be set to NO
On Report Atributes set **Link Column** to **Exclude Link Column** (you have custom link column so don't display original link)
*Check your online workspace, page 3*