Skip to content

Commit 27670a9

Browse files
Sajjad-786Sajjad-786
committed
ok
1 parent dcae907 commit 27670a9

File tree

1 file changed

+139
-172
lines changed

1 file changed

+139
-172
lines changed

‎docs/Kapitel-19/Kapitel-19 - Template Components.md‎

Lines changed: 139 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -112,218 +112,185 @@ Fügen Sie den HTML-Code im **Report Row** ein
112112
| File Name | styles.css |
113113
| | |
114114

115-
![](../../assets/Kapitel-19/9.jpg)
115+
![](../../assets/Kapitel-19/10.jpg)
116116

117117

118118
11. Kopieren sie den unten stehenden **CSS Code** und fügen sie den in APEX ein. Notieren sie am ende den **Reference** Link, den brauchen wie gleich.
119119

120120
![](../../assets/Kapitel-19/11.jpg)
121121

122-
12. Den kopierten **Reference** Link, wie folgt einfügen und speichern.
123-
124-
![](../../assets/Kapitel-19/12.jpg)
125-
126-
127-
122+
```css
123+
.progress-list:first-child {
124+
margin-top: 0px;
125+
}
128126

127+
.mb-1 {
128+
margin-bottom: 0.25rem;
129+
}
129130

131+
.flex {
132+
display: flex;
133+
}
130134

135+
.h-2 {
136+
height: 0.5rem;
137+
}
131138

132-
Für dieses Kapitel muss zuerst eine **Prozedur** und eine **View** erstellt werden.
139+
.h-2\.5 {
140+
height: 0.625rem;
141+
}
133142

134-
### 18.1.1. Erstellung der View
143+
.w-full {
144+
width: 100%;
145+
}
135146

136-
- Für die Bearbeitung dieser Aufgabe wird eine **View** benötigt.
147+
.justify-between {
148+
justify-content: space-between;
149+
}
137150

138-
- Geben Sie Ihrer **View** den Namen ***TUTO_P0101_VW***
139-
```sql
140-
select o.ordr_id as order_id,
141-
o.ordr_ctmr_id as customer_id,
142-
o.ordr_total as order_total,
143-
o.ordr_dd as order_date,
144-
o.ordr_user_name as user_name,
145-
oi.ordr_item_id as order_item_id,
146-
oi.ordr_item_prdt_info_id as product_id,
147-
oi.ordr_item_unit_price as unit_price,
148-
oi.ordr_item_quantity as quantity,
149-
p.prdt_info_name as product_name,
150-
p.prdt_info_descr as product_description,
151-
p.prdt_info_category as category,
152-
p.prdt_info_avail as product_avail,
153-
p.prdt_info_list_price as list_price
154-
from order_items oi
155-
join product_info p
156-
on oi.ordr_item_prdt_info_id = p.prdt_info_id
157-
join orders o
158-
on oi.ordr_item_ordr_id = o.ordr_id
159-
```
160-
161-
### 18.1.2. Erstellung der Prozedur
162-
163-
- Analog zur Erstellung einer **View** starten Sie den Assistenten zum Erstellen einer **Prozedur**. Öffnen Sie dazu das Dropdown-Menü über das **+** und klicken auf den Eintrag **Procedure**.
164-
165-
> Weitere Informationen zu einer Prozedur finden Sie unter dem folgenden Link:
166-
[Oracle Documentation CREATE PROCEDURE Statement](https://docs.oracle.com/en/database/oracle/oracle-database/21/lnpls/CREATE-PROCEDURE-statement.html#GUID-5F84DB47-B5BE-4292-848F-756BF365EC54)
167-
168-
![](../../assets/Kapitel-18/invoke_api_02.jpg)
169-
170-
Es öffnet sich ein Assistent zur Erstellung der Prozedur.
171-
Nun müssen Sie den entsprechenden Namen **PR_UPDATE_ORDER_ITEMS** sowie den **Return Data Type** als **VARCHAR2** für die Prozedur hinterlegen. Um eine einheitliche Benennung über verschiedene Anwendungen hinweg zu erzielen, empfiehlt sich die Verwendung von Namenskonventionen.
172-
173-
In diesem Fall setzt sich die Bezeichnung der View wie folgt zusammen:
174-
**PR_<FACHL.NAME>**
175-
176-
![](../../assets/Kapitel-18/invoke_api_03.jpg)
177-
178-
- Klicken Sie dann auf den Button **Next**.
179-
180-
- Geben Sie die folgenden Parameter ein:
181-
182-
| | | |
183-
|--|--|--|
184-
| **Argument Name** | **In/Out** | **Argument Type** |
185-
| *p_ordr_item_id* | *IN* | *NUMBER*|
186-
| *p_ordr_item_unit_price* | *IN* | *NUMBER*|
187-
| *p_ordr_item_quantity* | *IN* | *NUMBER*|
188-
| *p_prdt_info_id* | *IN* | *NUMBER*|
189-
| *p_prdt_info_category* | *IN* | *VARCHAR2*|
190-
| *p_prdt_info_avail* | *IN* | *VARCHAR2*|
191-
| *p_prdt_info_list_price* | *IN* | *NUMBER*|
192-
| | |
193-
194-
![](../../assets/Kapitel-18/invoke_api_04.jpg)
195-
196-
- Fügen Sie den entsprechenden Code ein.
197-
```sql
198-
begin
199-
200-
update order_items
201-
set ordr_item_unit_price = p_ordr_item_unit_price
202-
, ordr_item_quantity = p_ordr_item_quantity
203-
where ordr_item_id = p_ordr_item_id;
204-
205-
update product_info
206-
set prdt_info_category = p_prdt_info_category
207-
, prdt_info_avail = p_prdt_info_avail
208-
, prdt_info_list_price = p_prdt_info_list_price
209-
where prdt_info_id = p_prdt_info_id;
210-
211-
end;
212-
```
213-
214-
![](../../assets/Kapitel-18/invoke_api_05.jpg)
215-
216-
- Klicken Sie dann auf den Button **Next** und anschließend auf **Create Procedure**.
217-
218-
- Erstellen Sie eine weitere Prozedur **PR_DELETE_ORDER_ITEMS** mit **Return Data Type** als **VARCHAR2**.
219-
220-
- Geben Sie die folgenden Parameter ein:
221-
222-
| | | |
223-
|--|--|--|
224-
| **Argument Name** | **In/Out** | **Argument Type** |
225-
| *p_ordr_item_id* | *IN* | *NUMBER*|
226-
| | |
227-
228-
- Hinterlegen Sie den entsprechenden Code.
229-
```sql
230-
begin
231-
delete
232-
from order_items
233-
where ordr_item_id = p_ordr_item_id;
234-
end;
235-
```
236-
237-
- Klicken Sie dann auf den Button **Next** und anschließend auf **Create Procedure**.
238-
239-
## 18.2. Invoke API Process verwenden
151+
.rounded-full {
152+
border-radius: 9999px;
153+
}
240154

241-
- Um einen Invoke API Process zu verwenden, erstellen Sie eine editierbare Seite.
155+
.bg-blue-600 {
156+
--tw-bg-opacity: 1;
157+
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
158+
}
242159

243-
- Im **App Builder** klicken Sie auf **Create Page** .
244-
- Wählen Sie den Seitentypen **Component** aus.
245-
- Wählen Sie den Bereichstypen **Interactive Report** aus.
160+
.bg-gray-200 {
161+
--tw-bg-opacity: 1;
162+
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
163+
}
246164

247-
![](../../assets/Kapitel-18/invoke_api_06.jpg)
165+
.text-base {
166+
font-size: 1rem;
167+
line-height: 1.5rem;
168+
}
248169

249-
- Geben Sie als **Page Number**: *101* ein und als **Page Name**: *Orders and Products*.
250-
- Schalten Sie **Include Form Page** ein.
251-
- Geben Sie als **Form Page Number**: *102* ein und als **Form Page Name**: *Manage Orders* und **Form Page Mode**: *Normal*.
170+
.text-sm {
171+
font-size: 0.875rem;
172+
line-height: 1.25rem;
173+
}
252174

253-
- Wählen Sie als **Data Source** die View **TUTO_P0101_VW**.
175+
.font-medium {
176+
font-weight: 500;
177+
}
254178

255-
- Unter **Navigation** schalten Sie **Use Breadcrumb** aus und dann klicken Sie auf **Next**.
179+
.text-blue-700 {
180+
--tw-text-opacity: 1;
181+
color: rgb(29 78 216 / var(--tw-text-opacity));
182+
}
256183

257-
![](../../assets/Kapitel-18/invoke_api_07.jpg)
184+
```
258185

