Sue Busher Posted September 16, 2016 Posted September 16, 2016 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
Graham Quince Posted September 16, 2016 Posted September 16, 2016 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>
Sue Busher Posted September 20, 2016 Author Posted September 20, 2016 Thanks Graham. Much appreciated
Sue Busher Posted May 4, 2018 Author Posted May 4, 2018 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.
Sue Busher Posted May 4, 2018 Author Posted May 4, 2018 @Simon Law @pconkie As you are both so helpful, I wondered if you'd come across anything like my conumdrum above?
Simon Law Posted May 4, 2018 Posted May 4, 2018 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?
Sue Busher Posted May 4, 2018 Author Posted May 4, 2018 @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?
Simon Law Posted May 4, 2018 Posted May 4, 2018 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?
pconkie Posted May 4, 2018 Posted May 4, 2018 (edited) 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. 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 If the cover file has not been uploaded yet...... Code follows.... Edited May 4, 2018 by pconkie
pconkie Posted May 4, 2018 Posted May 4, 2018 <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!
pconkie Posted May 4, 2018 Posted May 4, 2018 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>
Sue Busher Posted May 8, 2018 Author Posted May 8, 2018 @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>
Simon Law Posted May 8, 2018 Posted May 8, 2018 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
pconkie Posted May 8, 2018 Posted May 8, 2018 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'.
Sue Busher Posted May 10, 2018 Author Posted May 10, 2018 @pconkie Why won't I need a hidden network file? @Simon Law Thank you - will give it a try.
pconkie Posted May 10, 2018 Posted May 10, 2018 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.
Sue Busher Posted May 11, 2018 Author Posted May 11, 2018 @pconkie Now I'm confused. Are you able to see my Frog sites? I have created a 'Cover Test' site but struggling to get this to work Sorry, people with a little bit of knowledge can be dangerous!
pconkie Posted May 11, 2018 Posted May 11, 2018 No, I cant see your site unless you make it available on the net and post the link. Simon has magic powers....
Sue Busher Posted August 29, 2018 Author Posted August 29, 2018 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
Simon Law Posted August 29, 2018 Posted August 29, 2018 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
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now