hub.eb?material_id=161

Component with Bootstrap navbar


A component is reusable piece of functionality, and can be anything from headers and footers to menus to entire sub-applications.

In this tutorial you will create a part-page component and embed another component within it that contains a Bootstrap navbar.

Steps


1

Create a new part page component in the VerjSamples folder by right-clicking in the Entities panel.

Call it header.

2

Go to the Component properties  and change the presentation template to bootstrap4.

3

Right-click in Component in the Outline view, go to Add control to component and select Part page component.

Find the navbar component, give it a prefix of header_ and choose to embed it.

Embedding a component creates an editable copy of the original component. An embedded component is no longer linked to the original and is therefore unaffected by any changes made to the original. 

Test  your component in the browser.

4

Create a new form in VerjSamples and call it myComponent

Right-click in the Outline panel, go to Add control to page and select Part-page component

Find the header component, give it a prefix of p1_ and link it to your page.

A linked component is maintained independently of the applications that it's deployed to.

5

Save and run your form to see your header component appear. 

6

Create a new form and call it myComponent2. Add your header component to the form and save.

7

Go to your component and add a panel with a yellow background, or make any obvious change, and save.

8

Deploy your changes.

Clicking  will display a list of all the forms your component is linked to. The list should display myComponent and myComponent2.

Select all and click Deploy. The Status column will show Deployed when it's done. 

Check both your forms and you'll see your changes have appeared. 

Related