Jump to content

Sue Busher

Recommended Posts

Hi

We use SIMS and cover lists are generated as HTML files. We used to be able to pull this into Frog 3 via Frog web, but can't do that any longer. It was suggested that I created a file drop and dragged and dropped the HTML files into it, placing an HTML widget above it and asking it to displace the files in file drop. Done that, and it works.... BUT the files, whilst dated chronologically don't display that way. eg 160916, 170916, 180916, 200916, 210916, 220916 display as 200916, 210916, 220916, 160916, 170916, 180916 which is really frustrating.

Does anyone have any HTML code I can add in that woud fix the order in which it is shown?

 

<div id="coverpage"></div>

<script type="text/javascript">

var baseURL = Frog.Utilities.getBaseUrl(),
    // Change fileDropUuid to the UUID of your file drop widget
    fileDropUuid = '70BDB7422002874EC49D5FBFB7EEAC03C6C22C9CB651A4D8';
Frog.Model
    .api('filedrop.get', {
        filedrop: fileDropUuid
    }).done(function(filesResponse) {
        var $fileList = $('#coverpage');
        filesResponse.data.resources.forEach(function(file, index) {
            // Check whether the file is one of these filetypes; Want to add more? Add to the array
            if (['html','htm'].indexOf(file.file.ext.toLowerCase()) > -1) {
                     console.log(file);
                    // This only runs when you have uncommented the the HTML code above
                    // This code adds file names to the ul#filelist
                    $fileList.append(
                      '<iframe width="800" height="300" style="margin-left:auto; margin-right:auto;" src="'+  
                      baseURL + '/app/file/resource/' + file.file.uuid + '.' + file.file.ext +
                      '"></iframe>'
                    );


            }
        });
    });
</script>

 