259-
- Wählen Sie **ORDER_ITEM_ID** als Primärschlüssel und anschließend klicken Sie auf **Create Page**.
186+
12. Den kopierten **Reference** Link, wie folgt einfügen und speichern.
260187

261-
![](../../assets/Kapitel-18/invoke_api_08.jpg)
262-
263-
- Wenn die Seite erstellt ist, löschen Sie den Button **Create**
188+
![](../../assets/Kapitel-19/12.jpg)
264189

265-
![](../../assets/Kapitel-18/invoke_api_09.jpg)
266-
267-
- Klicken Sie auf **Save** und navigieren Sie dann zu **Seite 102**
190+
Bit hier hin wurde der Plug-in Erfolgreich erstellt.
268191

269-
- Entfernen Sie ebenfalls den Button **Create** auf **Seite 102**
192+
13. Im nächsten schritt wird eine neue APEX-Seite mit dem Plugin erstellt.
270193

271-
- Setzen Sie den Type der folgenden Elemente auf **Hidden**:
194+
![](../../assets/Kapitel-19/13.jpg)
272195

273-
![](../../assets/Kapitel-18/invoke_api_10.jpg)
274-
275-
- Setzen Sie den **Read Only** Type der folgenden Elemente auf **Always**:
196+
14. Die Neue Seite wie folgt erstellen und auf **create Page**:
276197

