Le Tutoriel de Oracle APEX Tabular Form

Introduction
Créer un Tabular Form en utilisant Wizard
Créer Tabular Form manuellement
Le traitement Tabular Form
Master-Details
Peut- être que vous vous intéressez

1. Introduction

Vous consultez des instructions pour la programmation de Oracle APEX 5.0. Voici le deuxième document qui suit:

Le Tutoriel de Oracle APEX pour débutant (APEX 5.0)

Dans ce document, je continuerai à vous guider sur l'application Oracle APEX Database Desktop Application, en utilisant Tabular Form.

2. Créer un Tabular Form en utilisant Wizard

Connectez-vous à Oracle APEX avec le compte du programmeur.

http://localhost:8080/apex

Allez au dossier "Database Application".

Next, going to "Hello Database Desktop Application" that you created in the previous guidance

Dans cette application, il existe quelques pages créées dans le didacticiel précédent. Cliquez sur "Create Page" pour créer une autre page.

Créez un Tabular Form:

Saisissez:

Page: 7
Page Name: Emp Tabular Form (7)

Votre page a été créée, cliquez sur le bouton RUN pour tester la page qui vient d'être créée.

Voici l'image de la page 7 lorsqu'elle exécute.

Ici, la question se pose de la façon de modifier certains champs de saisie (Input Fields) dans SELECT LIST ou POPUP LOV (List of values). Par exemple: vous souhaitez sélectionner Manager (MGR) via POPUP LOV, et sélectionner Job via SELECT LIST.

Retournez à l'écran de conception de la page 7. Définissez les propriétés de la colonne JOB afin qu'elle s'affiche sous la forme d'une liste de sélection (SELECT LIST).

Identification:

Type: Select List

List of Values

Type: Static Value
Static Value:

STATIC:
CLERK;CLERK,
SALESMAN;SALESMAN,
PRESIDENT;PRESIDENT,
MANAGER;MANAGER,
ANALYST;ANALYST

La syntaxe utilisée pour déclarer les valeurs statiques (Static Values):

STATIC:Display1;Return1,Display2;Return2

Ensuite, vous devez définir les propriétés pour le MGR afin qu'il s'affiche comme POPUP LOV (List of values)

Identification:

Type: Popup LOV (shows display values)

List of Values:

Type: SQL Query
SQL Query: Select emp.ename, emp.empno from Emp

Définissez également les propriétés pour DEPTNO, de sorte qu'il s'affiche sous forme d'un POPUP LOV.

Identification:

Type: Popup LOV (shows display values)

List of Values

Type: SQL Query
SQL Query: Select d.dname, d.deptno from Dept d

Enregistrez et exécutez la page 7:

3. Créer Tabular Form manuellement

Ci-dessus, je vous ai montré comment créer un Tabular Form en utilisant wizard de Oracle Apex. Ensuite, nous créerons un Tabular Form complètement dès le début, ne pas utiliser Wizard, qui vous aide à comprendre mieux de Tabular Form & Oracle APEX.

Saisissez:

Page Number: 8
Name: Emp Tabular Form (8)

Une page vierge a été créée.

Créez un Tabular Form dans la zone "Content Body":

Title: Emp Tabular Form (8)
Type: Tabular Form
SQL Query:

select EMPNO,
       EMPNO EMPNO_DISPLAY,
       ENAME,
       JOB,
       MGR,
       HIREDATE,
       SAL,
       COMM,
       DEPTNO
  from EMP

Vous pouvez tester la page 8, le résultat est comme suivant:

Ajoutez une colonne contenant CheckBox, qui sert à sélectionner des lignes.

Définissez des attributs pour EMPNO, cachez cette colonne, et définissez l'attribut primary key pour lui.

Identification

Column Name: EMPNO
Type: Hidden Column (saves state)

Primary Key Source

Type: Existing sequence
Name: EMP_SEQ

La colonne ENAME:

Identification

Column Name: ENAME
Type: Text Field

La colonne JOB:

Identification

Column Name: JOB
Type: Select List

List of Values

Type: Static Values
Static Values:

STATIC:
CLERK;CLERK,
SALESMAN;SALESMAN,
PRESIDENT;PRESIDENT,
MANAGER;MANAGER,
ANALYST;ANALYST

La colonne MGR:

Identification

Column Name: MGR
Type: Popup LOV (shows display values)

List of Values

Type: SQL Query
Static Values: Select emp.ename, emp.empno from Emp

La colonne HIREDATE:

Identification

Column Name: HIDEDATE
Type: Date Picker

Appearance

Format Mask: YYYY-MM-DD

Default

Type: PL/SQL Expression
PL/SQL Expression: sysdate

La colonne SAL:

Identification

Column Name: SAL
Type: Text Field

La colonne SAL (Salary) est un type numérique, donc vous devez ajouter la validation:

Identification

Name: SAL must be numeric

Validation:

Type: Column is numeric
Column: SAL

Error

