Remove/Inhibit/Disable functionality behind 'X' on tab (prevent closing tab)

Applications Menu / Menu Tree
, , ,
#1

Hi.

Most of my projects use tabs, with a tab opening each time a new app is spawned from the menu. I need to completely remove, or disable, the functionality to close these tabs via the ‘X’ that appears on the tab. I just want the tab to allow switching between apps, and apps are closed via a ‘Close’ button in the app itself. Does anyone know how I can disable or remove the ‘x’ on the tab?

More background… IE why do I want this?

Essentially users have become tired of accidentally closing apps where data changes have been made but they have not saved the changes. They need to re-open the app, find the record they changed and re-do the changes, and save it. The worst case scenario is that they become distracted (phone call etc) and forget they have not saved the record and leave the app thinking that changes have been made, but in fact they have not been applied.

To work around this issue I have implemented a framework which visually tells the user the current state of the record (unsaved) - this is all triggered via change events. Next I have implemented my own Close button - it uses the same framework to check if there are unsaved changes before closing the form. It would be nice if SC had a call to programmatically save the changes of the current record, but I have not found one. So my approach is to warn the user that there are unsaved changes and ask them to save the record. The last piece to preventing accidental closure of an app with data changes outstanding would be to prevent the user from closing the app via the ‘x’ on the tab.

To be clear, I want to retain the use of tabs (not remove them completely) - they are very useful in allowing app switching in the context of my business scenario.

I am hoping the community may have some ideas??

Cheers.

#2

.scTabCloseIcon {
display: none;
}

But there’s still a right mouse click here that lets you close the tab.

Can you post how to alert the user to unsaved changes?

#3

Sure. I am happy to do that. It is not rocket science, and there are a few parts to it. Let me write up something and I’ll post it here.

The code you supplied… where should it be placed? I am not a web app guru, so I’d appreciate some specifics.

#4

@rik… Here are my notes… Keep in mind I don’t have much of a web development background, mainly enterprise applications, so I am not advocating this as a “best practice”, but it works for me.

Basically the approach I use is as follows: [LIST=1]

  • Add field “[B]modified[/B]” to each form. The label reads “[I]This information is…[/I]” and the field displays “[I]Saved[/I]” or “[I]Unsaved[/I]”
  • Add a javascript method which sets the field “[B]modified[/B]” to “[I]Saved[/I]” or “[I]Unsaved[/I]” plus sets foreground and background colours to make it stand out when “[I]Unsaved[/I]”. I use a js method for this because I have found the sc macros to change the look of fields are flakey at best. The js method works well.
  • Add an event to each field ([B]onChange[/B], or [B]onClick[/B] if radio button) which calls the above js method to set accordingly. I have found through experimentation that [B]OnChange[/B] does not work for radio button fields - looks like a bug - so I just use [B]OnClick - [/B]and no, if you click twice to reset back to it's original value "[B]modified[/B]" does not revert to [I]Saved - [/I]I am keeping it simple and I rather be cautious and say [I]Unsaved[/I] rather than make the code over-complicated.
  • Add an event to handle form submit to reset modified to ‘[I]Saved[/I]’ and set up buttons (see additional note below)
  • Add code to event onValidateFailed to change “[B]modified[/B]” back to “[I]Unsaved[/I]”.
  • Add my own [B]Close[/B] button (type ajax), and a [B]Force Close[/B] button (also type ajax) - this is required because I can’t work out how to add any code to SC’s own [B]Close[/B] and [B]Exit[/B] buttons - they don’t seem to have any events to allow you to trap when these buttons are clicked.
  • Within event [B]onLoad[/B] set button [B]Close[/B] to visible, but hide button [B]Force Close[/B].
  • Set up toolbar accordingly with the two buttons defined - do not specify the standard "[B]cancel[/B]" or "[B]exit[/B]" buttons.
  • Code behind “[B]Close[/B]” button checks if “[B]modified[/B]” is set to “[I]Unsaved[/I]”, and if so, hides the [B]Close[/B] button, shows the [B]Force Close[/B] button and displays a warning message to the user.
  • Code behind [B]Force Close[/B] button simply ignores the state of [B]modified[/B] and closes the form (or redirects) after confirming the action with the user. [/LIST] Note that if, after the warning, the user clicks “[B]Save[/B]” (instead of [B]Force Close[/B]) then this will fire the [B]onSubmit[/B] event for the form which changes “[B]modified[/B]” back to “[I]Saved[/I]”, displays the [B]Close[/B] button, and hides the [B]Force Close[/B] button.

    I know this sounds like a lot of effort, but I have done most of this via a library. The user experience is far better and there are considerably fewer mistakes made by users not saving data.

    Doing it all via a library means that for each event I really only have one line of code behind the event that calls the appropriate library function which manages the state of “modified” and the two buttons. That said, it is still a little tedious (and error prone) adding all the OnChange and OnClick events to the fields, and my own two Close buttons. It is a real shame NM/SC don’t have a scripting language (or an extension to Express Edit) which allows you to programmatically add code to each field and create buttons. I could create forms in a fraction of the time.

    BTW, since 9.4, I am using sweet alerts and toast alerts for all the messaging in conjunction with this. The user experience has been significantly improved.

    I hope this helps.

    • #5

    @rik I think I have found the place where your code goes, and it works, but I want to document it here in case there is a more effective and appropriate way to go about it.

    I found a line that references the class ‘scTabCloseIcon’ in my menu’s index.php file - extract of text within function createAba(str_id) follows: [INDENT]
    “… class=‘scTabCloseIcon’ style=‘cursor: pointer; z-index:9999;’>”;[/INDENT]

    I changed this too… [INDENT]"… class=‘scTabCloseIcon’ style=‘display: none; cursor: pointer; z-index:9999;’>";[/INDENT]

    This works well, but of course, if I re-gen the menu app I’ll have to back and change it. Is there a better way?

    Thank you for the hint.

    Cheers.

    #6

    Insert into MENU --> onApplicationInit

    ?>
    <style>

    .scTabCloseIcon {
    display: none;
    }

    </style>
    <?php

    #7

    @rik, thank you! That worked perfectly. :slight_smile:

    By the way - there was an error in my previous post… bullet #8… this was an old note… I no longer keep the “Exit” button. The reason I did not see my buttons on insert because I did not have “Show in the inserting mode” set to yes within the button specification. I will edit my post.Thank you

    #8

    @rustyl_aus Thank you for the explanation.
    Everything is understandable, but for the implementation itself I am missing a bit of code (js method).

    #9

    @rik Happy to share that code. However, it is in a bit of a hacked-up state at the moment as the method is just pasted into each form, and I am supporting a couple of different versions of the implementation of this pattern. Give me a couple of days and I’ll clean it up a bit and post.

    #10

    Take your time. I am currently working on 2 projects and am so very busy.
    So I can wait.