In this video I am going to try and show you almost everything you might want to possibly add into a Bootstrap 4.1 navbar component in Wappler, from getting the basic structure, to adding dropdowns, creating a LogOut button. I will even demonstrate how easily you can make it show or hide navigational items dependant on Dynamic Database data and user roles from the Security Provider.
The obvious downside to showing so much is that it takes time, again though as in the previous tutorials skip what you do not need with the handy "SKIP VIDEO TO POSITION" button found below each video tutorial.
This is the seventh video in the Wappler v1.2.3 "Fruit Juice International" training set, in it I am going to show how I already successfully used this on a production website I already created, in great detail; as usual.
Please Note: In tutorial 06. Creating a Wappler Login Form we already created the Dashboard file, added the Bootstrap 4.1.1, jQuery 3.3.1 & App Connect Frameworks, as well as inserted a very simple Page title, To get there quickly please click the link above and once open use the "SKIP VIDEO TO POSITION", choosing "Set GoTo on Success" and in about 30 seconds you will see what was done before you continue.
The components and concepts used within are as follows:
• Using prebuilt Wappler components like Headers > Adding a Dropdown > Removing navigation items > Duplicate elements > Changing navigation text.
• Server Connect with Security Provider to check roles > Linking the provider > Server Connect Security Restrict > Query Database > Query Conditions.
• Link up Server Connect to App Connect > Show / Hide based on user Roles > App Connect Data Formatter and Operators > Server Connect Logout & Button.
• Redirect on App Connect to Server Connect Success.
• Setting HREF Attributes and Removing /# Attributes to avoid Issues.
• Inserting SSI and Wappler caveats > Easier ways to avoid the Server Side Includes Issues.