Show previously entered value in text field in custom integration

[roland-d]

Hello,

Thanks for the help in the other question I had :)

Something new has come up and I am basically stuck :(

So I am building a custom integration for FileMaker and it works great as you can see in this screenshot:

What the problem is the empty input box above the fields. Here a user enters the Filemaker layout they want to use and then click on the sync button. All that works as well because the fields are loaded.

My issue is that after saving the form I get back to the Integration tab and the input field is empty. The data is actually stored because I can get it with Twig via {% set layout = form.settings.integrations[handle].layout ?? '' %} but I am at a loss on how to get Vue to use this value.

Could you tell me how to show a previous entered value in the input field?

I am rendering the input field like this:

<input type="text" id="layout" name="layout" autocomplete="off" aria-required="true" class="text fullwidth" :value="globalParams.layout" @input="input('globalParams.layout', $event.target.value)">

The globalParams is a copy-paste from the Sharp Spring template found in Formie.

Thank you.

[engram-design]

I think you might need to include the :run attribute. This basically allows you to run code when Vue runs, which is pretty neat! What this does is basically populate the globalParams.layout prop with the value from Twig, if it's set. You can see this is the SharpSpring integration.

<input :value="globalParams.endpoint" @input="input('globalParams.endpoint', $event.target.value)">

We can't use v-model due to this being in a scoped slot, otherwise this would be a bit more concise. So we use the expanded :value/@input syntax. globalParams is essentially an empty object that we can use to add whatever variables you need.

But - we need to populate it somehow from Twig.

{% set endpoint = form.settings.integrations[handle].endpoint ?? '' %}

<input :value="globalParams.endpoint" @input="input('globalParams.endpoint', $event.target.value)" :run="!globalParams.endpoint ? globalParams.endpoint = '{{ endpoint }}' : true">

Here, we mix Vue and Twig which will essentially output: :run="!globalParams.endpoint ? globalParams.endpoint = 'my-endpoint' : true". As you can see, we're populating globalParams.endpoint with a value when first run.

I think that should help!

[roland-d]

Hello @engram-design Thank you for that, this worked. I actually did have the SharpSpring file open as well for reference. Somehow I must have not done something right with the run command :)