277-
![](../../assets/Kapitel-18/invoke_api_11.jpg)
278-
279-
- Entfernen Sie den Standardprozess und erstellen Sie zwei neue Prozesse unter **Proccesses**:
198+
| | | |
199+
|--|--|--|
200+
| **Field** | **Value** |
201+
| Page Number | 120 |
202+
| Name | Progress Bars |
203+
| Use Breadcrumb | Disable |
204+
| Icon | fa-bar-chart-horizontal |
205+
| | |
280206

281-
![](../../assets/Kapitel-18/invoke_api_12.jpg)
282-
283-
- Ein Prozess mit den folgenden Einstellungen:
207+
![](../../assets/Kapitel-19/14.jpg)
208+
209+
15. Bitte erstellen Sie auf der Seite eine neue Region mit dem Title: **Progress Bars**. Anschließend wählen sie bei Type das zuvor erstellte Plug-in **Progress Bars**.
210+
211+
![](../../assets/Kapitel-19/15.jpg)
212+
213+
16. Anschließend wählen Sie **SQL Query** bei Type aus und fügen sie den unteren SQL-Code im **SQL-Query** ein. Wechseln sie anschließend zum Reiter **Attributes**
214+
215+
![](../../assets/Kapitel-19/16.jpg)
216+
217+
```sql
218+
WITH web_programming_languages AS (
219+
SELECT 'JavaScript' AS language_name FROM DUAL
220+
UNION ALL
221+
SELECT 'SQL' AS language_name FROM DUAL
222+
UNION ALL
223+
SELECT 'PL/SQL' AS language_name FROM DUAL
224+
UNION ALL
225+
SELECT 'Python' AS language_name FROM DUAL
226+
UNION ALL
227+
SELECT 'Java' AS language_name FROM DUAL
228+
UNION ALL
229+
SELECT 'C#' AS language_name FROM DUAL
230+
UNION ALL
231+
SELECT 'PHP' AS language_name FROM DUAL
232+
UNION ALL
233+
SELECT 'Ruby' AS language_name FROM DUAL
234+
UNION ALL
235+
SELECT 'TypeScript' AS language_name FROM DUAL
236+
UNION ALL
237+
SELECT 'Swift' AS language_name FROM DUAL
238+
)
239+
SELECT language_name as SKILLS
240+
, FLOOR(DBMS_RANDOM.VALUE(0, 100)) as PCT
241+
, FLOOR(DBMS_RANDOM.VALUE(0, 45)) as COLOR_INDEX
242+
FROM web_programming_languages
243+
;
244+
```
284245

