6 Replies Latest reply: Aug 27, 2012 1:01 PM by 587981 RSS

    How to disable af:showDetail?

    587981
      We need to disable af:showDetail component. However, af:showDetail does not provide any "disable" property. I tried disabling it using JavaScript as described here for af:commandButton using the "unsecure" property - http://docs.oracle.com/cd/E15523_01/web.1111/b31973/af_arch.htm#CBHEAHEJ

      I tried the following code to disable af:showDetail, but it does not disable it. Any ideas how to disable af:showDetail?

      JSFF code fragment:

      <af:showDetail disclosed="false" id="upldShowDynLayout" unsecure="disabled" clientComponent="true">
      ...
      </af:showDetail>


      JavaScript code fragment:

      showDetailPanel.setProperty('disabled', true);
        • 1. Re: How to disable af:showDetail?
          Navaneetha Krishnan Nataraj
          You can cancel the disclosure event when the user discloses it.
          Can you try this?
          <?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">
                <af:resource type="javascript">
                  function onDisclosure(event) {
                      event.cancel();
                  }
                </af:resource>
                <af:form id="f1">
                  <af:showDetail disclosed="false" id="sd1">
                    <af:outputText value="outputText1" id="ot1"/>
                    <af:clientListener type="disclosure" method="onDisclosure"/>
                  </af:showDetail>
                </af:form>
              </af:document>
            </f:view>
          </jsp:root>
          Thanks,
          Navaneeth
          • 2. Re: How to disable af:showDetail?
            587981
            Thanks Navaneeth. I tried that in managed bean, and it prevents the user from expanding the show details. But it does not look disabled - it does not gray out the icon used to expand the show details. So the user might still end up clicking on it. I could gray out the show details disclosure text. Is it possible to gray out the icon used to expand it?
            • 3. Re: How to disable af:showDetail?
              Navaneetha Krishnan Nataraj
              Why cannot you use visible property to show conditionally the showDetail?

              Thanks,
              Navaneeth
              • 4. Re: How to disable af:showDetail?
                587981
                We have both use cases - to hide it when it is not applicable, and to disable it when it is applicable but not available until a row is added in a list.
                • 5. Re: How to disable af:showDetail?
                  vinod_t_krishnan
                  you may try to use this css
                  af|showDetail::disclosed-icon af|showDetail::undisclosed-icon{
                  display : none;
                  }
                  • 6. Re: How to disable af:showDetail?
                    587981
                    I could disable the af:showDetail link and change the icon using "disabled" CSS style class shown below. I could disable and enable the af:showDetail component by setting the style class to "disabled" or empty string in managed bean. Thanks for your replies.

                    af|showDetail::undisclosed-icon
                    {
                    content:url(/resources/wcc/images/disclosure_undisclosed_ena.png);
                    width: 11px;
                    height: 11px;
                    }

                    af|showDetail::disclosed-icon
                    {
                    content:url(/resources/wcc/images/disclosure_disclosed_ena.png);
                    width: 11px;
                    height: 11px;
                    }

                    af|showDetail.disabled af|showDetail::icon-container
                    {
                    background-image: url(/resources/wcc/images/disclosure_undisclosed_dis.png);
                    background-repeat: no-repeat;
                    background-position: 5px 2px;
                    }

                    af|showDetail.disabled af|showDetail::disclosure-link
                    {
                    visibility: hidden;
                    }

                    af|showDetail.disabled af|showDetail::header-text
                    {
                    color: #BBB;
                    }