April 4-5, 2018 The Four Seasons Baltimore Remodeling your Output data in mx Presenters: Chris Mak and Ryan Bruffey April 4-5, 2018 The Four Seasons Baltimore "Most Likely to Succeed"

Objectives How templates can enhance the look and feel of your site and the member experience. How to hide certain web parts / elements on a CMS page using Templates How to utilize conditional statements within a template to enhance the member experience. "Most Likely to Succeed"

Key Terms and Acronyms CSS = Cascading Style Sheets – language that describes the presentation of Web pages through fonts, layouts, and colors JS = JavaScript – scripting language used to change behavior within a web browser page. AF = Advanced Find – tool used in CRM to query the database. MX Find = MX web part used in conjunction with Advanced find to expose searches online for your members.

Templates 101 – what are they? Allows the end configuration user to display output data with infinite layout options. You are not restricted to a “Grid” format only You relate templates to MX Finds (only) Advanced find “edit columns” is the foundation for output data

Types of Templates Beginner Intermediate Advanced Swapping data elements from existing PT Templates. Beginner Copying existing PT templates and modifying look and feel to match WWW css theme. Intermediate All the above but also adding conditional statements so the template can be dynamic based on who’s logged in or what the end user is searching on. Advanced

Create your advanced Find The Foundation of a Template Make sure you have the correct output data aka “Edit Columns”. Share AF with string connection user. Example “MX, User” Map “Saved View” with MX Find Once mapped, edit columns data will be available to reference. Create your advanced Find "Most Likely to Succeed"

You are not restricted to a “Grid” format only Grid as a template

You relate templates to MX Finds (only)

Advanced find “edit columns” is the foundation for output data Main point is if we are referencing a field within the template such as (“pa_wmeetingtype”), and that field is not in the advanced find column set, then the report will automatically prompt an error message. Another point to add – when creating a template, you can easily reference the schema names of each field within the results column of the MX find. "Most Likely to Succeed"

Common Template Error "Most Likely to Succeed"

Protech OOTB Template Examples

Example – Event Calendar

Example – Product Catalog

Example – Membership Directory "Most Likely to Succeed"

Protech Templates That Have Been Modified

Example – Event Calendar

Example – Product Catalog

Example – Membership Directory

Example – Membership Directory (cont.)

Styling Tips and Tricks with Templates CTRL + Shift + C brings up the inspection tool within browser

Styling Tips (Cont.) On the right hand side of the inspection tool is where you can make styling adjustments to see how the template formatting is affected without the changes being permanent

Objective: Change blue border to red

Step 1: Locate Class of border Using the inspection tool, find the class that needs to be changed. In this case, it is .mx-pedigree-parent-div .part1 is another class that is not necessary for the change, so we will ignore that for the purposes of this example

Step 2: Changing Elements Locate the corresponding class in the inspection tool The elements can be changed on the fly

The color change could be made by inserting a hexadecimal or using the color picker tool

Objective: Change Photo Color through Styling Change color of logo from light blue to red to match the nav bar

“filter: hue-rotate” is a quick fix to use to change colors through CSS instead of changing the image itself

Beginner Template Changes Swapping out fields within the template Adding additional data elements Changing placeholder image

Easy Edits within the Template How can we update the following: Remove Hyperlink from Name. Remove “Send Email” and Show email instead. Swap out Business Phone with Home Phone Adding Additional Data Elements

How to locate MX templates Protech provides FTP access to folder location for “Templates” Path to Protech Site (similar path for customers with MXR2G): \\DEVWEB01\DNNWebsites$\MX82Template\Resources\MX\Templates

Identifying Template I want to Modify Go to MX Find that is using the template Make sure you are logged in as a user with admin MX Contact web role Open up MX Find Configuration Scroll Down to where you see the prompt for Template:

Remove Hyperlink Identify line of code with a href and remove or comment out BEFORE CHANGE Orange box represents the line of text that will be removed

Remove Hyperlink AFTER CHANGE Orange box represents the line of text that was removed, and the red box represents the remaining text in the line