285-
![](../../assets/Kapitel-18/invoke_api_13.jpg)
286-
287-
- Der Page Designer legt die Parameter automatisch vorab fest. Ordnen Sie jeden Parameter dem entsprechenden Element/Wert zu.
246+
17. Im Reiter **Attributes** passen Sie die Werte wie folgt an:
288247

289-
| | |
290-
|--|--|
291-
| **p_ordr_item_id** | *P102_ORDER_ITEM_ID*|
292-
| **p_ordr_item_unit_price** | *P102_UNIT_PRICE*|
293-
| **p_ordr_item_quantity** | *P102_QUANTITY*|
294-
| **p_prdt_info_id** | *P102_PRODUCT_ID*|
295-
| **p_prdt_info_category** | *P102_CATEGORY*|
296-
| **p_prdt_info_avail** | *P102_PRODUCT_AVAIL*|
297-
| **p_prdt_info_list_price** | *P102_LIST_PRICE*|
298-
| | |
248+
| | | |
249+
|--|--|--|
250+
| **Field** | **Value** |
251+
| Display | Multiple (Report) |
252+
| Color Index | COLOR_INDEX |
253+
| Pct | PCT |
254+
| Skill | SKILLS |
255+
| | |
299256

300-
![](../../assets/Kapitel-18/invoke_api_14.jpg)
301-
302-
- Erstellen Sie einen Prozess mit den folgenden Einstellungen:
257+
![](../../assets/Kapitel-19/17.jpg)
303258

304-
![](../../assets/Kapitel-18/invoke_api_15.jpg)
259+
18. Abschließend wird hier nur noch ein Button erstellt und die APEX Seite gespeichert.
305260

306-
- Ordnen Sie den Parameter dem entsprechenden Element/Wert zu.
261+
Erstellen Sie button mit folgenden Einstellungen:
307262

308-
| | |
309-
|--|--|
310-
| **p_ordr_item_id** | *P102_ORDER_ITEM_ID*|
311-
| | |
263+
| | | |
264+
|--|--|--|
265+
| **Field** | **Value** |
266+
| Button Name | P120_REFRESH_PAGE |
267+
| Label | Refresh Page |
268+
| |
269+
| Region | Progress Bars |
270+
| Position | Next |
271+
| |
272+
| Button Template | Text with Icon |
273+
| icon | fa-refresh |
274+
| |
275+
| Action | Submit Page |
276+
| | |
312277

313-
![](../../assets/Kapitel-18/invoke_api_16.jpg)
278+
Klicken Sie auf **Template Options**,
314279

315-
- Klicken Sie auf **Save** und führen Sie die Anwendung aus.
280+
| | | |
281+
|--|--|--|
282+
| **Field** | **Value** |
283+
| Type | success |
284+
| Icon Hover Animation | Push |
285+
| Width | Stretch |
286+
| | |
316287

317-
- Navigieren Sie zur Seite **Orders and Products**.
318-
- Wählen Sie ein **Order Item** aus.
288+
![](../../assets/Kapitel-19/18.jpg)
319289

320-
![](../../assets/Kapitel-18/invoke_api_17.jpg)
321-
322-
- Bearbeiten Sie die markierten Felder oder löschen Sie das ausgewählte **Order Item**
290+
19. Abschließend sieht die Seite wie folgt aus. Drücken Sie auf den Refresh Button, um **Zufällige** Werte neu zuladen.
323291

324-
![](../../assets/Kapitel-18/invoke_api_18.jpg)
292+
![](../../assets/Kapitel-19/19.jpg)
325293

326-
327294
<br><br>
328295
Herzlichen Glückwunsch!
329296
Sie haben das Tutorial erfolgreich beendet.

0 commit comments

Comments
 (0)