OR
Anyone got a better way of doing this? I am not popular with the teaching staff at the moment :(

Link to comment
Share on other sites

Hi @Sue Busher

 

Try this:


<div id="coverpage"></div>

<script type="text/javascript">

var baseURL = Frog.Utilities.getBaseUrl(),
    myCoverArray=[],
    // Change fileDropUuid to the UUID of your file drop widget
    fileDropUuid = 'BF6DD930200280DA4017FF1E53A2210D7607BA4C89189C5F';
Frog.Model
    .api('filedrop.get', {
        filedrop: fileDropUuid
    }).done(function(filesResponse) {
        var $fileList = $('#coverpage');
        filesResponse.data.resources.forEach(function(file, index) {
            // Check whether the file is one of these filetypes; Want to add more? Add to the array
            if (['html','htm'].indexOf(file.file.ext.toLowerCase()) > -1) {
                    myCoverArray[index]=[file.file.name,'/app/file/resource/' + file.file.uuid + '.' + file.file.ext];
            }
                     
        });
        myCoverArray.sort();
        for (var i = 0; i < myCoverArray.length; i++) {
            //console.log(myCoverArray[i][0]);
            $fileList.append(
                      '<iframe width="800" height="600" style="margin-left:auto; margin-right:auto;" src="'+  
                      baseURL + myCoverArray[i][1] +
                      '"></iframe>'
                    );
        }
    });
</script>

 

Link to comment
Share on other sites

  • 1 year later...

OK. Despite my post ages ago, we didn't quite get it working how we'd have liked and I figure that other schools must have faced / fixed similar issues.

So SIMS generates an HTML file and places it into a folder on our network.

Our ideal would be for the system to automatically display what's in that folder on the network (rather than us having to upload it into the file drop widget) and for it to display as a series of hyper links e.g. :

Cover for this coming week

Monday, 30 Apr 2018

Tuesday, 1 May 2018

Wednesday, 2 May 2018

Thursday, 3 May 2018

Friday, 4 May 2018

Saturday, 5 May 2018

Sunday, 6 May 2018

All of the dates are the files uploaded in the file drop widget, which when clicked on would open up.

Has anyone created anything like this? Is it at all possible? Would really appreciate people sharing their 'cover pages' on Frog.

Thanks in advance.

Link to comment
Share on other sites

6 minutes ago, Sue Busher said:

@Simon Law @pconkie

As you are both so helpful, I wondered if you'd come across anything like my conumdrum above?

Well, if your description of the problem is correct, the file is dropped onto a network drive, so could you not drop a network widget onto the page, displaying all the files in that directory, which you could then open ..... or am I missing an important piece of the jigsaw? 

Link to comment
Share on other sites

@Simon Law Its so hard to describe. I am effectively after a menu which when clicked on would open the files. SIMS creates all these HTML documents and a master menu, if I use file drop, it doesn't display the master menu and shows all the documents - which is a bit overwhelming as we are a large school. However, as it wouldn't be me updating it every week, it would  need to be very simple to update. I can't drop the files as it contains personal data. Do you know how other schools have addressed this problem?

Link to comment
Share on other sites

36 minutes ago, Sue Busher said:

@Simon Law Its so hard to describe. I am effectively after a menu which when clicked on would open the files. SIMS creates all these HTML documents and a master menu, if I use file drop, it doesn't display the master menu and shows all the documents - which is a bit overwhelming as we are a large school. However, as it wouldn't be me updating it every week, it would  need to be very simple to update. I can't drop the files as it contains personal data. Do you know how other schools have addressed this problem?

I think I see the problem better now.

I know I am thinking outside the Frog, but if a link could be made to open a new browser window that opened up the master menu, then you would then be able to view the day files by clicking on one of the links.

eg 

<a href="file:///S:/Path/to/Your/MainMenu.html" target="_blank">Weekly Cover</a>

where S is the network drive and the path goes to the main menu

Or is the main menu not usable as a index page?

Link to comment
Share on other sites

Hi @Sue Busher

@Simon Law suggestion is the simplest and most sensible approach. Although of course it won't work for staff checking for cover at home before coming into school.

If you are happy that somebody continues to upload the htm file to the filedrop every day, then I have the following suggestion.

Capture.PNG.c9682ff3caca3b5ab734c50cf30910e2.PNG

Use javascript to build the weekly menu that you want.  Each Sunday the menu will change automatically to show the new week.

You can get rid of the bullet points with some css if you like and we could develop the menu to show previous and future weeks,

Clicking on the link shows the cover from the filedrop that it has been uploaded into

Capture3.PNG.8df03e2ef6839bfeee8b44f1ab4b0ef2.PNG

If the cover file has not been uploaded yet......

Capture2.PNG.e1d9a239661624597a30387dc4b6f4ac.PNG

 Code follows....

Edited by pconkie
Link to comment
Share on other sites

<div data-name="cover"></div>

<script>
    var baseURL = Frog.Utilities.getBaseUrl();
    var fileDropUuid = '8699F48D20028AEE0C759F6DDDD9DC08FBC798FC781A69D6'; 
        
    var today = moment();
    var daysSinceMonday = today.isoWeekday() - 1;     
    var thisMonday = today.subtract('days', daysSinceMonday);
    $('[data-name="cover"]').append("<h3>This Week's Cover</h3><ul>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.add('days',1).format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.add('days',1).format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.add('days',1).format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.add('days',1).format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("</ul>");
       
    
    $("a[data-type]='coverlink'").die("click");
    $("a[data-type]='coverlink'").live("click", function () {
        var fileToFind = $(this).data("id");
        Frog.Model
            .api('filedrop.get', {
            filedrop: fileDropUuid
        }).done(function(filesResponse) {
            var found = false;
            filesResponse.data.resources.forEach(function(file, index) {
                if (file.file.name == fileToFind) {
                    found = true;
                    window.open(baseURL + '/app/file/resource/' + file.file.uuid + '.' + file.file.ext);
                }
            });
            if (found == false) {
                alert("No cover.....yet!");
            }
        });   
    });  
</script>

Don't forget to change the filedrop uuid back!

Link to comment
Share on other sites

Some explanation for those wishing to amend

//div for adding our menu to the page
<div data-name="cover"></div>

<script>
  //gets the domain name of your frog server - used to create link to cover file later
    var baseURL = Frog.Utilities.getBaseUrl();
//uuid of the filedrop (that is hidden on the page) that contains the uploaded cover files
    var fileDropUuid = '8699F48D20028AEE0C759F6DDDD9DC08FBC798FC781A69D6'; 
      
//get todays date
    var today = moment();
//how many days ago was last Monday? Hopefully Monday = 1 and Sunday = 7
    var daysSinceMonday = today.isoWeekday() - 1;   
//get last Mondays date
    var thisMonday = today.subtract('days', daysSinceMonday);
//add the title to the div
    $('[data-name="cover"]').append("<h3>This Week's Cover</h3><ul>");
//add the link for Monday etc to the div
//key here is that the data-id tag is going to contain the filename eg. CV040518 which we will try to match later
//data-type is used to identify the link as a special cover link so that we can add the onClick instructions
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.add('days',1).format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.add('days',1).format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.add('days',1).format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.add('days',1).format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("</ul>");
       
//this next line stops the live event being added multiple times if you move from live to edit and back again in frog
    $("a[data-type]='coverlink'").die("click");

//these are the instructions for what to do when a link is clicked on
    $("a[data-type]='coverlink'").live("click", function () {
      //pull the data-id out of the link and use it to match against a file name in the filedrop
        var fileToFind = $(this).data("id");
      //access the filedrop api using the uuid of our filedrop
        Frog.Model
            .api('filedrop.get', {
            filedrop: fileDropUuid
        }).done(function(filesResponse) {
            var found = false;
            filesResponse.data.resources.forEach(function(file, index) {
              //loop through all of the files in the fildrop and see if the file we are looking for is there...
                if (file.file.name == fileToFind) {
                    found = true;
                  //if it is open a new windoe/tab and show us the bad news (cover)
                    window.open(baseURL + '/app/file/resource/' + file.file.uuid + '.' + file.file.ext);
                }
            });
            if (found == false) {
              //if after trying every file we have no match displaya sutable message to the user
                alert("No cover.....yet!");
            }
        });   
    });  
</script>

 

Link to comment
Share on other sites

@Simon Law @pconkie

Thank you so much guys. Our preference is as Simon suggests as effectively once the files are moved into the appropriate folder its job done.

So if I put a HTML wigdet on the page, together with a hidden network folder. would the code you suggest (providing I rename it to match our network drive and the menu file), the main menu HTML file would appear?

 

<a href="file:///S:/Path/to/Your/MainMenu.html" target="_blank">Weekly Cover</a>
Link to comment
Share on other sites

1 hour ago, Sue Busher said:

@Simon Law @pconkie

Thank you so much guys. Our preference is as Simon suggests as effectively once the files are moved into the appropriate folder its job done.

So if I put a HTML wigdet on the page, together with a hidden network folder. would the code you suggest (providing I rename it to match our network drive and the menu file), the main menu HTML file would appear?

 


<a href="file:///S:/Path/to/Your/MainMenu.html" target="_blank">Weekly Cover</a>

Hi @Sue Busher your html above should work, however, Frog may hijack the clicking of the link in which case

<span onclick="window.open('file:///S:/Path/to/Your/MainMenu.html', '_blank')">Weekly Cover</span>
or
<div onclick="window.open('file:///S:/Path/to/Your/MainMenu.html', '_blank')">Weekly Cover</div>

may yield results

Link to comment
Share on other sites

2 hours ago, Sue Busher said:

@Simon Law @pconkie

Thank you so much guys. Our preference is as Simon suggests as effectively once the files are moved into the appropriate folder its job done.

So if I put a HTML wigdet on the page, together with a hidden network folder. would the code you suggest (providing I rename it to match our network drive and the menu file), the main menu HTML file would appear?

 


<a href="file:///S:/Path/to/Your/MainMenu.html" target="_blank">Weekly Cover</a>

You won't need a hidden network folder widget.  And you should put some text on the page explaining that nothing will happen if they click on the link at home.  I've always found that its better to explain that something is by design rather than have them think frog is 'broken'.

Link to comment
Share on other sites

5 hours ago, Sue Busher said:

@pconkie

Why won't I need a hidden network file?

 

@Simon Law  Thank you - will give it a try.

Sorry Sue, I thought you were talking about hiding a network files widget on the frog page where you are going to have these links.  Now i'm thinking you might mean a hidden network share?  So staff will need access to:

S:/Path/to/Your/MainMenu.html

But you won't need to have a frog network widget pointing at this on the page.

Link to comment
Share on other sites

  • 3 months later...
6 hours ago, Sue Busher said:

 

I have been asked to get our new website live in the next day or so, but this is still holidng is up. 

I am confused about what I need to do (or my IT colleagues). Can you help @Simon Law

 

Hi Sue,

I have looked at your cover site and there seems to be several attempts to use a FileDrop and a link and a network drive widget.

The links will not work as the browser forbids you to open files on your system from a web page.

The FileDrop has no files, so I can't see it working, I have changed the HTML widgets to use the right FileDrop

In setting the above, the save removed the network file share and directory, so that will need setting again.

So, to move forward, add the files to the filedrop so we can see if we can get the HTML widget working,

Reset the Network Widget to point to the MIS directory, so we can see if you can use the index file in there

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...