4 Replies Latest reply on Jan 17, 2019 11:21 AM by fac586

    How to get current record's column value - classic report(card template)

    Eslam_Elbyaly

      Hi,

      Apex 18.2.

      I have a classic report(card) based on...

      select ITEM.ID as ID,
          ITEM.NAME as CARD_TEXT,
      '<a href="#" class="ig-link"> <img src="'||apex_util.get_blob_file_src('P3_IMG',ID)||'" /> </a>' AS "CARD_TITLE",
      --DBMS_LOB.GETLENGTH(IMG) as "CARD_TITLE",
          ITEM.FILENAME as FILENAME,
          ITEM.MIME_TYPE as MIME_TYPE,
          ITEM.LAST_UPDATED as LAST_UPDATED,
          ITEM.CHARACTER_SET as CHARACTER_SET 
       from ITEM ITEM
      WHERE ITEM.ID = NVL(:P8_ITEM_ID, ITEM.ID)
      

       

      I need to get the "ID" value of the record that have the image clicked to set the value of a cell in the interactive grid besides it.

      I can set values of IG but can not get the value of the classic report record.

      Workspace= MY_WS

      user= forhelp

      password= forhelppwd

      app= POS

      page= 8

        • 1. Re: How to get current record's column value - classic report(card template)
          Scott Wesley

          Modified SQL, adding data-id attribute

          '<a href="#" data-id="'||id||'" class="ig-link">
          

           

          Modified 'Refresh Region' dynamic action, changed Set Value to JavaScript Expression

          $(this.triggeringElement).data('id')
          

           

          Which populates this item

          Is this what you were attempting?

          • 2. Re: How to get current record's column value - classic report(card template)
            fac586

            Eslam_Elbyaly wrote:

             

            Apex 18.2.

            I have a classic report(card) based on...

            1. selectITEM.IDasID,
            2. ITEM.NAMEasCARD_TEXT,
            3. '<ahref="#"class="ig-link"><imgsrc="'||apex_util.get_blob_file_src('P3_IMG',ID)||'"/></a>'AS"CARD_TITLE",
            4. --DBMS_LOB.GETLENGTH(IMG)as"CARD_TITLE",
            5. ITEM.FILENAMEasFILENAME,
            6. ITEM.MIME_TYPEasMIME_TYPE,
            7. ITEM.LAST_UPDATEDasLAST_UPDATED,
            8. ITEM.CHARACTER_SETasCHARACTER_SET
            9. fromITEMITEM
            10. WHEREITEM.ID=NVL(:P8_ITEM_ID,ITEM.ID)

            I need to get the "ID" value of the record that have the image clicked to set the value of a cell in the interactive grid besides it.

            I can set values of IG but can not get the value of the classic report record.

            Workspace= MY_WS

            user= forhelp

            password= forhelppwd

            app= POS

            page= 8

             

            Switch the report to use a copy of the Cards template that has support for custom attributes (the List implementation of the Cards patterns has this—I have no idea why it should be missing from the report template):

             

            <li class="t-Cards-item #CARD_MODIFIERS#" #CARD_ATTRIBUTES#>
              <div class="t-Card">
                  <div class="t-Card-icon u-color #CARD_COLOR#"><span class="t-Icon fa #CARD_ICON#"><span class="t-Card-initials" role="presentation">#CARD_INITIALS#</span></span></div>
                  <div class="t-Card-titleWrap"><h3 class="t-Card-title">#CARD_TITLE#</h3><h4 class="t-Card-subtitle">#CARD_SUBTITLE#</h4></div>
                  <div class="t-Card-body">
                    <div class="t-Card-desc">#CARD_TEXT#</div>
                    <div class="t-Card-info">#CARD_SUBTEXT#</div>
                  </div>
                  <span class="t-Card-colorFill u-color #CARD_COLOR#"></span>
              </div>
            </li>
            

             

            Get the required data in the report query (cleaned up with proper separation of concerns):

             

            select
                i.id                                        id
              , i.name                                      name
              , i.price                                     price
              , null                                        card_modifiers
              , null                                        card_attributes
              , null                                        card_link
              , null                                        card_icon
              , null                                        card_initials
              , apex_util.get_blob_file_src('P3_IMG', i.id) card_title
              , null                                        card_subtitle
              , i.name                                      card_text
              , i.price                                     card_subtext
            from
                item i
            where
                i.id = nvl(:p588_item_id, i.id)
            

             

            Inject data attributes into the rendered report mark-up using an HTML Expression on the CARD_ATTRIBUTES column:

             

            data-id="#ID#" data-name="#NAME#" data-price="#PRICE#"
            

             

            Display the item image using another HTML Expression on the CARD_TITLE column:

             

            <img src="#CARD_TITLE#" alt="">
            

             

            This removes the custom link element, enabling the entire card to be used as a clickable target. The jQuery selector on the card Click dynamic action changes to #items li to reflect this.

             

            The JavaScript code executed by the Click action now has access to the data associated with the selected card. This dataset can be returned using the jQuery .data() method and passed as an object to the function that adds items to the interactive grid:

             

            var itemData = $(this.triggeringElement).data();
            addItem(itemData);
            

             

            That function can extract the attribute values from the object and assign them to grid columns:

             

            function addItem (item){  
                //insert new record on a model  
                var myNewRecordId = model.insertNewRecord();  
              
                //get the new record  
                var myNewRecord = model.getRecord(myNewRecordId);  
              
                //update record values  
                model.setValue(myNewRecord, "ITEM_ID", item.id);  
                model.setValue(myNewRecord, "PRICE", item.price);  
                model.setValue(myNewRecord, "ITEM_NAME", item.name);  
            }  
            

             

            See demonstration on page 588 of your application.

            1 person found this helpful
            • 3. Re: How to get current record's column value - classic report(card template)
              Eslam_Elbyaly

              Switch the report to use a copy of the Cards template that has support for custom attributes (the List implementation of the Cards patterns has this—I have no idea why it should be missing from the report template):

              Words I do not understand, ...

              1- List implementation.

              2- "Cards patterns".

               

              - I think you mean "data-*" with "custom attributes", right?

              - Can you attach a pic for a template that supports custom attributes you are referring to?

               

              Get the required data in the report query (cleaned up with proper separation of concerns):

              1. select 
              2.     i.id                                        id 
              3.   , i.name                                      name 
              4.   , i.price                                     price 
              5.   , null                                        card_modifiers 
              6.   , null                                        card_attributes 
              7.   , null                                        card_link 
              8.   , null                                        card_icon 
              9.   , null                                        card_initials 
              10.   , apex_util.get_blob_file_src('P3_IMG', i.id) card_title 
              11.   , null                                        card_subtitle 
              12.   , i.name                                      card_text 
              13.   , i.price                                     card_subtext 
              14. from 
              15.     item i 
              16. where 
              17.     i.id = nvl(:p588_item_id, i.id) 

              - Why retrieve "null" when I do not display them or need them at all? It's just name, price and img that I need to display.

              - Why did you select "i.name and i.price" twice? I just need them as  " card_text and card_subtext".

               

              The jQuery selector on the card Click dynamic action changes to #items li to reflect this.

              - Is it normal to access <li> tag through the static id of the region "items" like this "#items li"? Should not it be through the parent tag's "<ul>" id?

              - Is not there a way to directly get the #CARD_TEXT# value through Javascript, Jquery, PL/SQL or else rather than assigning it to a data-* attribute then retrieving it through the data() method?

              • 4. Re: How to get current record's column value - classic report(card template)
                fac586

                Eslam_Elbyaly wrote:

                 

                Switch the report to use a copy of the Cards template that has support for custom attributes (the List implementation of the Cards patterns has this—I have no idea why it should be missing from the report template):

                Words I do not understand, ...

                1- List implementation.

                2- "Cards patterns".

                Cards are a standard UI design pattern used to display content composed of related elements. The APEX Universal Theme supports two separate implementations of this pattern, one based on APEX report functionality, and one built on the list feature. The differences between these implementations and the pros and cons of each are discussed in this previous thread: Conditional colours in cards report (5.0)

                 

                The report implementation is the correct one for your use case as it provides PPR support (an important aspect I missed in my analysis at that time).

                - I think you mean "data-*" with "custom attributes", right?

                Not exclusively. There are other global attributes that could be very usefully included in the Cards mark-up. In addition to data-* attributes, I see valid use cases for:

                 

                • aria-*
                • dir
                • draggable
                • item*
                • lang
                • style
                • title

                 

                Using a generic CARD_ATTRIBUTES column and #CARD_ATTRIBUTES# substitution string in the template is the most flexible way to do this and ensures that the template is universally usable. If the data-id, data-name, and data-price attributes were separately coded into the template, it would be only be of use in applications requiring those specific attributes.

                - Can you attach a pic for a template that supports custom attributes you are referring to?

                See the template code posted above: the #CARD_ATTRIBUTES# column placeholder is included in the outer li element.

                Get the required data in the report query (cleaned up with proper separation of concerns):

                1. select
                2. i.id id
                3. , i.name name
                4. , i.price price
                5. , null card_modifiers
                6. , null card_attributes
                7. , null card_link
                8. , null card_icon
                9. , null card_initials
                10. , apex_util.get_blob_file_src('P3_IMG', i.id) card_title
                11. , null card_subtitle
                12. , i.name card_text
                13. , i.price card_subtext
                14. from
                15. item i
                16. where
                17. i.id = nvl(:p588_item_id, i.id)

                - Why retrieve "null" when I do not display them or need them at all? It's just name, price and img that I need to display.

                CARD_ATTRIBUTES is required to support the inclusion of custom attributes as described above. For the others I foresaw the possibility of them coming into use in the future.

                - Why did you select "i.price" twice? I just need it as "card_subtext".

                PRICE is used to set the value of the data-price attribute. CARD_SUBTEXT cannot be used for this as its value is modified for display using a format mask.

                Inject data attributes into the rendered report mark-up using an HTML Expression on the CARD_ATTRIBUTES column:

                Must it be added to "column_attributes" column? Or just to any column?

                It must be CARD_ATTRIBUTES as this corresponds to the substitution string that is in the required position in the template.

                The jQuery selector on the card Click dynamic action changes to #items li to reflect this.

                - Is it normal to access <li> tag through the static id of the region "items" like this "#items li"? Should not it be through the parent tag's "<ul>" id?

                It depends. #items li is a perfectly valid descendant selector, but it could potentially match different sets of elements to #items ul li:

                 

                <div id="items">
                  <ul id="unordered">
                    <li>Lorem</li>
                    <li>Ipsum</li>
                    <li>Sic</li>
                  </ul>
                  <ol id="ordered">
                    <li>Dolor</li>
                    <li>Amet</li>
                  </ol>
                </div>
                

                 

                In this case, #items li would match all 5 li elements and #items ul li would only match the 3 in the unordered list.

                 

                The use of element, ID, and class selectors based on generated APEX mark-up is potentially dangerous as the code from templates and the engine could change due to upgrades or template modifications. In this case since we are using a custom template we can be fairly confident that the #items li selector will match the elements that contain the required data-* attributes. The only changes that would stop this working would be in the insertion of unexpected li elements into the report (through the query or HTML Expressions), or modification of the template so that the Cards are no longer represented by li elements. This is frankly unlikely. One way to mitigate this would be to remove the dependence on targeting a known element by assigning the cards a domain-specific class value using the CARDS_MODIFIERS column, such as menu-item. We could then use #items .menu-item as the selector, which would be independent of the underlying HTML implementation.

                1 person found this helpful