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

2. 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"

3. 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.

4. 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

5. 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

6. 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"

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

8. You relate templates to MX Finds (only)

9. 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"

10. Common Template Error
"Most Likely to Succeed"

11. Protech OOTB Template Examples

12. Example – Event Calendar

13. Example – Product Catalog

14. Example – Membership Directory
"Most Likely to Succeed"

15. Protech Templates That Have Been Modified

16. Example – Event Calendar

17. Example – Product Catalog

18. Example – Membership Directory

19. Example – Membership Directory (cont.)

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

21. 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

22. Objective: Change blue border to red

23. 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

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

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

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

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

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

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

30. 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

31. 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:

32. 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

33. 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

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

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

36. 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"

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

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

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

40. 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"

41. 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”

42. Locate Template
Template Path: /Resources/MX/Templates

43. Copy Template
Before Copy:
After Copy:

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

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

46. Expanded Mode

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

48. JS Code for Expand/Collapse

49. Adding Map Functionality to Contact

50. Code for Map Functionality
"Most Likely to Succeed"

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

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

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

54. 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.

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

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

57. 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

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

59. Survey Template

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

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

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

63. 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.

64. 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

65. 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.

66. 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 –

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

68. Links for Research Styling/Programming resources:
HTML -
CSS JS

69. Contact US