Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- prog:apex_item_checkbox2_radiogroup [2020/01/28 10:22] – [Quellen] gpipperr
+++ prog:apex_item_checkbox2_radiogroup [2020/01/28 10:26] (aktuell) – [Quellen] gpipperr
@@ Zeile 1: / Zeile 1: @@
+=====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/