Search code examples
javascriptoracle-apex

want to achieve cards functionality in oracle apex

enter image description here

HI ALL,

I want to achieve this functionality. when I click ADD on the item, the item is automatically added to the apex_collection. How to achieve this in oracle apex

I have tried classic report with cards template but got stuck in the middle

I have created the cards. Now want to add data to the apex_collection.... For that I have column links Target : URL URL : javascript:$s('P8_ACTION','#PRODUCT_CODE#');

Also created the hidden item P8_ACTION and added dynamic action--> execute server side

Begin IF not apex_collection.collection_exists('MY_COLLECTION') then apex_collection.create_collection('MY_COLLECTION'); end if; apex_collection.add_member( p_collection_name => 'MY_COLLECTION', p_c001 => :P8_ACTION ); END; /

enter image description here

Solution

  • Here is an example on the EMP table. It's using a javascript custom event which means all javascript nicely grouped in the dynamic action.

    Create Cards Report

    • Generate a cards region through the wizard on the sample data EMP table. Just take the defaults. Note that this is NOT a classic report. Is is a region of type "Cards".

    • Add a button to the card: In "Body" section of the card, add HTML Expression with source

    <button data-id=&EMPNO. type="button" class="add-emp t-Button t-Button--success">Add</button>

    Note the data-id=&EMPNO. attribute and add-emp class

    enter image description here

    Button was build using button builder

    Add a page item to the region to store the selected EMPNO (P158_EMPNO)

    Dynamic Action

    enter image description here

    • True action 1 (Set value of P158_EMPNO on button click)

      • Action "Set Value"
      • Set Type "Javascript Expression"
      • this.triggeringElement.dataset['id']
      • Affected Elements. P158_EMPNO

    • True Action 2 (Add row to collection)

      • Action "Execute Server-side Code"
      • Code
    DECLARE
  l_collection VARCHAR2(100) := 'EMP';
BEGIN
  IF NOT APEX_COLLECTION.COLLECTION_EXISTS (p_collection_name => l_collection) THEN
    APEX_COLLECTION.CREATE_COLLECTION(p_collection_name => l_collection);
  END IF;
  APEX_COLLECTION.ADD_MEMBER (
    p_collection_name => l_collection,
    p_n001 => :P158_EMPNO);
END;
    • Items to submit P158_EMPNO

    Note that this is basic code. It does allow a record to add more than once, I'm not cleaning up the collection etc. But you should get the point.