URL for an "add page" link on a course home page

[wjlane]

I've been tasked with adding an "Add Page" link to the course home page.  I haven't had any trouble adding the link but I don't think the link I'm using is ideal.  I've found that by linking to course/course_id/pages/anything/edit Canvas will take me to a new page editor with "Anything" inserted as the page title.  But I'm assuming that if I save the page with that title then my link will just edit that page in future rather than creating a new page.  Following this line of thought the next option would be to set "anything" to the current timestamp and then use jquery to clear the title when the page loads (which seems like a hack).

My question is what is the correct url to use to add a new page to a course?

[James · Accepted solution]

 @wjlane ,

Through the UI, a new blank page without a title is created by going to /courses/123/pages and clicking on the Add Pages button. That invokes some JavaScript that adds a form to that page. If you go to that /courses/123/pages page directly, though, you get the list of pages, not the form to add a new page.

In other words, there isn't "a correct url" to create a blank page with no name. Calling a page that doesn't exist is the way to create a page with a name.

You may have been tempted to try /courses/123/pages/edit in the hopes that the /edit with a lack of a page URL would create a blank page. I tried it and it doesn't. It tries to create a page called Edit.

So, what can you do?

You could call that main page, possibly with a query parameter that would let you know that you needed a new page, then you could wait for the page to load and trigger the form generation by sending a click() [or equivalent] to the button. That's probably not the best approach since that page has a lot going on already.

What you suggested would probably work, and would be faster than the first approach I listed. Be sure you check the page name, though, to make sure that it's a timestamp, otherwise you'll prevent someone from creating any new named page.

You can simplify it even more. Instead of creating a page based on the timestamp, you could pick the name of a page that will never exist and continually reuse that one and then use JavaScript to remove the title once the page is loaded like you said. I haven't tested this to see what would happen if two people were editing the page at the same time, but it should work since it doesn't actually create the page in the URL, it creates the page in the name.

Here's some code that does that in limited testing. I'm calling that page that will never be created on its own "Zzz New Page", but obviously you can change that to "Be Sure To Change The Title Before Saving" or something else, just in case the JavaScript fails for some reason.

(function() {
    'use strict';
    var nameOfMagicPage = 'zzz_new_page';
    var magicPageRegex = new RegExp('/courses/[0-9]+/pages/' + nameOfMagicPage + '/edit');
    if (magicPageRegex.test(window.location.pathname)) {
        var el = document.getElementById('title');
        if (el) {
            el.value = '';
        }
    }
})();‍‍‍‍‍‍‍‍‍‍‍

I say limited testing because the form that contains the title isn't included in the page that is delivered to the browser, it's added through JavaScript. If this script runs before that's available, then it won't work. The safe way to handle that possibility is using a Mutation Observer to make sure the page is loaded and the content is available before you try to blank it.

[wjlane]

Thanks for that answer.  Very helpful.  In the end I settled on 'create_a_new_page' as the nameOfMagicPage which worked better than expected as Canvas adds a cleaned up version of the title to the breadcrumb.  So I end up with "Course Name > Pages > Create a new page" as the breadcrumb.  I had no problems clearing out the title field after the page loaded which ensured the page ended up with a different name to the url title.

[James]

Awesome!  That's a nice creative pick for the name that worked well.