9 Replies Latest reply on Jul 31, 2020 1:21 PM by acowling-Oracle

    Add Button to Card?

    Bud Endress - Oracle-Oracle

      I'm looking to add a button to a card that when clicked calls a PL/SQL procedure.  The purpose is to mark a card as a 'favorite'.  Probably simple stupid, but I haven't found an example.  If would best if if wasn't JavaScript (because I'm not a JavaScript programmer), but if the example is very simple I might be able to follow it.  As an alternative to a button I can use a text string that when clicked called a PL/SQL procedure.

        • 1. Re: Add Button to Card?
          fac586

          Bud Endress - Oracle-Oracle wrote:

           

          I'm looking to add a button to a card that when clicked calls a PL/SQL procedure. The purpose is to mark a card as a 'favorite'. Probably simple stupid, but I haven't found an example. If would best if if wasn't JavaScript (because I'm not a JavaScript programmer), but if the example is very simple I might be able to follow it. As an alternative to a button I can use a text string that when clicked called a PL/SQL procedure.

          What label/icon is going to appear on the button?

           

          Where should the button appear on the card?

           

          Is the cards region a list or a report?

           

          Does being designated a "favorite" alter the state or appearance of the card in any way (e.g. different card color/icon/initials, or the button disappears or its label/icon changes)?

           

          Is there a limit on the number of cards that can be designated as "favorites"?

          • 2. Re: Add Button to Card?
            Bud Endress - Oracle-Oracle

            Thanks for the reply.  I'm looking for something very simple.  A small button anywhere near the bottom of the card (or a text string, e.g., "Favorite").  Nothing else able the card needs to change.  All it needs to do is call a PL/SQL procedure that will flip the value in a column from 0 to 1 or 1 to 0.  That flag will be used to filter the cards displayed to the user via filter in the WHERE clause of the report. (E.g, SELECT a,b,c, FROM table WHERE is_favorite = 1.

             

            The is no limited to the number of cards that can be favorites, but in practice the universe of cards will not exceed 100.

            • 3. Re: Add Button to Card?
              fac586

              One last thing: do the cards function as links?

              • 4. Re: Add Button to Card?
                Bud Endress - Oracle-Oracle

                Yes, the cards function as links (hence I need a different mechanism for calling the PL/SQL than just clicking the card).

                 

                Again, my requirements are very modest.  Even being able to call PL/SQL by clicking on the card subtext (or something like that) would be just fine.

                 

                I'm more core database, just learning APEX, so it might appear to be a very simple question.

                • 5. Re: Add Button to Card?
                  fac586

                  I suspect that this is probably not as simple as you'd like. I've tried to minimise the JavaScript as much as possible, but to do without it completely would result in an extremely clunky user experience.

                   

                  In the report query the only modification required is to conditionally return an is-favorite class name in the CARDS_MODIFIER column:

                   

                  select
                      e.first_name || ' ' || e.last_name                            card_title
                    , j.job_title                                                   card_subtitle
                    , d.department_name                                             card_text
                    , null                                                          card_subtext
                    , case fav.is_favorite
                        when 1 then 'is-favorite'
                        else null
                      end                                                           card_modifiers
                    , '#' || e.employee_id                                          card_link
                    , null                                                          card_color
                    , null                                                          card_icon
                    , apex_string.get_initials(e.first_name || ' ' || e.last_name)  card_initials
                    , l.street_address
                    , l.city
                    , l.state_province
                    , c.country_name
                    , e.employee_id
                  from
                      oehr_employees e
                        join oehr_jobs j
                          on e.job_id = j.job_id
                        join oehr_departments d
                          on e.department_id = d.department_id
                        join oehr_locations l
                          on d.location_id = l.location_id
                        join oehr_countries c
                          on l.country_id = c.country_id
                        ...
                  where
                     ...
                  

                   

                  Then create the Add/Remove Favorite buttons by adding this code to the HTML Expression property of the CARD_SUBTEXT column. If you already have content in CARD_SUBTEXT then reference it before this using substitution references to the relevant column(s):

                   

                  <div><!-- Reference existing CARD_SUBTEXT column(s) here -->#STREET_ADDRESS#<br/>#CITY#<br/>#STATE_PROVINCE#<br/>#COUNTRY_NAME#</div>
                  <div class="card-favorite u-pullRight">
                    <button type="button" title="Add as favorite" aria-label="Add as favorite" class="add t-Button t-Button--noLabel t-Button--icon t-Button--small t-Button--noUI" data-card-id="#EMPLOYEE_ID#">
                      <span aria-hidden="true" class="t-Icon fa fa-plus-circle-o"></span>
                    </button>
                    <button type="button" title="Remove as favorite" aria-label="Remove as favorite" class="remove t-Button t-Button--noLabel t-Button--icon t-Button--small t-Button--noUI" data-card-id="#EMPLOYEE_ID#">
                      <span aria-hidden="true" class="t-Icon fa fa-minus-circle-o"></span>
                    </button>
                  </div>
                  

                   

                  Note the data-card-id attributes at lines 3 & 6. Replace the column references here with whatever unique card identifier is passed to the PL/SQL procedure.

                   

                  Add a hidden, unprotected PX_CARD_ID page item to use in passing these card ID parameters from the browser to the database.

                   

                  Display of the relevant Add/Remove button depending on whether the card is a favorite or not is controlled by a CSS style sheet. Place this in the page Inline CSS property:

                   

                  .card-favorite button.remove,
                  .is-favorite .card-favorite button.add {
                    display: none;
                  }
                  .is-favorite .card-favorite button.remove {
                    display: inline-block;
                  }
                  

                   

                  Everything else is implemented using a Click dynamic action:

                   

                  Event: Click

                  Selection Type: jQuery Selector

                  jQuery Selector: .card-favorite button

                  Client-side Condition Type: JavaScript Expression

                  JavaScript Expression: $(this.triggeringElement).hasClass('add')

                  Event Scope: Dynamic

                   

                  True Actions

                   

                  Action: Set Value

                  Set Type: JavaScript Expression

                  JavaScript Expression: this.triggeringElement.dataset.cardId

                  Affected Element Selection Type: Item(s)

                  Item(s): PX_CARD_ID

                  Fire on Initialization: Off

                   

                  Action: Execute PL/SQL Code

                  Items to Submit: PX_CARD_ID

                  Fire on Initialization: Off

                  PL/SQL Code:

                  /* Invoke PL/SQL procedure to set card as favorite */
                  

                   

                  Action: Add Class

                  Class: is-favorite

                  Selection Type: JavaScript Expression

                  JavaScript Expression: $(this.triggeringElement).closest('.t-Cards-item')

                   

                  Action: Cancel Event

                   

                   

                  False Actions

                   

                  Action: Set Value

                  Set Type: JavaScript Expression

                  JavaScript Expression: this.triggeringElement.dataset.cardId

                  Affected Element Selection Type: Item(s)

                  Item(s): PX_CARD_ID

                  Fire on Initialization: Off

                   

                  Action: Execute PL/SQL Code

                  Items to Submit: PX_CARD_ID

                  Fire on Initialization: Off

                  PL/SQL Code:

                  /* Invoke PL/SQL procedure to remove card as favorite */
                  

                   

                  Action: Remove Class

                  Class: is-favorite

                  Selection Type: JavaScript Expression

                  JavaScript Expression: $(this.triggeringElement).closest('.t-Cards-item')

                   

                  Action: Cancel Event

                  • 6. Re: Add Button to Card?
                    Bud Endress - Oracle-Oracle

                    Thank you very much.  It will take me a bit of time to work through this.  I'll like you know how I make out with this.

                    • 7. Re: Add Button to Card?
                      Veerendra Patil

                      Hi fac586,

                      Just a small question on this - (May be I am wrong

                       

                      If we have

                      <a href="url1">

                           <span onClick="url2" class="button"> </span>

                      </a>

                       

                      When I click on span button, both the links url2, and url1 are fired.. Why?

                      Should only url2 fire? or only url1 ?

                       

                      I have created an example on apex.oracle.com

                      ws - vpagmws

                      user - testuser

                      pwd - abcABC@123

                      app - 69143 - VP Test APP

                      page - 52

                       

                      Thanks

                      • 8. Re: Add Button to Card?
                        fac586

                        Veerendra Patil wrote:

                         

                        Just a small question on this - (May be I am wrong

                         

                        If we have

                        <a href="url1">

                        <span onClick="url2" class="button"> </span>

                        </a>

                         

                        When I click on span button, both the links url2, and url1 are fired.. Why?

                        The click event propagates ("bubbles") up through the ancestors of the target element, triggering any handlers for the event that exist thereon.

                        Should only url2 fire? or only url1 ?

                        It depends. Which do you want? By default both will fire, following the defined event propagation model. It's the responsibility of the developer to control and respond to event propagation according to the requirements of the application. The single most important thing in my demo above is the use of Cancel Event actions to prevent clicking the button triggering the link on the parent element.

                        • 9. Re: Add Button to Card?
                          acowling-Oracle

                          Coincidentally I just stumbled across this blog post about marking a card as a favourite which might be relevant

                           

                          http://www.laureston.ca/2019/03/29/drool-worthy-apex-cards-with-images-and-buttons/

                           

                          HTH - Andy