Message Boards Message Boards

GROUPS:

Create a Cloud Form that Embeds any Published Cloud Notebook

Posted 5 months ago
416 Views
|
0 Replies
|
2 Total Likes
|

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

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