Discuss

Using Partials with NodeJS

On this page

What are Partials

Wappler allows you to create and reuse partials in your NodeJS Projects. Partials are useful when you want to create reusable components and include them in some of your pages. Unlike the content which you include in your layout pages, which is used across all the pages using this layout, partials can be included on just some of your pages. You can include anything inside a partial - a navbar, a banner, a contact form, an image gallery etc.

Creating Partials

We have already created a layout and a page from it:

Screenshot_2|690x407

We'd like to include a partial on our page. There are two ways to create a partial - creating a new partial from scratch or moving an existing content/component from a page to a partial.

Creating a new Partial

We'd like to create a banner, which shows some promo image and add it to several of our pages. Select Partials in the Pages Manager:

Screenshot_3|690x407

Click the create new button:

Screenshot_4|690x407

Add a name for your partial:

Screenshot_5|690x407

Type should be set to Partial:

Screenshot_6|690x407

Click Save:

Screenshot_7|690x407

Your partial will be loaded in Design View. Select App in the App Structure panel and select your layout page from the dropdown. This way the partial will know where to add any includes if required:

Screenshot_1|690x405

You can add your content here:

Screenshot_8|690x407

We add a container:

Screenshot_9|690x407

And then an Anchor Image inside it:

Screenshot_10|690x407

Setup your link:

Screenshot_11|690x407

Then select your banner image:

Screenshot_12|690x407

We select it in the assets picker dialog:

Screenshot_13|690x407

And we enable the responsive option for the image:

Screenshot_14|690x407

Save your page and you are done. Now let's add this partial on your page(s).

Adding Partials on Your Pages

Open a page where you want to use this partial on. Click the add element button, where you need to add the partial:

Screenshot_18|690x407

In the Content menu select Partial:

Screenshot_19|690x407

And select your partial from the dropdown:

Screenshot_20|690x407

And you can see your partial included on the page:

Screenshot_21|690x407

This way you can include your partial on any page.

Moving Page Content to a Partial

You can move any content from your page to a Partial and then reuse it on your other pages.

Select the element/component which you want to move to a Partial (1) and click the Move to Partial button (2):

Screenshot_3|690x405

And you are done! Your partial appears in the Partials menu of the Pages Manager:

Screenshot_4|690x405