Solved: How do external settings work

josho · ‎05-09-2018

I have a question about how external settings are supposed to work exactly. I've followed the guidelines here: https://dev.weebly.com/pf_apps_element_settings.html, however I'm still unsure how this is supposed to work. If for example, I wanted to use http://example.com as my site for external settings, and I wanted to allow the user to type their name into a settings field called "firstName". How do I specify that in the manifest, and what does my post back to Weebly look like? Would it just be message.datat = {settings:{"firstName":"Test First Name"}}? I've been struggiling with this for awhile, so any help would be appreciated.

Thanks in advance.

josho · ‎05-11-2018

So...I got no reply on this, but I figured someone may have this same question at some point, so I'll reply to myself with how I got this working.

Add the external settings into your manifest file but set them to "hidden" so they don't appear in the settings dialog
When posting the settings back, don't post the message as data{settings{<key>:<value>}} instead it should be data{<key>:<value>}

This should allow it to work.

View Best Answer >

josho · ‎05-11-2018

So...I got no reply on this, but I figured someone may have this same question at some point, so I'll reply to myself with how I got this working.

Add the external settings into your manifest file but set them to "hidden" so they don't appear in the settings dialog
When posting the settings back, don't post the message as data{settings{<key>:<value>}} instead it should be data{<key>:<value>}

This should allow it to work.

devsupport · ‎05-11-2018

Hello @josho

There are two parts to your question.

1. How do I define external settings for my application, in the manifest.json or in my external site?

Read "Create Element Settings" (External Settings) if you are developing an Element app, and your element app needs more complex or customized settings than are available with the native Weebly Element Settings.

Please note: his is different from the `manage_app_url` property of your manifest.json file of your app. Read the documentation for "How Site Owners Manage Your App". That document explains how users will manage your application's overall usage.

2. If I am using external settings for my application, how do I handle the interaction between Weebly and my external settings application?

For this type of UI/UX, (external element settings) your app will need to implement the PostMessage API on the endpoint you provide in your element's external configuration setting (example below). This endpoint will also need to implement TLS/SSL, properly expose HTTP options for handling PostMessage API requests to/from Weebly, as well as consume the JWT (JSON Web Token) that is provided in the query parameters of the inbound request to verify the client accessing that URL is a valid customer. Here is a manifest.json example of an element which implements external settings.

"elements": [
    {
        "path": "elements/ExampleElement",
        "name": "Example Element",
        "settings": {
            "config": {
                "external": {
                    "url": "https://example.com/:jwt",
                    "label": "Configure Advanced Settings",
                    "height": 250,
                    "width": 400,
                    "modal": true,
                    "fullscreen": false
                }
            },
        "properties": [...]
        }
    }]
}

Does this help answer your question?