Error Message: #COLUMN_HEADER# must have a value.
Display Location: Inline with Field and in Notification

Remarque:

#COLUMN_HEADER# est celui qui sert de titulaire de place (Place Holder), il sera remplacé par le titre de la colonne correspondante au moment de l'exécution.

La colonne COMM:

Identification

Column Name: COMM
Type: Text Field

Créez Validation pour COMM, COMM doit être numérique.

Identification

Name: COMM must be numeric

Validation:

Type: Column is numeric
Column: COMM

Error

Error Message: #COLUMN_HEADER# must have a value.
Display Location: Inline with Field and in Notification

La colonne DEPTNO:

Identification:

Type: Popup LOV (shows display values)

List of Values

Type: SQL Query
SQL Query: Select d.dname, d.deptno from Dept d

4. Le traitement Tabular Form

Ensuite, nous devons ajouter plus de traitement, y compris créer une ligne, modifier des lignes, supprimer des lignes

Changez le nom des Button, comme l'illustration suivante:

Pour le bouton Cancel:

Lorsque l'utilisateur clique sur le bouton Cancel, la page du site web va refresh la page actuelle (Celle-ci est la page 8).

Ajouter des lignes

Lorsque l'utilisateur clique sur le bouton ADD, la table sur la page va automatiquement ajouter une nouvelle ligne, qui permet au utilisateur à saisir des données. Vous devez appeler la fonction de javascript pour accomplir cette étape.

Idetification

Button Name: ADD
Label: Add

Behavior

Action: Redirect to URL
Target: javascript:apex.widget.tabular.addRow();

Mattre en place multiple lignes

Idetification

Button Name: SAVE
Label: Save

Behavior

Action: Submit Page

Le bouton SAVE doit enregistrer les informations de plusieurs enregistrements à la fois, y compris de nouveaux enregistrements, des enregistrements modifiés. Vous devez déclarer un processus (Process) pour gérer cela. Ce Process sera exécuté une fois immédiatement après l'appel de la page, il update les enregistrements qui ont des modifications et insert de nouveaux enregistrements.

Créez un nouveau Process:

Idetification

Name: ApplyMRU
Type: Tabular Form - Multi Row Update

Settings

Table Name: EMP
Primary Key Column: EMPNO

Execution Options

Tabular Form: Emp Tabular Form (8)
Run Process: Once Per Page Visit (default)

Success Messages

Success Message: #MRU_COUNT# row(s) updated, #MRI_COUNT# row(s) inserted.

Condition

When Button Pressed: SAVE (Name of button)
Execution Scope: For Created and Modified Rows

Suppression de plusieurs lignes immédiatement

Le bouton de manipulation pour supprimer immédiatement les enregistrements sélectionnés, pas besoin de confirmer:

Pour supprimer de nombreuses lignes, vous devez créer un processus (Process) pour gérer cela. Ce Process sera exécuté une fois dès que la page sera appelée.

Créez un nouveau Process:

Idetification

Name: ApplyMRD_IMMEDIATELY
Type: Tabular Form - Multi Row Delete

Settings

Table Name: EMP
Primary Key Column: EMPNO

Execution Options

Tabular Form: Emp Tabular Form (8)
Run Process: Once Per Page Visit (default)

Success Messages

Success Message: #MRD_COUNT# row(s) deleted.

Condition

When Button Pressed: IMMEDIATELY_MULTY_ROW_DELETE (Name of button)
Execution Scope: For Created and Modified Rows

Supprimer plusieurs lignes - Demander avant de supprimer

Avant de supprimer les enregistrements, le programme demande si l'utilisateur accepte de supprimer ou non?

Idetification

Button Name: MULTI_ROW_DELETE
Label: Multi Row Delete

Behavior

Action: Redirect URL
Target: javascript:apex.confirm('Are you sure to delete?','MULTI_ROW_DELETE');

apex.confirm(...) est une fonction Javascript utilisée pour demander au utilisateur avant d'exécuter la commande de button.

// The function includes 2 parameters, message and Button Name.

apex.confirm('Message ...', 'Button Name');

// Example:

apex.confirm('Are you sure to delete?','MULTI_ROW_DELETE');

// Using variable.
// htmldb_delete_message is a javascript variable
// with value: 'Would you like to perform this delete action?'
// (You need to declare this variable).
apex.confirm(htmldb_delete_message,'MULTI_ROW_DELETE');

// Declare a variable named htmldb_delete_message
var htmldb_delete_message='Would you like to perform this delete action?';

// Or:
// "DELETE_CONFIRM_MSG" is a constant available in APEX.
// It has value: Would you like to delete this thực action?


var htmldb_delete_message='"DELETE_CONFIRM_MSG"';


// Then can use this variable in the whole page.

apex.confirm(htmldb_delete_message,'MULTI_ROW_DELETE');

Pour supprimer plusieurs lignes, vous devez créer un (Process) pour le manipuler. Ce Process sera exécuté une fois dès que la page sera appelée.

Idetification