Equivalent to Bubble's "Reusable Elements and State Inputs" in Wappler

From Bubble to Wappler
1

Hey everyone…

So as I developed in Bubble, I made a huge amount of use of their “Reusable Elements”, which are sections of a design you can define once then re-use (instantiate) in different parts of your project.

So in some ways they feel like a Server Side Include.

Except that you could define “states” on them which would allow each instance to be passed and to return different values. So they became the HTML equivalent of a software procedure call.

Now I want to do the same thing in my Wappler based design, and I’m wondering:

  1. Is this possible
  2. The best way to do it

I’d love to hear your thoughts!

Best wishes,
Antony.

PS - here are some use cases…

A use case I will come across shortly is a booking form which can allow up to 6 people to book on an event. The code for each person to book is the same, but the values to pass in and out of that code is different.

Other use cases may not be so linear in their structure, and I may just need the same GUI to be displayed in different parts of my app depending on the situation, but with different data each time.

2

Can you explain this case a little more Antony?

3

It’s not very clear which part you want to be reusable - the layout or the logic/handling ot both?

Maybe try to supply more use cases.

4

HI there @George… we maybe I’ll ask some more specific questions as they occur.

So first question:

If I create a SSI which contain items with an id, for example:

<p id="para1">Hello</p>

Then I include that SSI twice on the same php page, is that a problem because I have effectively used the same id twice?

5

Why would you include the same SSI twice?
And yes, it’s wrong to have two same IDs on the same page.
In your browser the page is rendered as:

<html>
...
...
<body>
    <p id="para1">Hello</p>
    <p id="para1">Hello</p>
</body>
</html>
6

Because I want the same functionality at two different places on my page and I don’t want to maintain the same code twice.

in Bubble you do this with a “Reusable Element”, and I’m trying to work out the equivalent functionality here in Wappler Land…

(but obviously with more than a <p> tag!)

7

Well, maybe if you provide a clear example of the exact use case we will be able to assist what’s the best way to achieve this.

8

So here is an example… I have some code to view a “populated message template”… so the template may say Hello [First Name], and the populated version says Hello Teodor. Here is how it looks in reality:

view
view685×569 47 KB

I want to be able to instantiate this “Message Template Viewer” in various places on the page where different kinds of message templates are being managed.

In Bubble I could just define the code for this in a “Reusable Element” and instantiate it where ever I wanted to.

How do I do that in Wappler?

I was imagining storing the code for this to be in a file called ssi_message_template_viewer.php and then including it at various places on the page, but maybe there is a better way!

9

Sorry it's not clear to me which part exactly of your screenshot needs to be reusable, and why would you want to show any of these two on a same page?

And by saying this:

what do you mean by page? A single html document? Different html documents? Different SPA content pages?

10

Hi @Teodor...

My design functionality requires that.

On my index.php page.

The code to "instantiate multiple times" below!

Best wishes,
Antony.

<section id="s_message_template_view_left" dmx-show="window_activities_left.value=='message_template_view'" class="section_right_on_left">
	<div class="d-flex header_right_on_left justify-content-between" id="d_message_template_view_header">
		<p dmx-on:click="window_activities_left.setValue(browser.viewport.width>=768?window_activities.value:'hide');window_activities_right.setValue('message_template')" class="icon_back_right"><i class="fas fa-arrow-left"></i></p>
		<h6 class="title_right m-0">View Populated Message</h6>
		<p></p>
	</div>

	<div class="container-fluid container_field" id="c_message_template_view_message" class="mt-3">
		<div class="row row_label">
			<label for="i_message_template_view_message" dmx-hide="hide_labels.value==1">{{apptext.value.2640}}</label>
		</div>
		<div class="row row_input">
			<p class="icon_field c_blue1" dmx-style:visibility="show_input_icon.value==0?'hidden':'visible'" data-trigger="hover" data-placement="auto">
				<i class="fas fa-sms" dmx-bs-tooltip="apptext.value.2641"></i></p>
			<div class="div_input">
				<div class="container container_right_view_message">
					<p class="" dmx-html="view_message_template.data.view_message_template.view_messaging"></p>
				</div>
			</div>
			<p dmx-on:click="show_help.items.contains(2640)?show_help.remove(2640):show_help.addUniq(2640)" dmx-style:visibility="show_help_icon.value==0?'hidden':'visible'" class="icon_help">
				<i class="far fa-question-circle"></i>
			</p>
		</div>
		<div class="row row_help" dmx-show="show_help.items.contains(2640) || show_all_help.value==1">
			<p dmx-html="apptext.value.2649"></p>
		</div>
	</div>

	<div class="container-fluid container_field" id="c_message_template_view_email">
		<div class="row row_label">
			<label for="i_message_template_view_email" dmx-hide="hide_labels.value==1">{{apptext.value.2650}}</label>
		</div>
		<div class="row row_input">
			<p class="icon_field c_blue1" dmx-style:visibility="show_input_icon.value==0?'hidden':'visible'" data-trigger="hover" data-placement="auto">
				<i class="far fa-envelope" dmx-bs-tooltip="apptext.value.2651"></i></p>
			<div class="div_input">
				<div class="container container_right_view_title">
					<h5 class="" dmx-html="view_message_template.data.view_message_template.view_title"></h5>
				</div>
				<div class="container container_right_view_email">
					<p class="" dmx-html="view_message_template.data.view_message_template.view_email"></p>
				</div>
			</div>
			<p dmx-on:click="show_help.items.contains(2650)?show_help.remove(2650):show_help.addUniq(2650)" dmx-style:visibility="show_help_icon.value==0?'hidden':'visible'" class="icon_help">
				<i class="far fa-question-circle"></i>
			</p>
		</div>
		<div class="row row_help" dmx-show="show_help.items.contains(2650) || show_all_help.value==1">
			<p dmx-html="apptext.value.2659"></p>
		</div>
	</div>

</section>
11

I think what he asking for is a template engine with support for partials :slight_smile:

2 Likes
12

And this piece of code needs to be displayed like 5 times on a same php document and all the instances need to be displayed always at the same time?

13

Good question!

No, only one will be displayed at once. Hence the database references will work okay, I’m guessing it is just the ids that are a problem? Since there is no form or anything iike that, I guess i could just strip them all out…

14

I'm sorry, this is double-dutch to me... (apologies to those from the Netherlands... it is an English expression meaning "I don't understand!")

15

The equivalent to Bubble reusable elements in “our” world.

16

Yes, he is indeed! :slight_smile:

17

You should be voting this then :slight_smile:

3 Likes
18

@Antony either don’t use IDs or use some javascript to append a unique integer to each of them. See this post for some ideas : https://stackoverflow.com/questions/30612885/using-javascript-to-generate-unique-ids-for-div-tags-html

1 Like