=====Oracle Apex - Classic Report - Daten mit Checkbox oder Radio Group selektieren=====


<fc #800000>**Aufgabe**</fc>

Zeige eine Liste von Elementen an; die vom Anwender gewählten Elemente werden importiert.


<fc #008000>**Lösung**</fc>

Über den APEX API Aufruf **"APEX_ITEM.CHECKBOX2"** im SQL einen Classic Report mit einer Checkbox an der entsprechenden Stelle erzeugen.


API siehe =>  https://docs.oracle.com/en/database/oracle/application-express/19.2/aeapi/APEX_ITEM.html

----

=== Checkbox in der SQL Abfrage erzeugen===

SQL:
<code sql>

select apex_item.checkbox2(1,id) as selected
      ..
from 
 my_table
</code>


Im Classic Report auf der Spalte über die Eigenschaft "Security / Escape special characters" auf "No" erlauben das der mit APEX_ITEM erzeugte HTML Code auch aktiv ausgewertet wird und als Check Box angezeigt wird.



----

=== Zugeordnete Collection auswerten===

Über den ersten Parameter wird definiert in welcher Collection die Daten später landen sollen.

Mit "apex_item.checkbox2(1,id)" wird die dann später vom Anwender selektierte ID in der Collection "apex_application.g_f01" zu finden sein.

Verarbeiten mit:
<code>
   for i in 1..apex_application.g_f01.count 
      loop
       
       v_id:= apex_application.g_f01(i);
     
      .....
              
      end loop;

</code>

----

=== Checkbox mit Styles anpassen===


Je nach Bedarf mit Styles das ganze etwas Optisch aufwerten:

<code css>
/* https://jsfiddle.net/rvgccn5b/ */

input[type=checkbox]{
  cursor: pointer;
}
input[type=checkbox]:checked:before {
content: "\2713";
    background: #008080;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 20px;
    text-align: center;
    line-height: 8px;
    display: inline-block;
    width:  22px;
    height: 22px;
    color: #FF8C00;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    margin: -3px -3px;
    text-indent: 1px;
}
input[type=checkbox]:before {
content: "\202A";
    background: #ed813e;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 20px;
    text-align: center;
    line-height: 8px;
    display: inline-block;
    width: 22px;
    height: 22px;
    color: #FF8C00;
    border: 2px solid #cdcdcd;
    border-radius: 4px;
    margin: -3px -3px;
    text-indent: 1px;
}
</code>
siehe auch die Orginal Idee unter  https://jsfiddle.net/rvgccn5b/


Das sieht dann so aus:

{{ :prog:apex:apex_classic_report_mit_checkbox_v01.png | Classic Report with Checkboxes }}

----

==== Quellen ====

Oracle:

  * https://docs.oracle.com/en/database/oracle/application-express/19.2/aeapi/APEX_ITEM.html
  * https://docs.oracle.com/en/database/oracle/application-express/19.2/aeapi/CHECKBOX2-Function.html

Web:

  * https://jeffkemponoracle.com/2018/09/using-apex_item-checkbox2-with-multiple-identifiers/

CSS Beispiel:

  * https://lokesh-coder.github.io/pretty-checkbox/