5 Create Profile Pages

Each Row on each Searchable List ends with a button called VIEW that leads to a Details page which is also called a Profile Page. The default Profile Page looks terrible and is hard to customize. In this chapter, we will explain how to replace the Fabrik Details page with a customizable Profile Page. Before we add the new Profile Pages, we will add Housing Provider and Seeker Forms as another example of how to create a community network. This chapter is divided into the following four sections:

5.1 Add Housing Forms

5.2 Add Housing Menus

5.3 Change View Details into Profile Pages

5.4 How to Create a Provider Profile Page

5.1 Add Housing Forms

The process for creating Housing Provider and Housing Seeker forms and lists is similar to the process of creating Job Provider and Service Provider forms and lists that we covered in a previous article.

Designing the Forms…. Questions we will ask
The first three questions are Housing Provider (or seeker) Name, Email and Phone Number.

The fourth question is location. We will create a Table for Housing Provider Cities and Housing Seeker Cities in a Single Select Drop Down Database Join so we can add more cities if needed.

The fifth question is Housing Type Offered (or sought). We will use Multi Select Drop Down Database Join so more than one option can be selected. 14 Housing Type Options will be:

01

The sixth question will be a radio select for Maximum Number of People: One Two Three Four Five or More.

The seventh question will be radio select for Are Pets Allowed
The 7 options are: No, Yes with Additional Deposit, Dog Only, Small Dog Only, Cat Only, Dog and or Cat, Negotiable.

The eighth question will be a radio select for Monthly Rent Range

Under $600 $600 to $1000 $1000 to $1400 $1400 to $1800

More than $1800

We will also need to add a UserID element to connect this form with our Joomla Member Management System.

The last question will be an Additional Info text area box

We will then make group and access levels for Housing Provders and Housing Seekers.We will then make menu items both groups. We will then add Demo Housing Providers and Seekers and test the system. We will finish by validating the required elements on both forms.

5.2 Add Housing Menus

In the last article, we created the Housing Provider and Seeker Info forms we need to run our Housing Exchange network. Each of these forms creates a matching List where we can add new data just by clicking on the Add button. In this article, we will first look at the Housing Provider Info Form and List in the back end and then create menu items to look at the same form and list in the front end. Then in the next article, we will use our Member Registration Form to add our Demo Members and have our Demo Housing Providers fill out the Housing Provider Info form to test how well our Housing Exchange network works.

View our Housing Provider Info Form and List in the Back End
Go to Fabrik Forms, Housing Provider Info and click View Data.

01

We have set these form elements so the only elements shown on the List are Housing Provider City, Housing Provider Name, Housing Type Offered and Rental Price Range. Note that we have reordering the elements to put the Housing Provider City first. Click the back arrow to exit this screen.

Add Housing Provider and Seeker Groups
Go to Users Groups and click New. For Ttle Type Housing Provider. For Group Parent, select Author:

02

Then click Save and Close and repeat for Housing Seeker group.

Add Housing Provider and Seeker Access Levels
Go to Users Access Levels and click New. For Title, type Housing Provider Access. Then check the boxes for Tech Team, Housing Provider and Super User. Then click Save and New. For Title, type Housing Seeker Access. Then check the boxes for Tech Team, Housing Provider and Super User. Then click Save and Close.

Add Module Positions for our New Housing Menus
Before we create our new Housing Network menus, we need to create the positions on the page to put these new menus. Go to Extensions, Templates, Styles. Then click on the Helix template to edit it. Then click Template Options. Then click on Layout. We have previously created a Row called User Menu Row with module positions user1, user2 and User3. Click on the plus sign to add a new row and name it User Menu Row 2. Give it the module positions called position1, position2 and position 3:

5.3 Change View Details into Profile Pages

We have now created a well organized Service Provider list with images and a similar Job Provider list without images. However, the View Details pages look terrible. In this article, we will review how to change all Fabrik View Details pages into professional looking Joomla articles that can be customized by each provider.

Here is our Service Provider List as seen by a logged in Member:

01

Here is our Job Provider List as seen by a logged in Member:

02

However, click on View and the default View Details (also known as the Provider Profile Page looks pretty bad:

03

Our goal is to turn all of our View pages into a Joomla Article page. We are going to have the Provider Profile Page box take over the entire View Page. Before we add more content with this editor, we will first hide the existing elements on our View page.

5.4 How to Create a Provider Profile Page

In this article, we will explain how to create your own Provider Profile Page. All of our lists have a link called VIEW on the right side of each row.

01

Clicking on any VIEW link will go to the Provider Profile page for that particular Provider where you can find out more about the Provider and the Service or Job or Housing they are offering. We have set the elements so that the only elements that show on the Provider Profile Page are the Provider Name and Email Address:

02

If you log in as a Provider (either a Service Provider, a Job Provider or a Housing Provider), and then click on the Provider List you will see a link called EDIT next to the VIEW link.

03

You can click on the EDIT link to edit your Provider Profile Page. Alternately, you can click on Provider Signup and or Edit in your Provider Menu to reach the same Provider Edit page.

Either way, the Provider Edit page is automatically filled with your current Provider Information. Scroll to the bottom of the Edit screen and you will see an area called Provider Profile Page:

04

Provider Page Editor Functions
Let’s take a look at some of the Editor functions we can use to add content to our Provider Profile Page. Here is a closer view of the Editor with an explanation of what some of the buttons mean:

05

Two ways to add Text to the workspace
One way to add text is to start typing in the workspace. This is not a very efficient way. A better way is to create a new Libre Writer document called My Profile Page. Then type in that document. When you are done, you can copy the text and then paste it into your Profile Page workspace. This screen will appear: