Message Boards Message Boards

Create a Cloud Form that Embeds any Published Cloud Notebook

Posted 4 years ago

The new Wolfram Notebook Embedder library is pretty cool, and I've been using it a lot for various things. One of those things is making the embedder easy to use by having it be applied from a template to form data supplied in a form.

I understand it's a bit silly to embed a cloud notebook in cloud hosted HTML, but it's got some utility as a proof-of-concept for some bigger, more complex thing.

Anyway, here's what I did:

Create the template

You can import some HTML that contains the <script> tag used to get the embedder library, along with whatever slots you want the template to fill:

(*HTML*)
<!DOCTYPE html>
    <html>
        <head>
            <title>Basic Example</title>
            <script crossorigin src="https://unpkg.com/wolfram-notebook-embedder@0.1/dist/wolfram-notebook-embedder.min.js"></script>
        </head>
        <body>
            <h1>A Basic notebook with a Manipulate</h1>
            <h2>Created by: <wolfram:expr>$WolframID</wolfram:expr></h2>
            <div id="container"></div>
            <script>
                WolframNotebookEmbedder.embed( "<wolfram:slot id='url' />", document.getElementById('container'), {allowInteract: true});
            </script>
        </body>
    </html>

Note the TemplateSlot with the id 'url'...

Create the template after import:

    html = XMLTemplate[
      Import[FileNameJoin[{NotebookDirectory[], "body.html"}], "String"]]

Create the form

The body of FormFunction is where you're going to stash TemplateApply to take the user-provided string and inject it into the corresponding TemplateSlot:

form = FormFunction[

  "url" -> <|
    "Hint" -> "Insert path to cloud notebook",
    "Interpreter" -> "String",
    "Label" -> "CloudObject link"
    |>,

  TemplateApply[html, <|"url" -> #url|>] &,

  AppearanceRules -> <|
    "Title" -> "Embed your Cloud Notebook!",
    "Description" -> 
     "Use the Wolfram Notebook Embedder library to embed your cloud \
notebook into an HTML webpage",
    "SubmitLabel" -> "Embed"
    |>
  ]

Deploy the form

Deploy the form with whatever permissions you want:

CloudDeploy[form, "embedForm", Permissions -> "Private"]

Embed a cloud notebook!

Here's the published notebook that will be embedded: enter image description here

Give the link to the form: enter image description here

Embed and enjoy! enter image description here

POSTED BY: Jesse Dohmann
Reply to this discussion
Community posts can be styled and formatted using the Markdown syntax.
Reply Preview
Attachments
Remove
or Discard

Group Abstract Group Abstract