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 <div class="working" style="display: none;" aria-hidden="true"></div>? — Steven Zhou
@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
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
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

Stanley Gong Stanley Gong · Accepted Answer · 2020-11-06T01:39:41

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:

Azure AD B2C Customizing loading screen for Custom Policy

1 Answers