UIXv1 Dashboards - Can I seperate the js and css from the dashboard html file?

Hello,

the subject is the full question. Can I seperate the js and css from the html file? If so, how?

I've been trying to do this in UIXv1 for some time now. I've read that UIXv2 supports this and you should be able to have css and js seperately, but for UIXv1, no matter what I do, it just refuses to see the files. Do I need to specify something in the appdef.xml file? Maybe it's impossible to do in v1?

Thanks.
Dominik

Parents Reply Children
  • Hello Craig,

    currently I am testing it mostly on css, but none of the paths that are in <head> work. I tried out putting some path of a jpg into <img> in <body> and that works find. I think I am using the paths correctly, but something else is probably blocking it somehow.

    MFiles application structure:

    Paths I tried (example is css):

    ./styles/dashboard.css - manually clicking the link works, but not in the application
    /styles/dashboard.css - manually clicking the link works, but not in the application
    styles/dashboard.css - manually clicking the link works, but not in the application
    ../styles/dashboard.css - does not work of course, makes sense

    Absolute paths didn't work either.

    I can't provide you will full source code, but this is what happens now in the dashboard.html file:

    <!DOCTYPE html>
    <html lang="cs">
    <head>
        <title>Dashboard</title>
        <meta charset="UTF-8">

        <link rel="stylesheet" type="text/css" href="styles/dashboard.css">

        <!-- External Dependencies -->
        <script src="">cdn.socket.io/.../script>

        <!-- Application Configuration -->
        <script type="text/javascript" src="config/config.js"></script>

        <!-- Services -->
        <script type="text/javascript" src="services/documentService.js"></script>
        <script type="text/javascript" src="services/collectionService.js"></script>

        <!-- Controllers -->
        <script type="text/javascript" src="controllers/dashboardController.js"></script>
    </head>
    <body>
        <div class="dashboard-container">
            <iframe id="chatbotFrame" src="about:blank"></iframe>
            <div class="loading">
                <p class="loading-text">Loading...</p>
                <img src="styles/picture.jpg" alt="Mountain">
            </div>
        </div>

        <script>
            // Initialize dashboard when M-Files loads it
            function OnNewDashboard(dashboard) {
                DashboardController.initialize(dashboard);
            }
        </script>
    </body>
    </html>
    The testing was done on "loading-text" and the <img>.
    The image is visible just fine and the path is the same as the path to the css.
    I tested their css by trying to apply color: red; on the text and display: none; on the image. Nothing got applied. 

    Thank you for any help.