-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Updated till Task 4 * HOL 10 final update * Hands on lab 11 - Upgraded to 23.1 * HOL 12 updated to 23.1 + Updated acknowledgements for HOLs 10 & 11 * Updated HOL 13 to APEX 23.1 * Updated HOL 14 to APEX 23.1 * Updated acknowledgements * Oracle APEX Workflow Lab WMS ID: 11525 Oracle APEX Workflow Lab * APEX Workflow Lab WMS ID: 11525 * Workflow Lab Updates to Images * APEX Workflow Lab updated * APEX Workflows Lab - Removed unnecessary images * APEX Workflows Lab updated after QA * Manifest File Updated * APEX Workflow LiveLab Feedback Fixes * APEX Workflows Lab Feedback Fixes * HOL1-5 Updates * Update 2-hands-on-lab-01.md * Update 4-creating-db-objects-quickSQL.md * Update creating-order-page.md * HOL 6 Updated * HOL 7 Update WMS ID : 11155 * Delete Screenshot 2023-10-12 at 1.01.01 AM.png * Update manifest.json --------- Co-authored-by: Hope Fisher <[email protected]>
- Loading branch information
1 parent
7a42a2d
commit 84c91df
Showing
28 changed files
with
163 additions
and
155 deletions.
There are no files selected for viewing
132 changes: 62 additions & 70 deletions
132
apex-professional-hol7/customizing-interactive-grid-developer.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,134 +1,126 @@ | ||
| # Customize Interactive Grid as a Developer | ||
| <!--# Create the shopping cart page --> | ||
| ## Introduction | ||
|
|
||
|
|
||
| ### Objectives | ||
| In this lab, you customize: | ||
| - **Project Tasks** page we Created in Lab 5. | ||
| - **Project Tasks** page we Created in Workshop 5 (**Developing Reports**). | ||
| - **Interactive Grid** Page as a developer. | ||
|
|
||
| <!-- | ||
| Customers will be able to: | ||
| - Review the items in the shopping cart | ||
| - Edit the quantity of the items | ||
| - Remove an item | ||
| - Clear the shopping cart | ||
| - Proceed to checkout | ||
| Estimated Time: 20 minutes | ||
| Watch the video below for a quick walk through of the lab. | ||
| [](youtube:Cvl9xMAqnm8) | ||
| --> | ||
|
|
||
| Estimated Time: 20 minutes | ||
|
|
||
| ### Objectives | ||
| In this lab, you: | ||
| - Customise the Interactive Grid page you have created in **Demo Projects** Application as a **Developer**. | ||
|
|
||
| ### Downloads | ||
|
|
||
| - Did you miss out trying the previous labs? Don’t worry! You can download the application from [here](files/demo-projects-2.sql) and import it into your workspace. To run the app, please run the steps described in **Hands-on-lab-01** and **Hands-on-Lab-02**. | ||
|
|
||
| - Did you miss out on trying the previous labs? Don’t worry! You can download the application from [here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/CSv7IOyvydHG3smC6R5EGtI3gc1vA3t-68MnKgq99ivKAbwNf8BVnXVQ2V3H2ZnM/n/c4u04/b/livelabsfiles/o/data-management-library-files/apex-23-2-object-storage-files/hol5-lab1.sql) and import it into your workspace. To run the app, please run the steps described in the following workshops: | ||
| 1. **[Get Started with Oracle APEX](https://apexapps.oracle.com/pls/apex/r/dbpm/livelabs/run-workshop?p210_wid=3509)** | ||
| 2. **[Using SQL Workshop](https://apexapps.oracle.com/pls/apex/r/dbpm/livelabs/run-workshop?p210_wid=3524)** | ||
|
|
||
| ## Task 1: Manage and Customize Interactive Grid as a Developer | ||
| This lab uses the **Demo Projects** application. In this lab, you customize the **Interactive Grid** for end users. You create column groups, set pagination type, and set the report downloadable formats that should be available for end users. You also enable end users to save the report as Public interactive grids and convert a read only interactive grid to an editable interactive grid. | ||
| This lab uses the **Demo Projects** application. In this lab, you customize the **Interactive Grid** for end users. You create column groups, set pagination type, and set the report downloadable formats that should be available for end users. You also enable end users to save the report as Public interactive grids and convert a read-only interactive grid to an editable interactive grid. | ||
|
|
||
| 1. Navigate to **App Builder** and run the **Demo Projects** application. | ||
|
|
||
|  | ||
|  | ||
|
|
||
|  | ||
|  | ||
|
|
||
| 2. In the navigation menu, click **Projects Tasks**. You want to customise the display of this interactive grid for your end users. In the Developer Toolbar, click **Edit Page 4**. | ||
| 2. In the navigation menu, click **Projects Tasks**. You want to customize the display of this interactive grid for your end users. In the Developer Toolbar, click **Edit Page 4**. | ||
|
|
||
|  | ||
|  | ||
|
|
||
| 3. Add column group headers to the interactive grid as: | ||
| - Project Breakdown: Project, Task_Name columns | ||
| - Schedule: Start\_Date, End\_Date columns | ||
| - Project Financing: Cost, Budget columns | ||
| - **Project Breakdown**: Project, Task_Name columns | ||
| - **Schedule**: Start\_Date, End\_Date columns | ||
| - **Project Financing**: Cost, Budget columns | ||
|
|
||
| a) In the page designer, under Components > Body, navigate to **Project Tasks** Interactive Grid region and right-click **Column Groups**. Select **Create Column Group**. | ||
| a) In the page designer, navigate to Components > Body > **Project Tasks** Interactive Grid region and right-click **Column Groups**. Select **Create Column Group**. | ||
|
|
||
|  | ||
|  | ||
|
|
||
| b) In the Property Editor, enter **Project Breakdown** for Heading. | ||
| b) In the Property Editor, for Heading enter **Project Breakdown**. | ||
|
|
||
|  | ||
|  | ||
|
|
||
| c) Repeat the above two steps **a** and **b** to create column groups: **Schedule** and **Project Financing**. | ||
|
|
||
| d) Now that you created column groups, you need to assign columns to them. Expand **Columns** and select **Project** and **Task_Name** columns. | ||
| d) Now that you have created column groups, you need to assign columns to them. | ||
|
|
||
| Expand **Columns** in the rendering tree and select **Project** and **Task_Name** columns. | ||
|
|
||
| e) In the property editor, under **Layout**, select **Project Breakdown** for Group. | ||
|
|
||
|  | ||
|  | ||
|
|
||
| f) Then, in thee rendering tree, select **Start\_Date** and **End\_Date** columns. | ||
|
|
||
| f) Then, select **Start_Date** and **End_Date** columns. In the property editor, under **Layout**, select **Schedule** for Group. | ||
| In the property editor, under **Layout**, select **Schedule** for Group. | ||
|
|
||
|  | ||
|  | ||
|
|
||
| g) Finally, select **Cost**, and **Budget** columns. In the property editor, under **Layout**, select **Project Financing** for Group. | ||
| g) Finally, in the rendering tree, select **Cost**, and **Budget** columns. In the property editor, under **Layout**, select **Project Financing** for Group. | ||
|
|
||
| Then, click **Save** and **Run Page**. | ||
| Then, click **Save and Run**. | ||
|
|
||
|  | ||
|  | ||
|
|
||
| h) The interactive grid now displays column groups. | ||
|
|
||
|  | ||
|  | ||
|
|
||
| 4. Rearrange the columns in the interactive grid. You want to display the column groups Project Breakdown, Schedule, and Project Financing display in order followed by Status and Assigned To. | ||
| 4. Rearrange the columns in the interactive grid. You want to display the column groups Project Breakdown, Schedule, and Project Financing in order, followed by Status and Assigned To. | ||
|
|
||
| a) Hover the mouse over the Project Financing column group header to display the drag handle. Your mouse cursor also changes when it comes into contact with the drag handle. Click and hold the drag handle. | ||
| a) Hover the mouse over the **Project Financing** column group header to display the drag handle. Your mouse cursor also changes when it comes into contact with the drag handle. Click and hold the **drag** handle. | ||
|
|
||
| b) Then, drag the column group to the Status column location. The heading shifts out of place in the row. The Project Financing column group should be followed by the Status column. Release the mouse. The Project Financing column group drops into place. | ||
| b) Then, drag the column group to the **Status** column location. The Heading shifts out of place in the row. The Status column should follow the Project Financing column group. Release the mouse. The Project Financing column group drops into place. | ||
|
|
||
|  | ||
|  | ||
|
|
||
|  | ||
|  | ||
|
|
||
| 5. Click **Page n** in the runtime developer toolbar. You want to make **ID** Column as **Primary Key**. This will help you to make the Interactive Grid editable. | ||
| 5. You want to ensure end users can save Public interactive grids. You want to exclude HTML from the download formats available to end users. | ||
| a) In the Rendering tree, select the **Project Tasks** Interactive Grid region. | ||
|
|
||
|  | ||
| b) In the property editor, select **Attributes**, and perform the following steps: | ||
| - Enable Users To > **Save Public Report**: Toggle the button to **ON**. | ||
| - Under **Download**, deselect the **HTML** check box. | ||
|
|
||
| 6. You want to ensure that end users can save Public interactive grids. You want to exclude HTML from the download formats available to end users. | ||
| a) Under Rendering, select the **Project Tasks** Interactive Grid region. | ||
|  | ||
|
|
||
|  | ||
| 6. Convert this read-only interactive grid into an **Editable interactive grid**. Then, reset the pagination as Page type displaying the total row count. | ||
|
|
||
| b) In the property editor, select **Attributes** , then navigate to **Enable Users To**. Click **Save Public Report** to enable the feature. Under **Download**, deselect the **HTML** check box. | ||
| a) Under Rendering, select the **Project Tasks** Interactive Grid region. | ||
|
|
||
|  | ||
| b) In the property editor, navigate to **Attributes** and perform the following steps: | ||
| - Edit > Enabled: Toggle the button to **ON** | ||
| - Pagination > Type: **Page** | ||
|
|
||
| 7. Convert this read only interactive grid in to an **Editable interactive grid**. Then, reset the pagination as Page type displaying the total row count. | ||
|  | ||
|
|
||
| a) Under Rendering, select the **Project Tasks** Interactive Grid region. | ||
| 7. Delete the column groups in the interactive grid. | ||
|
|
||
| b) In the property editor, navigate to **Attributes** and then navigate to Edit. Click **Enabled**, to turn on the feature. | ||
| Also Under **Pagination**, select **Page** for Type. | ||
| Navigate to Rendering > Project Tasks Interactive Grid > Column Groups. Select **Schedule**, **Project Breakdown** and **Project Financing**, right-click and select **Delete**. | ||
|
|
||
|  | ||
|  | ||
|
|
||
| 8. Delete the column groups in the interactive grid. Under Rendering > Project Tasks Interactive Grid > Column Groups. Select **Schedule**, **Project Breakdown** and **Project Financing**, right-click and click **Delete**. | ||
| 8. Suppose you want to display the ID column and exclude the ID column from DML operations. | ||
|
|
||
|  | ||
| In the rendering tree, navigate to **Project Tasks > Columns > ID**. | ||
|
|
||
| 9. Suppose you want to display the ID column and exclude the ID column from DML operations. Under **Page Rendering > Project Tasks** Interactive Grid, expand Columns and select **ID**. | ||
| In the Property Editor, enter/select the following: | ||
|
|
||
| Navigate to **Identification** and Set Type to **Display Only**, then Navigate to **Source** and Click on **Query Only** to enable. | ||
| Click **Save and Run Page**. | ||
|  | ||
| - Identification > Type: **Display Only** | ||
| - Heading > Heading: **ID** | ||
|
|
||
| Click **Save and Run**. | ||
|
|
||
| ## Summary | ||
|  | ||
|
|
||
| You now know how to Manage and Customise the Interactive Grid as a developer. You may now **proceed to the next lab**. | ||
|
|
||
| ## Acknowledgments | ||
| ## Summary | ||
| You now know how to Manage and Customize the Interactive Grid as a Developer. You may now **proceed to the next lab**. | ||
|
|
||
| - **Author** - Roopesh Thokala, Product Manager | ||
| ## Acknowledgements | ||
| - **Author** - Roopesh Thokala, Senior Product Manager | ||
| - **Contributor** - Ankita Beri, Product Manager | ||
| - **Last Updated By/Date** - Ankita Beri, Product Manager, May 2023 | ||
| - **Last Updated By/Date** - Ankita Beri, Product Manager, January 2024 |
Oops, something went wrong.