Got it! That makes sense!
For simple setups with only a few inputs, it would be easiest not to use a reusable element, and instead have multiple input elements that display the Hotel thing’s name and country as the input values’ initial content where needed. However, to answer your question, @antony is exactly right – you could keep the inputs inside of the reusable element and have workflows that set custom states for those values.
For example, I created a new reusable element called “hotel-form-2”:
Next, on the reusable element itself, add two custom states which will store the value of these inputs as they are changed:
(Note: These custom states must be set on the reusable element itself, not on any of the elements inside of the reusable element – otherwise the custom state values won’t be accessible when creating the page-level workflows)
In order to set the value of these custom states as the input values are changed, you can have two “When an input’s value is changed” workflows, which update the inputs’ corresponding custom states:
(Hotel country input)
(Hotel name input)
Back on the page, you can then save these values in the button workflow by using the reusable element’s custom state values (since the input values are not accessible directly):
(Create button workflow)
This will ensure that the custom state values are used to create a new Hotel thing. When utilizing the reusable element within a form that is updating an existing Hotel (using the “Make Changes to a Thing” action), you will want to make sure that there is a workflow in the in the reusable element which sets the custom state values to the reusable element’s Hotel’s field values when the reusable element’s Hotel data source is not empty:
(Setting the hotel name custom state to be the reusable element’s Hotel thing’s name field value)
(Setting the hotel name custom state to be the reusable element’s Hotel thing’s country field value)
Then, make sure the initial content of the inputs display the reusable element’s Hotel as well (just so it’s easily edit-able):
Editor (reusable element)
And I think that should do it! Please let me know if I can clarify anything, or if you have any questions at all