Question 169623 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can Javascript be used to create card 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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have created a page with classic report and cards template

    enter image description here

    And on the column Type : Link

    • Link
    • Target Type :URL
    • URL: (need to get the value when some one clicks the link and store it to page item P8_Action or we need some function to store these to the collection )

    enter image description here


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search