top of page
Search
  • naveenaggarwal12

Interactive Grid : Lock/ Unlock Rows



Interactive grids are the best way to add/edit/ delete multiple records at the same time. But sometimes we have to make the records editable based certain conditions.


Today I am going share a similar example where I locked/ unlocked records based on some conditions. Also I displayed the "lock" or "unlock" icon against each records for easy identification. Like, if a user completely filled the record and saved it so you can lock the record otherwise leave it unlocked.


In the following screenshot you can see top two records are unlocked and rest are locked. That means user can edit top two records only and its clearly visible.



Steps to build this feature.


Step 1: Add an extra column in the query


CASE WHEN confirm_flag = 'Y' THEN 'fa-lock' ELSE 'fa-unlock' END STATUS_ICON,

Step 2: Set the following properties of STATUS_ICON column


Type : Link

Target : javascript:lockUnlock('AtTaskToggleAjax',&ETL_METADATA_VALUE_ID.);

Link Text : <span class="fa &STATUS_ICON." style="color: grey;"></span>


Step3: lockUnlock (mentioned in step 2) is a JavaScript function which is defined at page level. I am using the following code as per my page components.


This function uses one AJAX process and one id (primary key) value as parameters.

Name of AJAX process here is AtTaskToggleAjax

function lockUnlock (pAjaxProcess,pId) {
    apex.message.confirm( "Toggle Lock/Unlock?", function( okPressed ) { 
        if( okPressed ) {
            apex.server.process(
                    pAjaxProcess,
                    {x01: pId, x02: $v('P700_CLIENT_LIST_ID')},
                    {success: function (pshowButton) {
                            if (pAjaxProcess === "AtTaskToggleAjax") {
                                apex.region("AtTaskDetailsStaticId").refresh();
                                if ($v('P700_TREE_TYPE') === 'AT_TASK') {
                                    if (pshowButton.trim() === 'Y') {
                                        $('#ConfirmAllMetadata').show();
                                    } else {
                                        $('#ConfirmAllMetadata').hide();
                                    }
                                }
                            } else if (pAjaxProcess === "LMAToggleAjax") {
                                apex.region("LMAMetaDataValuesStaticId").refresh();
                                if ($v('P700_TREE_TYPE') === 'AT_TASK') {
                                    if (pshowButton.trim() === 'Y') {
                                        $('#ConfirmAllLMA').show();
                                    } else {
                                        $('#ConfirmAllLMA').hide();
                                    }
                                }
                            }
                        },
                    dataType: "text"
                    }
            );
        } 
    });

Step 4: After this we have to create an AJAX process (location : Processing Tab --> Ajax Callback). Leave all the properties of new AJAX process as default.


Following is the code for AJAX process :

declare 
    l_confirm_flag varchar2(1);
    l_show_button varchar2(1);
begin
    if adm_auth_pkg.is_authorized('ADM_ACCESS') = 'Y' then
        update etl_metadata_values
        set confirm_flag = case when nvl(confirm_flag,'N') = 'Y' then 'N' ELSE 'Y' end
        where etl_metadata_value_id = apex_application.g_x01
        returning confirm_flag into l_confirm_flag;

        if l_confirm_flag = 'Y' then
            etl_pkg.replicate_metadata_to_snowflake(p_etl_client_list_id => apex_application.g_x02);
        end if;

        -- return value used to show/hide the Confirm All button
        select case when count(1) > 0 then 'Y' else 'N' end
        into l_show_button
        from etl_metadata_values
        where etl_list_attask_id in (select etl_list_attask_id from etl_metadata_values where etl_metadata_value_id = apex_application.g_x01) 
        and nvl(confirm_flag,'N') = 'N';

        htp.p(l_show_button);
    else
        raise_application_error(-20011,'Please contact D&A team.');
    end if;
end;

Step 5: You can toggle between lock and unlock. You will see following alert on clicking the lock/ unlock icon



You can customize this feature in different ways based on the requirement.

Here, I have discussed a very specific example from my application.


That's it for this post !!


Hope you liked it. Thanks for giving time to this post.




93 views0 comments

Recent Posts

See All
bottom of page