Building a Multi-Page Private Portal (20 mins)
Completion requirements
01 Getting Started
This tutorial explores how to create a secure portal on Titan Web.
02 Setting Up SmartV
1. Click on the Gear Icon and choose the User Access option in the side menu.
2. Ensure that the toggle switch for SmartV is set to on.
3. Then click on the gear icon next to the toggle switch to configure the SmartV Login.
![Screenshot of the Titan project settings displaying the user access tab showing how to enable smart v](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/smartV.png)
4. Configure the object and value that you will use to log into the project.
![Screenshot of configure smartv log in window displaying the log in step](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/loginConfig.png)
5. Add an additional field with the + Add a Field button and choose Last Name from the drop-down list. Click on the Next button to proceed.
![Screenshot showing how to add the additional field login](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/loginAddAField.png)
6. Set up your conditions to allow or restrict certain users from logging in to your portal using the drop-down menus.
We have set up a condition that only allows Salesforce users who have the demo checkbox ticked in Salesforce to log into our portal.
7. Click on the Next button.
![Screenshot of the Configure SmartV Login window displaying the condition step](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/loginConditions.png)
8. Configure Authentication for an additional security layer for user login. This step adds a one-time password (OTP) to log in and is set to a user’s email.
9. Click on the gear icon next to the Salesforce radio button to configure email details.
![Screenshot of the Configure SmartV Login window displaying the authentication for salesforce step](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/loginAuthentication.png)
10. Add the email address you would like to use to send the OTP email via Salesforce and then click on the Apply button.
The next step in SmartV config is the Profile section.
![Screenshot of the configure send email via salesforce window](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/configureEmail.png)
11. Turn the toggle switch on if you would like to include a profile page. We will not add a profile page in this tutorial.
12. Click on the Next button.
![Screenshot of the configure SmartV login window displaying the profile step](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/loginProfile.png)
13. Turn the toggle switch on to include a registration page so users can create a contact in Salesforce.
14. Select the Standard or Custom radio button and click the Next button.
For this tutorial, we have used a Custom pre-built registration page, but you can use the standard option if you wish.
![Screenshot of Configure SmartV Login displaying the Registration step](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/loginRegistration.png)
15. Decide if you want to pass any parameters from records into the portal. Use the + Add a Parameter button to insert a new parameter.
16. Click on the Generate SmartV Login.
![Screenshot of the Configure SmartV Login window displaying the Parameters step](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/loginParameters.png)
2. Ensure that the toggle switch for SmartV is set to on.
3. Then click on the gear icon next to the toggle switch to configure the SmartV Login.
![Screenshot of the Titan project settings displaying the user access tab showing how to enable smart v](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/smartV.png)
4. Configure the object and value that you will use to log into the project.
![Screenshot of configure smartv log in window displaying the log in step](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/loginConfig.png)
5. Add an additional field with the + Add a Field button and choose Last Name from the drop-down list. Click on the Next button to proceed.
![Screenshot showing how to add the additional field login](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/loginAddAField.png)
6. Set up your conditions to allow or restrict certain users from logging in to your portal using the drop-down menus.
We have set up a condition that only allows Salesforce users who have the demo checkbox ticked in Salesforce to log into our portal.
7. Click on the Next button.
![Screenshot of the Configure SmartV Login window displaying the condition step](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/loginConditions.png)
8. Configure Authentication for an additional security layer for user login. This step adds a one-time password (OTP) to log in and is set to a user’s email.
9. Click on the gear icon next to the Salesforce radio button to configure email details.
![Screenshot of the Configure SmartV Login window displaying the authentication for salesforce step](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/loginAuthentication.png)
10. Add the email address you would like to use to send the OTP email via Salesforce and then click on the Apply button.
The next step in SmartV config is the Profile section.
![Screenshot of the configure send email via salesforce window](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/configureEmail.png)
11. Turn the toggle switch on if you would like to include a profile page. We will not add a profile page in this tutorial.
12. Click on the Next button.
![Screenshot of the configure SmartV login window displaying the profile step](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/loginProfile.png)
13. Turn the toggle switch on to include a registration page so users can create a contact in Salesforce.
14. Select the Standard or Custom radio button and click the Next button.
For this tutorial, we have used a Custom pre-built registration page, but you can use the standard option if you wish.
![Screenshot of Configure SmartV Login displaying the Registration step](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/loginRegistration.png)
15. Decide if you want to pass any parameters from records into the portal. Use the + Add a Parameter button to insert a new parameter.
16. Click on the Generate SmartV Login.
![Screenshot of the Configure SmartV Login window displaying the Parameters step](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/221767634/loginParameters.png)
03 Create a Customized Welcome Message for a Logged In User
You can view your parameters in the custom variables.
1. Click on the gear icon and choose the Tools option from the side menu.
2. Then click on the gear icon next to Custom Variables.
![Screenshot of the Titan project settings displaying the Tools tab](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/426362776/customVariables.png)
This portal populates the variable from the SmartV login.
![Screenshot of the Custom Variables window displaying the static variables tab](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/426362776/staticVariable.png)
4. Click on the String section and add a string variable with the + Add a String Variable button.
5. Click on the Configure button to concatenate your message and variable.
![Screenshot of the Custom Variables window displaying the string variables tab](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/426362776/stringVariable.png)
6. Click on the Apply button to complete your custom welcome message setup for a logged-in user.
![Screenshot of the configure string variable window](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/426362776/concatenateVariables.png)
1. Click on the gear icon and choose the Tools option from the side menu.
2. Then click on the gear icon next to Custom Variables.
![Screenshot of the Titan project settings displaying the Tools tab](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/426362776/customVariables.png)
This portal populates the variable from the SmartV login.
![Screenshot of the Custom Variables window displaying the static variables tab](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/426362776/staticVariable.png)
4. Click on the String section and add a string variable with the + Add a String Variable button.
5. Click on the Configure button to concatenate your message and variable.
![Screenshot of the Custom Variables window displaying the string variables tab](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/426362776/stringVariable.png)
6. Click on the Apply button to complete your custom welcome message setup for a logged-in user.
![Screenshot of the configure string variable window](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/426362776/concatenateVariables.png)
04 How to Add a Page to your Portal
1. Click on the Pages tab in the header and select Add New Page
.![Screenshot of the expanded pages dropdown](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/553175711/addNewPage.png)
2. Select the Blank template and then click on the Add to Project button.
![Screenshot of the Add a New Page window](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/553175711/blank.png)
3. Click on the Pages tab and then the Kebab button next to a page to rename it.
4. Edit the text in the Page Name field to read My Cases.
![Screenshot displaying how to rename a page in the Pages dropdown](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/553175711/renamePage.png)
5. Remember to also update your header with the new page name. Click on the gear icon for your header and then the gear icon next to your page.
![Screenshot of the Site Menus window showing how to include a header](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/553175711/headerSettings.png)
6. Add your page name to the Link Name field and click on the Save button.
This tutorial will use the My Cases page to see all the cases that have been submitted.
.
![Screenshot of the expanded pages dropdown](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/553175711/addNewPage.png)
2. Select the Blank template and then click on the Add to Project button.
![Screenshot of the Add a New Page window](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/553175711/blank.png)
3. Click on the Pages tab and then the Kebab button next to a page to rename it.
4. Edit the text in the Page Name field to read My Cases.
![Screenshot displaying how to rename a page in the Pages dropdown](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/553175711/renamePage.png)
5. Remember to also update your header with the new page name. Click on the gear icon for your header and then the gear icon next to your page.
![Screenshot of the Site Menus window showing how to include a header](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/553175711/headerSettings.png)
6. Add your page name to the Link Name field and click on the Save button.
![Screenshot of the edit link window showing how to change the link name](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/553175711/LinkName.png)
This tutorial will use the My Cases page to see all the cases that have been submitted.
05 How to Style your Login Page
1. Click on the SmartV page and then choose the Login page.
![Screenshot showing how to navigate to the log in page](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/71930833/styleLogInPage.png)
2. Select any element on the Log In page to bring up the Styling settings panel that can be configured.
![Screenshot showing the log in styling menu](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/71930833/Styling.png)
![Screenshot showing how to navigate to the log in page](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/71930833/styleLogInPage.png)
2. Select any element on the Log In page to bring up the Styling settings panel that can be configured.
![Screenshot showing the log in styling menu](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/71930833/Styling.png)
06 Extra Settings for your Login Page
1. Click on the gear icon and choose the Overview section in the Login Settings panel.
2. Choose the amount of time you want a user to stay logged into the SmartV session by adjusting the Session Duration.
3. Other settings that can be adjusted for the Login page include Layout, Verification, CAPTCHA, Captions, and Value Rules.
![Screenshot showing the log in settings menu](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/132993449/sessionDuration.png)
2. Choose the amount of time you want a user to stay logged into the SmartV session by adjusting the Session Duration.
3. Other settings that can be adjusted for the Login page include Layout, Verification, CAPTCHA, Captions, and Value Rules.
![Screenshot showing the log in settings menu](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/132993449/sessionDuration.png)
07 How to To Make a Page Public
1. Click on the Pages tab and then the Kebab button.
2. Select the Public radio button.
![Screenshot showing how to make a page public](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/627004194/publicPage.png)
2. Select the Public radio button.
![Screenshot showing how to make a page public](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/627004194/publicPage.png)
08 How to To Make a Page Private to Specific Users
1. Click on the Pages tab and then the Kebab button.
2. Select Inherit from the project radio button.
![Screenshot showing how a page can inherit permissions from the project](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/493517912/inheritFromProject.png)
2. Select Inherit from the project radio button.
![Screenshot showing how a page can inherit permissions from the project](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/493517912/inheritFromProject.png)
09 Adding a Power Table to the New Page
1. Search for a Power Table in your elements list and then drag it into a Titan Web project.
![Screenshot showing the power table element in the element menu](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/389357295/powerTable.png)
2. Choose your source in Salesforce and click on the Next button.
![Screenshot of Salesforce configuration window displaying the select source window](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/389357295/powerTableSource.png)
3. Set up your conditions and click on the Next button. We have used Contact ID > Equals > Field > SmartV ID for this tutorial.
![Screenshot of the Salesforce Configuration window displaying the Conditions step](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/389357295/powerTableConditions.png)
4. Set up your Mapping for the Power Table by adding a few fields with the + Add a Column button.
5. Click on the Apply button to finish your Salesforce configuration for your Power Table.
![Screenshot of the Salesforce Configuration window displaying the Mapping step](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/389357295/powerTableMapping.png)
6. Click on the gear icon and Select the Auto Grow checkbox under Interactivity in the Power Table settings so that the Power Table looks nicer.
![Screenshot of the Power Table Settings menu displaying the Interactivity tab](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/389357295/powerTableAutoGrow.png)
7. Format the created date column by choosing the Columns option in the side menu.
8. Click on your Created Date column’s gear icon and select a date format of your choice from the Format drop-down list.
![Screenshot showing the Power Table settings menu displaying how to update the date formatting for a power table](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/389357295/powerTableDateFormat.png)
9. Your Power Table should look like the example below.
![Preview of the power table example](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/389357295/createdPowerTable.png)
![Screenshot showing the power table element in the element menu](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/389357295/powerTable.png)
2. Choose your source in Salesforce and click on the Next button.
![Screenshot of Salesforce configuration window displaying the select source window](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/389357295/powerTableSource.png)
3. Set up your conditions and click on the Next button. We have used Contact ID > Equals > Field > SmartV ID for this tutorial.
![Screenshot of the Salesforce Configuration window displaying the Conditions step](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/389357295/powerTableConditions.png)
4. Set up your Mapping for the Power Table by adding a few fields with the + Add a Column button.
5. Click on the Apply button to finish your Salesforce configuration for your Power Table.
![Screenshot of the Salesforce Configuration window displaying the Mapping step](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/389357295/powerTableMapping.png)
6. Click on the gear icon and Select the Auto Grow checkbox under Interactivity in the Power Table settings so that the Power Table looks nicer.
![Screenshot of the Power Table Settings menu displaying the Interactivity tab](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/389357295/powerTableAutoGrow.png)
7. Format the created date column by choosing the Columns option in the side menu.
8. Click on your Created Date column’s gear icon and select a date format of your choice from the Format drop-down list.
![Screenshot showing the Power Table settings menu displaying how to update the date formatting for a power table](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/389357295/powerTableDateFormat.png)
9. Your Power Table should look like the example below.
![Preview of the power table example](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/389357295/createdPowerTable.png)
10 Preview your Multi-Page Private Portal
1. Click on the Save and Preview buttons.
2. View the public Home Page.
![Screenshot of the home page preview](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/456025215/homePage.png)
3. Click on the My Cases link in the header and view that this page is private and a user has to log in to access the information on it.
4. Log in to the web page by entering an email address and a last name before clicking on the Continue button.
![Screenshot showing how to view the My Cases tab](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/456025215/myCases.png)
5. Enter the verification code sent to your email address.
6. Now that you are logged in to the Private page, you should have access to all My Cases web pages.
![Screenshot of all logged cases example](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/456025215/myCasesLoggedIn.png)
7. If the logged-in user navigates to the Home page, they can view the custom Welcome message.
![Screenshot of custom welcome message example](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/456025215/welcomeMessage.png)
2. View the public Home Page.
![Screenshot of the home page preview](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/456025215/homePage.png)
3. Click on the My Cases link in the header and view that this page is private and a user has to log in to access the information on it.
4. Log in to the web page by entering an email address and a last name before clicking on the Continue button.
![Screenshot showing how to view the My Cases tab](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/456025215/myCases.png)
5. Enter the verification code sent to your email address.
6. Now that you are logged in to the Private page, you should have access to all My Cases web pages.
![Screenshot of all logged cases example](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/456025215/myCasesLoggedIn.png)
7. If the logged-in user navigates to the Home page, they can view the custom Welcome message.
![Screenshot of custom welcome message example](https://academy.titandxp.com/pluginfile.php/661/mod_custompage/topics/456025215/welcomeMessage.png)