APEX Template Components with input items

Template Components are a relatively new feature of Oracle APEX. I won't go into details about what they are or how to create your own components. There are plenty of examples out there already, like this one.

Following these tutorials, I created my agenda Template Component based on this example I found on internet (see the agenda report on the right).

The data for this report comes from a simple TC_AGENDA table and this query:

select id
     , rownum row_num
     , icon_class
     , time
     , primary
     , short
     , description
from tc_agenda

With some tweaking for APEX (like using Font Apex icons), I ended up with:

One thing that I missed in Template Components is the ability to easily add input items. I wanted to explore the options using this example and change the fixed description into a text area where you can change the description.

The end result looks like:

So, how can you do that?

Of course, you start with the original Partial template, that looks like:

{if APEX$IS_LAZY_LOADING/}

  <div></div>

{else/}

<div class="timeline-item">

    <div class="row">

        <div class="col-4 date">

            <i class="#ICON_CLASS#"></i>

            #TIME#

            <br>

            <small class="text-primary">#PRIMARY#</small>

        </div>

        <div class="col content {case ROW_NUM/}{when 1/} border-top-0{endcase/}">

            <p class="mb-1"><span class="ff-secondary fw-semibold">#SHORT#</span></p>

<p>#DESCRIPTION#</p>

            <p></p>

        </div>

    </div>

</div>

{endif/}

It is easy enough to change the DESCRIPTION HTML paragraph to an INPUT or, in this case, TEXTAREA component. However, that does nothing with the user input when you submit the page.

To actually be able to capture and save the description entered by the user, you have to fall back on the APEX_ITEM API and how APEX handles this data. 
Note: the APEX team considers APEX_ITEM "Legacy" and may remove the API in a future release. However, as long are there is no alternative, this API will still work.

APEX_ITEM generates items with a name attribute f01, f02, etc. When APEX sees these items after a page submit, it puts the values in the APEX_APPLICATION.G_Fnn arrays.
Knowing this, you can use the name attribute without actually using APEX_ITEM.

The DESCRIPTION paragraph can now be changed to:

<input type="hidden" name="f01" value="#ID#" id="f01">

<p><textarea id="f02" name="f02" rows="4" cols="30"

class="textarea apex-item-textarea" data-resizable="true"

style="resize: both;">#DESCRIPTION#</textarea></p>

The first, hidden, item, with the name "f01" holds the Primary Key value of the row (here #ID#).
The second item, with name "f02", is the text area that holds the description (#DESCRIPTION#). 

You can now create a submit Process to update the description in the agenda table (TC_AGENDA):

declare

  v_id    tc_agenda.id%type;

  v_descr tc_agenda.description%type;

begin

for i in 1..APEX_APPLICATION.G_F01.COUNT

loop

    apex_debug.message('ID '||I||': '||APEX_APPLICATION.G_F01(i) );

    apex_debug.message('Value '||I||': '||APEX_APPLICATION.G_F02(i) );

    v_id := APEX_APPLICATION.G_F01(i);

    v_descr := APEX_APPLICATION.G_F02(i);

    update tc_agenda

    set description = v_descr

    where id = v_id

    and description <> v_descr;

end loop;

end;