Create a button in the HTMLSnippet container

This topic contains 4 replies, has 2 voices, and was last updated by  Joe McShea 1 day, 18 hours ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1919

    HaraldO
    Participant

    Could it be possible to create a button with dynamic JavaScript code in a HTMLSnippet container? Such a button could be useful to start a Microsoft Flow for the current item since this is a missing feature in the classic ui…

    #1920

    Joe McShea
    Keymaster

    This is already possible, but you have to switch the snippet editor to source code (the last button on the button bar). Then you can enter any valid HTML, to include JavaScript. So you can import a script file like:

    <script type="text/javascript" src="yourpath/yourscript.js"></script>
    

    Or you can do inline script, like:

    <script type="text/javascript">
    function onSubmit(e) {
        alert(e);
    }
    </script>
    

    And then you can also add:

    <button type='button' onclick='onSubmit'/>
    

    And Voila.

    Now for a couple of caveats. This is an advanced feature and it assumes you know what you’re doing. Even if you do, if you’re going to do more than a line or two of JavaScript, importing an external script is much better. It’s too easy to put something in the snippet container that screws up the editor, and hard to fix if you do that. But if your script is in an external JS file and it breaks something, you can just rename the JS file so the browser can’t find it, and the editor will work again.

    Same goes for HTML, if you’re going to enter any substantial amount of source, it’s better to do it in an external editor with syntax highlighting and validation. Then copy and paste it into the snippet source editor once you’re sure it’s syntactically sound HTML code.

    The source editor for snippets is basically like coding in notepad, which you can do, but it’s not a good idea. There’s no validation, no syntax highlighting, etc. And if you do something bad and it breaks the editor, you’ll ultimately have to go out to the configuration file in Site Assets and remove it manually to fix it.

    For example, I recently had someone who added a script tag like this:

    <script>
    alert('hello');
    </script>
    

    This script tag caused jQuery to throw an exception, because it’s missing the type attribute. The type attribute is not really required, and assumed to be text/javascript, in HTML5, but SharePoint pages aren’t HTML5 pages, they’re XHTML pages and XHTML requires the type attribute. I did fix the editor so it catches that error, so now it doesn’t break the editor, but there are probably a bazillion other bad syntax errors you could make that would at a bare minimum cause undesirable side effects in the editor.

    None of this is intended to discourage you. You can do some fancy stuff with snippets, and it works quite well. I use this technique pretty regularly to ‘extend’ SPEasyForms a bit for a particular form. But it works better if you put your JavaScript in an external file and make sure your HTML is valid before putting it in the snippet editor.

    Joe

    • This reply was modified 2 weeks, 6 days ago by  Joe McShea.
    • This reply was modified 2 weeks, 6 days ago by  Joe McShea.
    • This reply was modified 2 weeks, 6 days ago by  Joe McShea.
    #1924

    HaraldO
    Participant

    Wow – that’s really cool! Thanks a lot for this information and hints!

    #1925

    HaraldO
    Participant

    I finally managed it to start a Microsoft Flow for the current document :-)… thanks to Joe once again! If anybody is interested I can share the basics of the coding.

    But one new question arised: Could it be possible to “hide when” inside of HTMLSnippets – means such new buttons – for New or Edit or View form?

    #1930

    Joe McShea
    Keymaster

    There isn’t an SPEasyForms specific way to do it, but since you’re already writing a little JavaScript, it’s easy enough to do. Extending the example above, but first adding an id to the button and defaulting the style to hidden, like so:

    <button id='mybutton' type='button' onclick='onSubmit' style='display:none'/>
    

    You can then do something like:

    var page = window.location.pathname;
    page = page.substring(page.lastIndexOf("/") + 1).toLowerCase();
    if (page.indexOf("edit") >= 0) {
        document.getElementById('mybutton').style.display = "block";
    }
    

    This would show the button on any form that contained the word edit in it’s name, and hide it on any other form.

    Joe

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

Scroll to top