Issue regarding Progress Indicator on table row selection

Question

Hi Team,
I have overridden onSelectionListener on a table. On click of any record in the table I am performing some operation which takes few seconds to execute. So, I have to show a processing bar on click of any records in the table till the execution completes. I have added a .gif image as the progress Indicator and referring this in the client attribute of the output text in the columns in the table.
--Code added for the output text in table column
<af:column sortProperty="#{bindings.XxqaSSCOrderInfoRO11.hints.TagNumber.name}"
sortable="false" headerText="#{emqacerts_uiBundle.TAG_NUMBER}" id="c9"
filterable="true" align="center"
inlineStyle="#{row.sn_status eq 'PRINT'?'background-color:#c4ff94;' : row.sn_status eq 'DRAFT'? 'background-color:#ffefa3;':'background-color:#ffffff;'}">
<af:inputText value="#{row.bindings.TagNumber.inputValue}"
label="#{bindings.XxqaSSCOrderInfoRO11.hints.TagNumber.label}"
required="#{bindings.XxqaSSCOrderInfoRO11.hints.TagNumber.mandatory}"
columns="#{bindings.XxqaSSCOrderInfoRO11.hints.TagNumber.displayWidth}"
maximumLength="#{bindings.XxqaSSCOrderInfoRO11.hints.TagNumber.precision}"
shortDesc="#{bindings.XxqaSSCOrderInfoRO11.hints.TagNumber.tooltip}"
id="it6" clientComponent="true">
<f:validator binding="#{row.bindings.TagNumber.validator}"/>
<af:clientAttribute name="loadingIndicatorId"
value="#{backing_Pages_MainPage.loadingIndicatorId}"/>
<af:clientListener method="showWhenBusy" type="click"/>
</af:inputText>
</af:column>--Code in the backing bean
public void setLoadingBox(RichPanelBox loadingBox) {
this.loadingBox = loadingBox;
public RichPanelBox getLoadingBox() {
return loadingBox;
public String getLoadingIndicatorId() {
return getLoadingBox().getClientId(FacesContext.getCurrentInstance());
}--Code in the jsff page for the image
<af:panelBox text="#{emqacerts_uiBundle.PROCESSINGPLEASEWAIT}" id="pb10" clientComponent="true"
binding="#{backing_Pages_MainPage.loadingBox}" inlineStyle="display:none;"
titleHalign="center" background="dark" showDisclosure="false" ramp="highlight">
<af:panelGroupLayout id="pgl5" layout="horizontal" halign="center">
<af:spacer width="60" height="10" id="s1"/>
<af:image source="/images/progress.gif" id="i1"/>
</af:panelGroupLayout>
</af:panelBox>--JavaScript
<af:resource type="javascript">
//Global variable to hold the component ref.
var loadingIndicatorComponent;
function showWhenBusy(event) {
//get the dialog or other component we want to show and hide
var componentId = event.getSource().getProperty('loadingIndicatorId');
loadingIndicatorComponent = AdfPage.PAGE.findComponent(componentId);
if (loadingIndicatorComponent != null) {
AdfPage.PAGE.addBusyStateListener(loadingIndicatorComponent, handleBusyStateCallback);
event.preventUserInput();
else {
AdfLogger.LOGGER.logMessage(AdfLogger.SEVERE, "Requested indicator compoenent not found");
function handleBusyStateCallback(event) {
if (loadingIndicatorComponent != null) {
// Check is this is a dialog as
// this needs different treatment
var isDialog = (loadingIndicatorComponent.getComponentType() == "oracle.adf.RichPopup");
if (event.isBusy()) {
if (isDialog) {
loadingIndicatorComponent.show();
else {
loadingIndicatorComponentId = AdfAgent.AGENT.getElementById(loadingIndicatorComponent.getClientId());
loadingIndicatorComponentId.style.display = "inherit";
else {
if (isDialog) {
loadingIndicatorComponent.hide();
else {
loadingIndicatorComponentId = AdfAgent.AGENT.getElementById(loadingIndicatorComponent.getClientId());
loadingIndicatorComponentId.style.display = "none";
AdfPage.PAGE.removeBusyStateListener(loadingIndicatorComponent, handleBusyState);
</af:resource>My problem is, if I click on any record in the table for first time, progress bar is not displayed. But from second click of any record, it starts displaying.
If anyone has any idea on this then please let me know what the issue is.
Thanks in advance,
Kavitha

Answer 1

Hi John,
Thanks for your quick reply. I tried using af|statusIndicator component. But this doesnt disable the components on the page while the server is busy.
Is there any way to disable the page/make the page read only when the processing is happening ?
Thanks in advance,
Kavitha