Azure AD B2C Customizing loading screen for Custom Policy

Question

I'm creating a custom policy and I'm trying to customize the behavior when the policy is loading between different pages. Currently, the behavior is that the screen darkens and some text is displayed that overlaps with the rest of the UI. If possible, I'd like to display some completely different HTML content during loading. So far, I've been unable to affect the loading content in the same way that I've been able to affect the rest of the UI.

I have been able to see that a couple divs do appear during loading with IDs "simplemodal-overlap" and "simplemodal-container", and I've attempted to modify these divs using JQuery in the HTML file I've provided to Azure for the custom policy, but nothing I've done seems to have affected those divs in any way.

Has someone customized the loading UI for a custom policy before and can they give me advice on how I can affect its behavior?

The modal is deprecated, can you try to inject doms to show as a loading screen by depending on the "aria-hidden" attribute change set on ? — Steven Zhou, Nov 04 '20 at 21:21
@StevenZhou Could you be a little more specific about that? I'm confused by your statement that the modal is deprecated because that modal is being provided by Azure, but I can see based on the style on those modal divs that they are the cause of the current behavior. The DOM injection sounds promising, though. Is the class "working" something known on the Azure side that the custom policy will interact with, or is it a class that I should create on my side and configure? — Forgesemo, Nov 04 '20 at 21:48
We used to manage two page contract versions one that supports the modal, the other doesn't. There was an effort to better align the versions, and we chose the one without the modal as it affects customer less. The html I shared would come from Azure which you can depend on it. I admit it isn't a nice way to do it, we might introduce a event that you could have your code depend on in future page contract versions so that you can write cleaner code to implement the same function. — Steven Zhou, Nov 05 '20 at 21:16
Ok this is definitely helpful information! You mentioned two different versions, does the fact that I'm seeing the modal mean that I'm using the outdated version? Should I edit something in the custom policy XML to use the correct version? I'll experiment with that HTML you shared to see if it fixes my problem, thanks! — Forgesemo, Nov 05 '20 at 22:08
@StevenZhou what version of the selfasserted page contract doesn't use this deprecated modal? I'm using the latest 2.1.14 of the selfasserted page contract and the modal still appears. On the other hand, version 2.1.7 of the unifiedssp page contract does not use the modal. It would be nice to have some consistency here. — ajbeaven, Jan 03 '23 at 22:42
@ajbeaven Sorry I am no longer working at this area. It's hard to recall things I used to work 3 years ago. :D. — Steven Zhou, Jan 05 '23 at 00:59

score 3 · Accepted Answer · answered Nov 06 '20 at 01:39

Actually, the div with id: simplemodal-overlap is added/removed from HTML page by B2C dynamically:

So you can't capture it directly via JS code. If you just want to change its CSS display, you can just overwrite it on your custom page, on my side, I just use the code below to change its color to grey:

If you want to do more things on it by JS, you can add an event listener to monitor if a dom node with id simplemodal-overlap has been added into your html body. See code below:

<script>
 $('body').on('DOMNodeInserted', function(e) {
        if($(e.target).attr('id') == 'simplemodal-overlay'){
            
            $(e.target).css({"background":"green","font-size":"100px"});
                        $(e.target).html("LOADING !!!!!")
        }
    });

</script>

Result:

Thanks heaps for the `DOMNodeInserted` tip - I used that to dump the html of those divs into the console and then I could do more targeted CSS! — bhu Boue vidya, May 04 '23 at 02:35

Azure AD B2C Customizing loading screen for Custom Policy

1 Answers1