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