Remove “Send Email” and Show email instead BEFORE CHANGE Orange box represents the code that will be removed

Remove “Send Email” and Show email instead AFTER CHANGE Red box represents the line of code that remains

Swap out Business Phone with Home Phone BEFORE CHANGE Speak about how “businessphone” isn’t a schema but it is just important to make the distinction between the two. Green box represents the line of code to be modified "Most Likely to Succeed"

Swap out Business Phone with Home Phone AFTER CHANGE Red box represents the line of code that was modified

Adding additional data elements BEFORE CHANGE Red arrow represents where we want to add additional data elements

Adding additional data elements AFTER CHANGE Green box represents what additional data elements were added

Intermediate Template Changes Copying Existing PT template that you would like to modify Changing location of fields Adding expand and collapse sections Adding Map functionality to addresses Modifying “hover” functionality i.e. transition, color, placement "Most Likely to Succeed"

Copying Existing Template Locate template: If On-Premise – Access from Server If Cloud – Access from FTP or Filezilla Template Path: /Resources/MX/Templates Copy Template Edit template that was copied NOTE: Please update new template name to have client prefix at beginning i.e. “PT Membership Directory”

Locate Template Template Path: /Resources/MX/Templates

Copy Template Before Copy: After Copy:

Copy Template (Cont.) Renamed Template: “Client Acronym” – Template Name

Template Example - Grid Template that Expands/Collapses GRID MODE Upon Clicking Row

Expanded Mode

How to Create Column Headers and Data Results for Grid Mode "Most Likely to Succeed"

JS Code for Expand/Collapse

Adding Map Functionality to Contact

Code for Map Functionality "Most Likely to Succeed"

Modifying “hover” functionality i.e. Transition, Color, Placement

Modifying “hover” functionality i.e. transition, color, placement Styling for grid without hover Code for “hover” changes

Advanced Template Changes Hide/show web parts based on an MX Find/Template Advanced calculations Mobile design – Responsive.

Hide/Show Elements Inspect page to identify container(s) that you would like to show/hide based off of certain scenarios. This would be the web part you would want to hide/show. Build advanced find to define conditions that need to be met. If scenario falls in line with the advanced find conditions, the template will hide/show containers identified within the template. Once advanced find and template are created, you can build the MX find to incorporate all of the pieces together.

Locate the configuration button to make the MX Find changes to the container based on specific scenarios you define

Locate/make active the template that will incorporate the hide/show elements "Most Likely to Succeed"

IN THE TEMPLATE “display: none” is used to hide specific elements from being shown “display: inline” will show the elements that need to be shown

Thanks to the template in the MX Find, clicking “Search” with all searches left blank hides the “Calendar Results” table from appearing

Survey Template

Upon saving the survey, the graph with the corresponding data updates.

The template calculates the percentages from the total responses received, using styling to create the bar graph

Why are My template layouts not aligned? Because the grid or template is not configured to be responsive

GRIDS – Not Responsive Grid that is not “responsive” Notice how the only 1 ½ columns are visible in mobile mode. The result columns are set to “Fixed px” – meaning fixed pixels width.

Grid that “is” responsive Configuration set to “percent” for column width All column widths should add up to “100%” Output is now responsive in mobile mode

Non-Responsive Template When switching to a mobile breakpoint – telltale signs your template is non-responsive: Images or content floats right Text are not aligned Elements that should appear don’t.

Same template – responsive mode Key indicators template is responsive: Column styling in code (to define grids) – Media queries, defining page styling at a varying breakpoints - Flex display is another common indicator –

Coming to Marketplace Custom Templates Standard (8 Hrs.), Intermediate (16 Hrs.), Advanced (24+ Hrs.) Website Styling Updates Tiers of pricing TBD

Links for Research Styling/Programming resources: HTML - https://www.w3schools.com/html/default.asp CSS - https://www.w3schools.com/css/default.asp https://tympanus.net/codrops/css_reference/ https://css-tricks.com/ JS - https://www.w3schools.com/js/default.asp

Contact US