Options
  • State Suggested Answer
  • Replies 5 replies
  • Answers 2 answers
  • Subscribers 12 subscribers
  • Views 119 views
  • Users 0 members are here
Related

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

Dominik

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

  • 0

    It's very much possible.  Just use relative paths for the files.  What have you tried?

  • 0

    I suggest testing it in the classic web client and using the F12 dev tools to inspect your HTML. That might give you a better view of what's going on and where the problem might be. Remember to log out the user between making changes to your files and that the sysapps folder doesn't work in the web client.

    Separate CSS and JS files definitely work in UIXv1 - I am using this all the time in Kanbanoo.

  • 0 in reply to Craig Hawker

    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.

  • 0 in reply to Dr. Martin Lisowski

    Hello, thank you for the good idea. I tried to put my app on classic web, but I stumbled upon some weird issue where when I had the application in sysapps folder, it worked "fine" (meaning the application does not work, like I described above in this post), but then after installing it on server it did not work at all. It was a white page - the dashboard got opened via shellui, but no HTML was displayed. I updated the appdef.xml with <platform>Web</platform>, so not sure what I did wrong. Didn't have much time to search for some solution either.

    Also when I wanted to solve this problem I described now, I didn't really know where to look in the F12 on MFiles web, since there are so many things happening there with metadata and other things that I was confused as to what was for my application and what was some other data.

  • 0 in reply to Dominik

    You need to remove / rename the sysapps folder when working with the web client otherwise later desktop client will be confused to find two instances of the same app GUID.

    If your HTML is displayed as dashboard that's already great.

    If your CSS seem to have no effect: double check that your CSS file is correctly included in the mfappx file (including path). Then also check CSS itself for correctness.

    In the browser devtools you should look at the Elements tab. A listing dashboard will run in an IFRAME. You can click on elements on the actual page and then have them highlighted and also see applied CSS styles/rules in the Styles sub-tab of the Elements tab. That's a great tool to debug CSS issues. You should get familiar with the devtools otherwise you'll have a difficult time developing a web app.

M-Files
M-Files Support


© 2024 M-Files, All Rights Reserved.