prompt --application/pages/page_00100
begin
--   Manifest
--     PAGE: 00100
--   Manifest End
wwv_flow_imp.component_begin (
 p_version_yyyy_mm_dd=>'2023.04.28'
,p_release=>'23.1.0'
,p_default_workspace_id=>16017191443360494
,p_default_application_id=>10001
,p_default_id_offset=>0
,p_default_owner=>'STUDENT'
);
wwv_flow_imp_page.create_page(
 p_id=>100
,p_name=>'Development Tips'
,p_alias=>'DEVELOPMENT-TIPS'
,p_step_title=>'Development Tips'
,p_autocomplete_on_off=>'OFF'
,p_page_template_options=>'#DEFAULT#'
,p_protection_level=>'C'
,p_page_component_map=>'17'
,p_last_updated_by=>'STUDENT_DEV'
,p_last_upd_yyyymmddhh24miss=>'20231005103523'
);
wwv_flow_imp_page.create_page_plug(
 p_id=>wwv_flow_imp.id(17566992124158923)
,p_plug_name=>'Use this area to capture tips during development'
,p_region_template_options=>'#DEFAULT#:t-Region--scrollBody'
,p_component_template_options=>'#DEFAULT#'
,p_plug_template=>wwv_flow_imp.id(16116793714514810)
,p_plug_display_sequence=>10
,p_include_in_reg_disp_sel_yn=>'Y'
,p_plug_source_type=>'NATIVE_HELP_TEXT'
);
wwv_flow_imp_page.create_page_plug(
 p_id=>wwv_flow_imp.id(19215672079340701)
,p_plug_name=>'Tip 06 - How to Design a Range Slider'
,p_parent_plug_id=>wwv_flow_imp.id(17566992124158923)
,p_region_template_options=>'#DEFAULT#:t-Region--hideShowIconsMath:is-collapsed:t-Region--scrollBody'
,p_plug_template=>wwv_flow_imp.id(16080935615514698)
,p_plug_display_sequence=>60
,p_attribute_01=>'N'
,p_attribute_02=>'HTML'
);
wwv_flow_imp_page.create_page_plug(
 p_id=>wwv_flow_imp.id(19215771051340702)
,p_plug_name=>'Tip 07 - How to add customized button in interactive grid'
,p_parent_plug_id=>wwv_flow_imp.id(17566992124158923)
,p_region_template_options=>'#DEFAULT#:t-Region--hideShowIconsMath:is-collapsed:t-Region--scrollBody'
,p_plug_template=>wwv_flow_imp.id(16080935615514698)
,p_plug_display_sequence=>70
,p_attribute_01=>'N'
,p_attribute_02=>'HTML'
);
wwv_flow_imp_page.create_page_plug(
 p_id=>wwv_flow_imp.id(19215805397340703)
,p_plug_name=>'Tip 08 - How to loop interactive grid line and process in PLSQL'
,p_parent_plug_id=>wwv_flow_imp.id(17566992124158923)
,p_region_template_options=>'#DEFAULT#:t-Region--hideShowIconsMath:is-collapsed:t-Region--scrollBody'
,p_plug_template=>wwv_flow_imp.id(16080935615514698)
,p_plug_display_sequence=>80
,p_attribute_01=>'N'
,p_attribute_02=>'HTML'
);
wwv_flow_imp_page.create_page_plug(
 p_id=>wwv_flow_imp.id(19216363471340708)
,p_plug_name=>'Tip 09 - How to dynamically hide column in interactive grid '
,p_parent_plug_id=>wwv_flow_imp.id(17566992124158923)
,p_region_template_options=>'#DEFAULT#:t-Region--hideShowIconsMath:is-expanded:t-Region--scrollBody'
,p_plug_template=>wwv_flow_imp.id(16080935615514698)
,p_plug_display_sequence=>90
,p_attribute_01=>'N'
,p_attribute_02=>'HTML'
);
wwv_flow_imp_page.create_page_plug(
 p_id=>wwv_flow_imp.id(18366982878840692)
,p_plug_name=>'Breadcrumb'
,p_region_template_options=>'#DEFAULT#:t-BreadcrumbRegion--useBreadcrumbTitle'
,p_component_template_options=>'#DEFAULT#'
,p_plug_template=>wwv_flow_imp.id(16128864886514872)
,p_plug_display_sequence=>10
,p_plug_display_point=>'REGION_POSITION_01'
,p_menu_id=>wwv_flow_imp.id(16026011791514304)
,p_plug_source_type=>'NATIVE_BREADCRUMB'
,p_menu_template_id=>wwv_flow_imp.id(16190976226515102)
);
wwv_flow_imp_page.create_page_plug(
 p_id=>wwv_flow_imp.id(18367422194840713)
,p_plug_name=>'Tips Editor'
,p_region_template_options=>'#DEFAULT#:t-Region--scrollBody'
,p_plug_template=>wwv_flow_imp.id(16116793714514810)
,p_plug_display_sequence=>40
,p_plug_source_type=>'NATIVE_HELP_TEXT'
,p_plug_header=>'This section is used to capture tips during development'
);
wwv_flow_imp_page.create_page_item(
 p_id=>wwv_flow_imp.id(16705931846764240)
,p_name=>'P100_TIP_07'
,p_item_sequence=>10
,p_item_plug_id=>wwv_flow_imp.id(19215771051340702)
,p_source=>wwv_flow_string.join(wwv_flow_t_varchar2(
'How to add customized button in interactive grid',
'',
'',
'1. In attribute of interactive grid, add custom code in Initialization Javascript Function',
'```',
'function(config) {',
'',
'    let toolbarData = $.apex.interactiveGrid.copyDefaultToolbar();',
'    let toolbarGroup = toolbarData.toolbarFind("actions3");',
'',
'    toolbarGroup.controls.push({',
'        action: "mass-load",',
'        type: "BUTTON",',
'        label: "Mass Load"',
'    });',
'',
'    config.initActions = function (actions) { ',
'        actions.add({ ',
'            name: "mass-load", ',
'            action: function(event, focusElement) { ',
'                //APEX.message.alert(''mass-load'');',
'                //apex.navigation.redirect("f?p=&APP_ID.:14:&APP_SESSION.::&DEBUG.:::");',
'                $.event.trigger(''massLoad'');',
'            }',
'        });',
'    } ',
'',
'    config.toolbarData = toolbarData;',
'',
'    return config; ',
'}',
'```',
'2. Create Dynamic Action, set Event as "Custom" and Custom Event as what defined in above JS code ("massLoad" in above case). Set its action as "Submit Page", set Request as "massLoad" (this should be same to what is used in next step).',
'3. Create After Processing branch, use behavior of "Page or URL (Redirect)". In Server-side Condition, set it as "Request = Value" and set value as what defined in step 2 ("massLoad" in this case).',
'',
'',
'',
'Reference link:',
'[Custom Buttons on an Interactive Grid](https://blog.viscosityna.com/custom-buttons-on-an-interactive-grid)',
'[Customize your Toolbar](https://tm-apex.hashnode.dev/customize-your-toolbar-interactive-grid-9)'))
,p_source_type=>'STATIC'
,p_display_as=>'NATIVE_DISPLAY_ONLY'
,p_field_template=>wwv_flow_imp.id(16186811375515083)
,p_item_template_options=>'#DEFAULT#'
,p_attribute_01=>'Y'
,p_attribute_05=>'MARKDOWN'
);
wwv_flow_imp_page.create_page_item(
 p_id=>wwv_flow_imp.id(17501587554568907)
,p_name=>'P100_TIP_05'
,p_item_sequence=>50
,p_item_plug_id=>wwv_flow_imp.id(17566992124158923)
,p_prompt=>'Tip 05'
,p_source=>wwv_flow_string.join(wwv_flow_t_varchar2(
'Defining Link for Gantt Chart',
'[https://srihariravva.blogspot.com/2020/08/defining-link-for-gantt-chart.html](https://srihariravva.blogspot.com/2020/08/defining-link-for-gantt-chart.html)',
'',
'There are 2 more modifications required:',
'',
'1. For the hiddle item (say P7_TASK_ID), need to set its attribute "Value Protected" as false.',
'',
'1. For gantt chart selection Javascript, need to change showWait from true to false.'))
,p_source_type=>'STATIC'
,p_display_as=>'NATIVE_DISPLAY_ONLY'
,p_field_template=>wwv_flow_imp.id(16186811375515083)
,p_item_template_options=>'#DEFAULT#'
,p_attribute_01=>'Y'
,p_attribute_05=>'MARKDOWN'
);
wwv_flow_imp_page.create_page_item(
 p_id=>wwv_flow_imp.id(17566587405158919)
,p_name=>'P100_EDITOR_MD'
,p_item_sequence=>10
,p_item_plug_id=>wwv_flow_imp.id(18367422194840713)
,p_prompt=>'Editor MD'
,p_source=>wwv_flow_string.join(wwv_flow_t_varchar2(
'How to refresh a page after modal dialog is closed  ',
'[https://doyensys.com/blogs/refresh-the-parent-page-on-closing-the-modal-dialog-in-oracle-apex/](https://doyensys.com/blogs/refresh-the-parent-page-on-closing-the-modal-dialog-in-oracle-apex/)'))
,p_source_type=>'STATIC'
,p_display_as=>'NATIVE_MARKDOWN_EDITOR'
,p_field_template=>wwv_flow_imp.id(16186811375515083)
,p_item_template_options=>'#DEFAULT#'
,p_attribute_01=>'SIMPLE'
,p_attribute_02=>'Y'
);
wwv_flow_imp_page.create_page_item(
 p_id=>wwv_flow_imp.id(17566606922158920)
,p_name=>'P100_EDITOR_HTML'
,p_item_sequence=>20
,p_item_plug_id=>wwv_flow_imp.id(18367422194840713)
,p_display_as=>'NATIVE_HIDDEN'
,p_attribute_01=>'Y'
);
wwv_flow_imp_page.create_page_item(
 p_id=>wwv_flow_imp.id(17566854785158922)
,p_name=>'P100_TIP_01'
,p_item_sequence=>10
,p_item_plug_id=>wwv_flow_imp.id(17566992124158923)
,p_prompt=>'Tip 01'
,p_source=>wwv_flow_string.join(wwv_flow_t_varchar2(
'How to refresh a page after modal dialog is closed  ',
'[https://doyensys.com/blogs/refresh-the-parent-page-on-closing-the-modal-dialog-in-oracle-apex/](https://doyensys.com/blogs/refresh-the-parent-page-on-closing-the-modal-dialog-in-oracle-apex/)'))
,p_source_type=>'STATIC'
,p_display_as=>'NATIVE_DISPLAY_ONLY'
,p_field_template=>wwv_flow_imp.id(16186811375515083)
,p_item_template_options=>'#DEFAULT#'
,p_attribute_01=>'Y'
,p_attribute_05=>'MARKDOWN'
);
wwv_flow_imp_page.create_page_item(
 p_id=>wwv_flow_imp.id(18415142485791226)
,p_name=>'P100_TIP_02'
,p_item_sequence=>20
,p_item_plug_id=>wwv_flow_imp.id(17566992124158923)
,p_prompt=>'Tip 02'
,p_source=>wwv_flow_string.join(wwv_flow_t_varchar2(
'Display images from BLOB in interactive grid  ',
'[https://forums.oracle.com/ords/apexds/post/display-images-from-blob-in-interactive-grid-0055](https://forums.oracle.com/ords/apexds/post/display-images-from-blob-in-interactive-grid-0055)'))
,p_source_type=>'STATIC'
,p_display_as=>'NATIVE_DISPLAY_ONLY'
,p_field_template=>wwv_flow_imp.id(16186811375515083)
,p_item_template_options=>'#DEFAULT#'
,p_attribute_01=>'Y'
,p_attribute_05=>'MARKDOWN'
);
wwv_flow_imp_page.create_page_item(
 p_id=>wwv_flow_imp.id(19126929069169017)
,p_name=>'P100_TIP_04'
,p_item_sequence=>40
,p_item_plug_id=>wwv_flow_imp.id(17566992124158923)
,p_prompt=>'Tip 04'
,p_source=>wwv_flow_string.join(wwv_flow_t_varchar2(
'How to Populate Who Column During Update Operation  ',
'[https://mikesmithers.wordpress.com/2019/07/23/customizing-dml-in-an-apex-interactive-grid/](https://mikesmithers.wordpress.com/2019/07/23/customizing-dml-in-an-apex-interactive-grid/)'))
,p_source_type=>'STATIC'
,p_display_as=>'NATIVE_DISPLAY_ONLY'
,p_field_template=>wwv_flow_imp.id(16186811375515083)
,p_item_template_options=>'#DEFAULT#'
,p_attribute_01=>'Y'
,p_attribute_05=>'MARKDOWN'
);
wwv_flow_imp_page.create_page_item(
 p_id=>wwv_flow_imp.id(19215923689340704)
,p_name=>'P100_TIP_08'
,p_item_sequence=>10
,p_item_plug_id=>wwv_flow_imp.id(19215805397340703)
,p_source=>wwv_flow_string.join(wwv_flow_t_varchar2(
'How to loop interactive grid line and process in PLSQL.',
'',
'1. **Set static id for IG**',
'Because we will process interactive grid programmatically, it is necessary to set static id for IG. Set it in following property:',
'`/ Advanced / Static ID`',
'In this case, we set it as IgVerbTensePractice.',
'',
'2. **Define Javascript function at page level**, from following navigation:',
'`/ Javascript / Function and Global Variable Declaration`',
'```',
'function storePracticeResult() {',
'',
'    // Identify the particular interactive grid',
'    var ig$ = apex.region("IgVerbTensePractice").widget();',
'    var grid = ig$.interactiveGrid("getViews","grid");',
'    ',
'    // Fetch the model for the interactive grid',
'    var model = grid.model;',
'',
'    // Select all rows',
'    ig$.interactiveGrid("getViews").grid.view$.grid("selectAll");',
'',
'    // Fetch selected records',
'    var selectedRecords = grid.view$.grid("getSelectedRecords");',
'',
'    // Loop selected records',
'    for (idx=0; idx < selectedRecords.length; idx++) {',
'',
'        record = model.getRecord(selectedRecords[idx][0]);',
'        // alert(record);',
'',
'        verbId = model.getValue(record, "VERB_ID");',
'        rowNum = model.getValue(record, "ROW_NUM");',
'        verbName = model.getValue(record, "VERB_NAME");',
'        translation = model.getValue(record, "TRANSLATION");',
'        pastTense1 = model.getValue(record, "PAST_TENSE_1");',
'        pastTense2 = model.getValue(record, "PAST_TENSE_2");',
'        pastTense3 = model.getValue(record, "PAST_TENSE_3");',
'        pastTense = model.getValue(record, "PAST_TENSE");',
'        perfectTense1 = model.getValue(record, "PERFECT_TENSE_1");',
'        perfectTense2 = model.getValue(record, "PERFECT_TENSE_2");',
'        perfectTense3 = model.getValue(record, "PERFECT_TENSE_3");',
'        perfectTense = model.getValue(record, "PERFECT_TENSE");',
'',
'        //$.event.trigger(''storeSinglePracticeResult'');',
'        apex.server.process(',
'            "STORE_SINGLE_PRACTICE_RESULT",',
'            {',
'                f01: verbId,',
'                f02: rowNum,',
'                f03: verbName,',
'                f04: translation,',
'                f05: pastTense1,',
'                f06: pastTense2,',
'                f07: pastTense3,',
'                f08: pastTense,',
'                f09: perfectTense1,',
'                f10: perfectTense2,',
'                f11: perfectTense3,',
'                f12: perfectTense',
'            },',
'            {',
'                dataType: "text",',
'                async: false,',
'                complete: function( ajaxResponse ) {                                    ',
'                    updateResult = ajaxResponse.responseText;',
'                }',
'            }',
'        );',
'',
'    }',
'}',
'```',
'One thing to notice, **the id column in the interactive grid should be in first position**, right after APEX$ROW_SELECTOR and APEX$ROW_ACTION. Otherwise above code would get null during process.',
'',
'3. **Define trigger for the function**',
'Create a dynamic action, choose proper Event. In this case, we want the process to happen before page submit, so we use "Before Page Submit".',
'In Action, choose "Execute JavaScript Code" and set the code as "storePracticeResult()" which has been defined in step 2. This ensures whenever page is submitted, it may first call the Javascript process.',
'',
'4. **Define PLSQL in Ajax Callback**',
'Create a process in Ajax callback, remark its Name which should be same to the apex.server.process parameter1 in step 2.',
'Inside PLSQL, we can retrieve parameters passed from Javascript. For example, in Javascript, we have passed first parameter as `f01: verbId`. In PLSQL, we can retrieve it from `apex_application.g_f01(1)`'))
,p_source_type=>'STATIC'
,p_display_as=>'NATIVE_DISPLAY_ONLY'
,p_field_template=>wwv_flow_imp.id(16186811375515083)
,p_item_template_options=>'#DEFAULT#'
,p_attribute_01=>'Y'
,p_attribute_05=>'MARKDOWN'
);
wwv_flow_imp_page.create_page_item(
 p_id=>wwv_flow_imp.id(19216220817340707)
,p_name=>'P100_TIP_09'
,p_item_sequence=>10
,p_item_plug_id=>wwv_flow_imp.id(19216363471340708)
,p_source=>'[https://forums.oracle.com/ords/apexds/post/how-to-dynamicaly-show-hide-columns-with-js-based-on-curren-9143#comment_323523248133936103684549696921270903617](https://forums.oracle.com/ords/apexds/post/how-to-dynamicaly-show-hide-columns-with-js-based'
||'-on-curren-9143#comment_323523248133936103684549696921270903617)'
,p_source_type=>'STATIC'
,p_display_as=>'NATIVE_DISPLAY_ONLY'
,p_field_template=>wwv_flow_imp.id(16186811375515083)
,p_item_template_options=>'#DEFAULT#'
,p_attribute_01=>'Y'
,p_attribute_05=>'MARKDOWN'
);
wwv_flow_imp_page.create_page_item(
 p_id=>wwv_flow_imp.id(19413819477315148)
,p_name=>'P100_TIP_03'
,p_item_sequence=>30
,p_item_plug_id=>wwv_flow_imp.id(17566992124158923)
,p_prompt=>'Tip 03'
,p_source=>wwv_flow_string.join(wwv_flow_t_varchar2(
'Display Images in Oracle APEX Interactive Reports and Forms  ',
'[https://www.youtube.com/watch?v=D2RXh2z629I](https://www.youtube.com/watch?v=D2RXh2z629I)'))
,p_source_type=>'STATIC'
,p_display_as=>'NATIVE_DISPLAY_ONLY'
,p_field_template=>wwv_flow_imp.id(16186811375515083)
,p_item_template_options=>'#DEFAULT#'
,p_attribute_01=>'Y'
,p_attribute_05=>'MARKDOWN'
);
wwv_flow_imp_page.create_page_item(
 p_id=>wwv_flow_imp.id(20582324109116549)
,p_name=>'P100_TIP_06'
,p_item_sequence=>10
,p_item_plug_id=>wwv_flow_imp.id(19215672079340701)
,p_source=>wwv_flow_string.join(wwv_flow_t_varchar2(
'How to Design a Range Slider',
'',
'',
'1. Add an additional html item in Pre Text',
'```',
'<div>',
'    <input type="range" min="0" max="100" id="myRange" oninput="slider_set_func();">',
'</div>',
'```',
'',
'2. Add JS function of set/load. Load is used to populate slider value during initilization. Set is used to response to user operation, in order to update value. Define it at page level.',
'```',
'function slider_set_func() {',
'    //alert("start slider_set_func");',
'    var slide_results;',
'    slider_val = document.getElementById("myRange").value;',
'    //alert("find slider_val");',
'    //document.getElementById("percentDisplay").value = slider_val + "%";',
'    //alert("slider_val = " + slider_val);',
'    $x("P8_COMPLETION_PERCENT").value = slider_val;',
'}',
'',
'function slider_load_func() {',
'    //alert("slider_load_func called")',
'    var slider_val = $x("P8_COMPLETION_PERCENT").value; ',
'    document.getElementById("myRange").value = slider_val;   ',
'}',
'',
'window.onload = slider_load_func;',
'```',
'',
'Reference link:',
unistr('[Oracle APEX \2013 How to customize Text Field into Slider Page Item](https://oracleapexlegends.wordpress.com/tag/plsql/)'),
'[W3 School - Range Slider](https://www.w3schools.com/howto/howto_js_rangeslider.asp)'))
,p_source_type=>'STATIC'
,p_display_as=>'NATIVE_DISPLAY_ONLY'
,p_field_template=>wwv_flow_imp.id(16186811375515083)
,p_item_template_options=>'#DEFAULT#'
,p_attribute_01=>'Y'
,p_attribute_05=>'MARKDOWN'
);
wwv_flow_imp.component_end;
end;
/