Products

Solutions

Learn More

Partners

Community

Blog

About

DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


DNN9: WORKING WITH COMMON COMPONENTS IN THE PERSONABAR

DNN 9: WORKING WITH COMMON COMPONENTS IN THE PERSONABAR

Previously, we called an existing Web API from the persona bar. In this blog post, we’re going to take a look at how to use some of the common components provided.

Useful Blogs

Before we proceed, you may want to reference these blogs:

1.    DNN 9: Persona Bar Architecture

2.    DNN 9: Extending the Persona Bar

3.    DNN9: Adding a ReactJS App to Persona Bar

4.    DNN9: Diving in a ReactJS Persona Bar Extension

5.    DNN9: Calling an existing Web API from the Persona Bar

 

In this post, we’ll start off by taking a look at some of the common components available through myget. As you can see, there is quite a long list of these common components.

In the previous blog post, we worked with the Grid Cell component to set up our user table. In this blog post, we’ll be taking a look at these common components:

1.)  Tabs – These tabs allow you to show data in a tabular manner, easily switching from one view to another.

 

·         Tab props used in this example:

o   selectedIndex – this is the current index of the selected tab (0 is the first). If not set, the component will keep its own internal state for the selected tab.

o   onSelect – this is the function to update the selectedIndex of the tab component

o   tabHeaders – these are the headers that are printed out on the tabs, it takes an array of strings or HTML

o   children – these are the elements printed in each tab, the count of this should match the header count (ie 2 headers, 2 children)

 

2.)  SingleLineInputWithError – hefty name, but it’s exactly what it is. A text input with the capability to add an error state.

                   

·         SingleLineInputWithError props used in this example:

o   value – the value of the text input

o   onChange – the function to update the value of the text input

o   error – whether or not to show red underline and icon

o   label – the label on top of the input (First Name)

o   style – inline style (takes a JS object)

o   tabIndex – the tab index of the input

 

3.)  Button – it is what it is – a button that comes prestyled with the default persona bar styles.

·         Button props used in this example:

o   label – the text inside the button

o   type – primary or secondary, primary being the full blue button

o   onClick – function to run on click

 

 

4.)  Switch – a simple toggle component toggling between on and off on click.

·         Switch props used in this example:

o   label – the label on the lefthand side of the switch (Authorized)

o   value – the value of the switch (T/F)

o   onChange – the function to run on change

 

In this case, we are using these components to create the UI to add a new user.

 

In the screenshot above, we are using several common components. Let’s walk through this.

1.       The first thing we notice are the two tabs: User and Add User. This UI was created via the Tabs component, specifying the two tab headers and two components inside each, so our tabs component can load the appropriate tab when clicked.

2.       Now, for the Add User UI. To set up the two column layout, we are using two Grid Cell components.

3.       On the left hand side, we have three Single Line Input with Error components, along with a switch component.

4.       On the right hand side, we also have three Single Line Input with Error components, along with a switch component.

5.       On the bottom of the add user box, we are using the Button component, cancel having no type set (defaults to secondary), and Add having type “primary”, which turns it into that blue color.

Note: To add validation, you must keep track of the error states in your application, and assign the error flag to each component accordingly. (See props from single line input with error above)


To add create a user functionality, we can take advantage of the props available in these common components. See the code for an example of the implementation on how to create a user using the new Web API.

 

 

 

Comments

There are currently no comments, be the first to post one.

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (25)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (137)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (7)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (272)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (164)
William Severance (5)
DNN Launch Webinar
VIEW ON-DEMAND
DNN Launch Webinar
VIEW ON-DEMAND
DNN Launch Webinar
VIEW ON-DEMAND