Question 244374 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Combine two Shiny scripts together for R Shiny

My R Shiny app contains two different JS scripts in the UI:

  1. One to load the msal library

shiny::tags$script(src="https://alcdn.msauth.net/browser/2.30.0/js/msal-browser.min.js")

  1. And another custom script that uses that library to runs some db oauth token negotiation:
  shiny::tags$script(HTML("
        async function wrapperFunc() {
                const msalConfig = {
                    auth: {
                        clientId: 'XXXX',
                        authority: 'XXXXX'
                    }
                };
                const msalInstance = new msal.PublicClientApplication(msalConfig);
                const silentRequest = {
                    scopes: ['api://XXXXX']
                };
                const callLogin = async function(silentRequest, msalInstance) {
                    try {
                        const loginResponse = await msalInstance.loginPopup(silentRequest);
                        return loginResponse;
                    } catch (err) {
                        console.log(err)
                    }
                }
                response = callLogin(silentRequest, msalInstance);
              return response;
      }
      wrapperFunc().then(result => {
            Shiny.setInputValue('oauthToken', result['accessToken']);
                      console.log(result['accessToken']);
      });"))

Is there a way to combine the two tags$script calls into one? I am asking because I would like to create a catch-all custom function that encapsulates the two, because it is a standard bit of code used in all reporting across my organization. Packaging this bit of code would remove the need to copy and paste the JS scripts across different reports.

I hope I am making sense!

Thanks

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It was super simple - wrap them both up in a tags$head script!


  2. 0

    Yes, you may merge the two tags$script calls into a single JavaScript function that loads the msal library and executes your own code. This method may then be called in a single tags$script block. Here’s an example of how it may be done:

    library(shiny)

# Define your JavaScript function
js_code <- "
function initializeMsalAndRunCustomCode() {
    // Load the msal library
    const script = document.createElement('script');
    script.src = 'https://alcdn.msauth.net/browser/2.30.0/js/msal-browser.min.js';
    document.head.appendChild(script);

    script.onload = function() {
        // Your custom code using msal library
        const msalConfig = {
            auth: {
                clientId: 'XXXX',
                authority: 'XXXXX'
            }
        };
        const msalInstance = new msal.PublicClientApplication(msalConfig);
        const silentRequest = {
            scopes: ['api://XXXXX']
        };
        const callLogin = async function(silentRequest, msalInstance) {
            try {
                const loginResponse = await msalInstance.loginPopup(silentRequest);
                return loginResponse;
            } catch (err) {
                console.log(err);
            }
        };

        callLogin(silentRequest, msalInstance).then(result => {
            Shiny.setInputValue('oauthToken', result['accessToken']);
            console.log(result['accessToken']);
        });
    };
}
initializeMsalAndRunCustomCode();
"

# UI
ui <- fluidPage(
    tags$head(
        tags$script(HTML(js_code))
    ),
    # Your Shiny app content here
)

# Server
server <- function(input, output) {
    # Server logic here
}

shinyApp(ui, server)

    The initializeMsalAndRunCustomCode method is defined in this example to dynamically load the msal library and then run your custom code. In the Shiny UI, this method is called within a single tags$script block. This method allows you to encapsulate typical JavaScript functionality and just load the library once in your Shiny app.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search