Le Tutoriel de Oracle APEX Tabular Form

View more categories:

1- Introduction

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


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.
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).

4.1- 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();

4.2- 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

4.3- 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

 

4.4- 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
  • Name: ApplyMRD
  • 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
  • Execution Scope: For Created and Modified Rows
  • Type: Request = Value
  • Value: MULTI_ROW_DELETE
  • Execute Condition: Once

 

5- Master-Details

Voir plus:

6- Peut- être que vous vous intéressez

View more categories: