Up next in 10
Navigating and Customizing the SharePoint Interface by Sarah Patrick || Lightup Conference
Nov 16, 2023
As the SharePoint Intern for Smithsonian Institution’s Office of the Chief Information Officer, I created an interactive organization chart in SharePoint so users can find information on all the Smithsonian units in one place. I will go in depth on how I used SharePoint web parts, HTML/CSS, and JavaScript to create an image map with modals to display each unit’s information and the obstacles I faced with the customizations.
Conference Website: https://www.2020twenty.net/lightup
#lightup #2020twenty
Show More Show Less View Video Transcript
0:00
Alright, so hopefully you're in the right place, right time
0:03
So my talk is called Sarah the Explorer, Navigating and Customizing the SharePoint Interface
0:09
So we'll get started a little bit about me first. Oh, sorry, not me first
0:14
Sorry, I forgot I added these slides in. So I'm so honored to be a part of this event
0:20
because it's such a good cause. UNICEF helping kids who are really in need
0:25
So please donate any penny, counts, a dollar, anything. So really I'm going to do to get this QR code is take your phone and open up your camera and hover over it and it'll pop down on the top. I don't know if you saw it there, but one of my other talks I like to show you how to do that. So it's super easy to get the link and to donate. It's really awesome organization. So please consider doing that
0:48
Thank you to our sponsors for setting this all up. I'm super excited to still be involved with speaking
0:55
virtually during this crazy time, so thank you so much for having this set up. And lastly, just like how I showed you with using your
1:03
phone to scan these QR codes, please consider giving some speaker feedback and some event feedback
1:10
Alright, now about me, so my name is Sarah Patrick. I graduated from high school two years ago now from a program called the Science and Mathematics Academy in Northern Maryland
1:22
I'm currently going to be a junior at the University of Maryland College Park, where I'm double majoring in information science and operations management and business ytics
1:32
Some of my opportunities that I'm super grateful to have was an internship with the Project Management Institute for the Baltimore chapter
1:40
I was an intern for the Northeastern Maryland Technical Council and also currently I am interning as a junior fellow at the Library of Congress
1:51
And today I'll be telling you about my other internship with the Smithsonian
1:57
So a quick plug for me, go ahead and follow me on Twitter and LinkedIn
2:02
I'm pretty active on both of those and all my speaking events. And some of these are some of the photos here that I like to post about things I'm up to
2:10
And quickly I want to discuss my volunteer experience and what I'm really passionate about
2:17
So I volunteer for an organization called Tech Girls, which is a nonprofit group dedicated to
2:23
sparking the interest of tech in young middle school age girls. So there have been studies
2:29
that shown that girls during that middle school age, that's when they get interested in tech
2:35
but then also lose interest after they grow out of that age
2:39
And that's due to not a great amount of mentors and role models
2:44
and lack of real life examples in their school life. So Tech Girls provides these workshops that they provide the curriculum
2:52
the slide deck, everything you need to know to teach a subject
2:56
that's more realistic tech world. And you teach these girls that workshop, it's a hands-on tech workshop
3:03
and they learned so many new things. Tech Girls provides workshops on so many different topics regarding
3:10
tech and from my four years of doing this of volunteering, they love it. Girls get so
3:17
into it and we are, I really truly believe we're making a difference
3:20
because they really enjoy every workshop we hold. So here's some pictures from my experience, the top one
3:27
top left one, it was my very first workshop and the girls are just so excited
3:30
The one on the bottom left is when I gave a keynote speech about my experience as a role model for young women in tech and my experience with tech girls
3:40
The last photo on the right was when tech girls set the world record for the most girls coding out once
3:45
So we had about 20 plus locations all across the U.S. and a couple other countries for girls learning how to code in HTML at the same time
3:56
and we had 364 girls, I believe, somewhere around there. And yeah, it was really awesome
4:03
And unfortunately, that was last year before the pandemic when we were all allowed to be together
4:07
But I'm excited for when Tech Girls is ready to beat that world record. So real quickly, consider volunteering for Tech Girls
4:15
It's at techgirlswithaz.org slash volunteer. All right, now to actually get into the talk
4:21
I want to give you some background on what Smithsonian is if you are unfamiliar with it. So Smithsonian Institution is the world's largest museum
4:30
education, and research complex, consisted of 19 museums, a national zoo, and nine research
4:36
facilities. So the next bullet underneath is Smithsonian's mission is shaping the future by
4:42
preserving our heritage, discoursing new knowledge, and sharing our resources with the world. So it's
4:47
actually really interesting of how Smithsonian got started. It was, James Smithson is from
4:54
and when he passed away he left all his money to the U.S
4:59
and all he wrote with it was to create an establishment for increase and diffusion of knowledge
5:04
So he left it up to the U.S. to figure out what to do with it
5:08
and that is what became the institution of all the museums. and it's really dedicated to learning and increasing that knowledge like he said
5:17
So some of the most popular museums that you might have heard of
5:23
that you might have heard of and just not known it was Smithsonian is the Air and Space Museum, Natural History Museum, American
5:30
History Museum and the National Zoo. Those are all Smithsonian things that you can visit and the best part of it is
5:39
free admission. So Smithsonian is not profit. So it's all free tickets that you don't have to worry about. You
5:46
can just go and visit anytime you want. So that's what I really love about Smithsonian. So if you're ever in the DC area, they
5:52
have a couple of facilities in I believe New York and some other areas but most of them are in DC
5:57
if you're ever in Washington DC go ahead you have to visit them they are awesome just one last little
6:05
plug for Smithsonian I again did an internship with them last summer and I absolutely loved it
6:11
so if you're on the job hunt here are some links for full-time positions and also internships if
6:16
you know students like me looking for a summer experience. So like I said, I had the privilege of serving as the
6:24
OCIO SharePoint intern last summer and I got to work on the
6:28
SharePoint team in helping their migration and further development of their Internet. They're in the process of
6:36
or at the time they're in the process of moving to SharePoint online. So today I'm going to be talking about SharePoint
6:43
online and customizing that interface. So the project I was given for the summer was creating an interactive organization chart
6:53
So you can see here the org chart that was provided at the time and those who I was working with was
6:59
emphasizing the importance of knowing each other's units and what they do. So for example, the OCIO
7:08
we want to have a description of what we do, but we want to go to an interactive org chart and be able to
7:14
to quickly see what the other divisions do. So we wanna see what the secretary does
7:19
or what the American History Museum does. And a quick description all in one place
7:24
in that interactive organization chart So let take a quick look at what they currently had It was just a PDF and this version I loading up is actually the most recent version
7:36
so it looks a little bit different. But you can see here how their hierarchy works
7:41
And then on some of them, I can click on it. So look at this one under Secretary for Museum and Culture
7:48
It takes me to a new PDF for further hierarchy, which is simple
7:53
But again, it doesn't have that information of what each unit does. And that was really important of the SharePoint team that told me they want us
8:01
as the Smithsonian to be able to quickly learn about each other because that was really important
8:09
Alright, so the goals of this project was to create a working image map of Smithsonian
8:15
institutions organization chart that will use pop up windows instead of opening a new tab or window
8:21
and providing all that information of each unit in one place. Additionally, my personal goals was to learn more about
8:28
Smithsonian as the new intern and also develop my skills in SharePoint
8:32
HTML, CSS, and JavaScript. So if you're not familiar with any of those
8:36
I'm going to quickly go over them as intro for my beginners here
8:41
because I was at the time too. So quickly, I want to give you a overall end result
8:47
So as I go further through this presentation, you have an idea of what we are working towards
8:55
So here I am in Smithsonian's internet of SharePoint online, so you can see here I'm on this main homepage
9:02
I've called it of the Smithsonian organization chart, and I can click on the unit
9:08
It comes up with this modal window. So instead of, like I said
9:12
a new tab or whole new window, it still stays in the same window
9:16
just a little pop up and I can see all the information needed about the unit
9:21
To move forward, like you saw in the PDF, on some of them I could click on it
9:25
It would take me to a new PDF with further hierarchy. So here I'm going to click on one of those boxes
9:31
In this image it was indicated in blue. And takes me to a new page this time to show that further hierarchy
9:40
So now under this page I can click on those boxes and get the same modal
9:44
effect that got on the original homepage. If I want to go back to the homepage instead of having to navigate back through the back button
9:51
I have that link there to be convenient to go back that way
9:57
So yeah, that makes really easy navigation of the image map. And I'm going to be telling you all about how I was able to get to that point
10:08
So first, I started with a lot of research. I was giving these attributes to find on each unit
10:14
and that's what I was told was priority of getting to know all about a new unit I was unfamiliar with all in one place
10:23
So this included the name of the unit, their abbreviation, because Smithsonian loves their abbreviations, a short summary, their staff listing, which was provided through Smithsonian Institution
10:34
PRISM is their internet, so a URL to that, PRISM URL. And then they usually had an external one as well, then that was open to the public
10:44
So some of those didn't have them. Not all of those fields were filled for every unit
10:49
but these were the basics that we wanted, if available. So since I did these as my research
10:58
I knew these were going to be my SharePoint columns. So my first demo is showing you how once I got all my research in an Excel sheet
11:07
how I easily got that into SharePoint. So first we're going to take a look at the Excel sheet that I had made
11:16
As you can see, it's pretty long. The Smithsonian has a lot of units
11:21
And then I'm going to highlight the whole thing and format it into a table
11:25
So you're seeing that here. Up here format as a table and it really doesn't matter what color
11:32
I just picked one that's under the home tab. So then under design, once it's a table and still highlighted under export
11:41
you do export table to SharePoint and pops up with this window and
11:45
that's where you put your SharePoint address. So that's the URL for Smithsonian's, you do the name of your list
11:53
a description if needed. And then when I hit next, it's going to identify what type of data is in each column
12:02
So you can see here that the ones that are text, I want to be text and then the ones I want hyperlinked also hyperlinks
12:10
So I'll quickly pause this, go back. If one of those are not what you want the data type to be
12:17
that's how you can easily tell and go back into your Excel sheet and fix it
12:22
So then it can all be the same data type because you can easily see it here
12:27
So you hit finish. It pops up with where it exported to in SharePoint
12:34
So I click on that link and it's already in there for me. So I actually stumbled upon this method later in my internship
12:42
Originally, I was just copying and pasting my Excel sheet and doing
12:47
I made my own list and made the data types already and just copy and pasted
12:52
which was fine, but this made it so much more efficient that it already
12:55
identified the data types of each column. So that's a little tip that I realized more people didn't realize and it was super helpful
13:05
Alright. So now that we know we got all the information into SharePoint, we want to figure out how to place it all and navigate it. So this is where I get into my site pages. Again, as you saw in the PDF, you could click on some of those boxes to do another PDF. So I recreated that kind of effect with
13:28
with different pages. So with my site pages, I had that main homepage
13:33
which is what we saw in the very first demo. And then for each blue unit
13:37
like I said, that's what indicated that it goes to a new page
13:41
I create a new site page in SharePoint for each one of those and I have all those listed here
13:46
Looks like we have four, five, six, seven pages that I made in addition to the home page
13:51
So eight pages total. So I'm going to show you how I made the site pages
13:57
And I made this all ahead of time so they're ready to go for when I wanted to
14:01
place them in the actual image map. So I'm under site contents in my SharePoint site
14:07
I'm going to hit site pages. And that's where I can look at all of them that are existing
14:16
So here you can see I have my image map. And all the other pages I already had of existing
14:23
So above that I'm going to click new. And with the drop down arrow
14:27
I want to do a new site page, of course. So with that, it already makes it
14:34
which is really great that how fast it was. And I named mine right away so I knew which unit
14:39
it was being applied to. So that's the steps I did seven times to make a new page
14:46
for each of those larger units that had further hierarchy. All right so now we about to get the technical part where I talk about the code I had to use But first again like I said for my beginners I want to go over what each thing is before we get confused
15:05
So first, what is HTML? That is the standard markup language for web pages
15:10
So I like to think of HTML as like the foundation and
15:15
the frame of what you're building. And then you add the other things we all discuss next to make it pretty and actually working
15:23
So HTML is that foundation, the code to get everything set up and ready to go for later steps
15:32
CSS is the language that describes the HTML content. So CSS is like the paint in
15:39
the prettiness of what styles the HTML code. So back to my ogy
15:44
HTML is like the wood and the nails to build a house. And then CSS is painting in adding decorations
15:51
making it look nice. Lastly, we have JavaScript and that is the programming language of HTML and the web
15:58
And that's what makes the code dynamic and interactive versus static. Before with just HTML and CSS, you can see it, but it doesn't do anything
16:07
JavaScript adds those functions to make it interactive. So back to my house HTML is the wood nails
16:13
CSS is my paint and the decorations. JavaScript is the actual actions. I can actually open the door
16:20
I can actually walk up the stairs. the functions I can actually do around the house
16:25
Lastly, before I get into all the code, I don't want you all to be scrambling
16:31
writing down the code or taking pictures. Don't worry, it's all on my GitHub
16:35
If you don't know what GitHub is, that's a code hosting platform where people can put up
16:40
their code and it's meant to be open source or you can store
16:43
there for future purposes. This is my GitHub where I have posted all the code I have worked
16:51
on for this image map, go ahead, feel free to look at it, edit it for your purposes
16:56
And I'm going to be going over what each part of it means
16:59
in the rest of this presentation. And also note the things to change
17:03
because right now the code in there is everything that I use, all of my links that won't work for you
17:09
So just keep that in mind of those are the things you're going to have to change
17:13
But yeah, the code is all up on GitHub, so don't worry about writing it down
17:17
All right, now that we got all that covered, let's get into the actual nitty gritty of the code
17:24
So I keep saying we're going to get into him so excited
17:28
Walmart introduction in case you don't know. So again, like I said
17:32
I wanted it to be an interactive organization chart. So what how's am I going to make that interactive
17:38
How am I going to be able to click on it? So that's where we are presented with an image map
17:43
So that is a list of coordinates relating to a specific image in order to create a hyperlink areas and those areas are
17:50
So if you remember from my very first demo, you could see that when I hovered over the square that said
17:55
Board of Regents, the cursor turned into a click and I was able
17:59
to click just in that area and I'll be going over how to make those
18:05
So now the code, the nitty gritty, don't get too overwhelmed by this
18:09
If you're a beginner, I'll explain it all. No worries. So this is the code of setting up the image map
18:16
So I have the top here that identifies that I'm about to make a map
18:21
I also have color coded my code here a bit. Everything in yellow is are the things to change to make it
18:28
unique to the image map that you're making. So we have the name here, of course
18:33
to identify what map you're making and also an ID. Both of these are used throughout other codes to refer back to this map
18:41
Additional code is going to go here, which we'll go over that next
18:45
I end the map and then at the very bottom, that's where I initialize the actual image for that map
18:53
So I give the image its own ID, alternate text if there's
18:59
connectivity issues and it doesn't load, the link to the image, and then this other code for
19:07
the map for another way to refer to that map later. So now that hotspot code
19:14
That's that area that I was talking about that's identified for what to click on
19:18
We give the area name here, the link to that content, and then the coordinates as well
19:25
I have this function here highlighted in purple because I change it later
19:29
depending on the action I want. Right now, when I click on this hotspot
19:34
it opens up a whole new window. I actually change this later for either if it's going to a new page
19:41
or if I want that to be the modal pop-up. So I'll note on that later. So just to give you an example of what all of that put together looks like
19:49
here's the code that I used. So I named it, of course, Smithsonian Organization chart
19:54
I named these maps by the numbers and you can see the names I give it
20:00
which corresponds to the name on the PDF that I was originally using
20:06
The SharePoint link because I had all the information in SharePoint already
20:10
So this looks at the list I made with all that information for my research
20:14
And then these are coordinates that I use from another method that I'll touch on in a minute
20:19
Same thing with this image part down here, the ID on turn of the text
20:25
And the link, just like all the things I said previously. Alright, so how do I get this all into SharePoint
20:34
I've shown you a lot of code, but not a lot of action yet. So unfortunately, SharePoint online does not have a script editor web part for modern yet
20:46
which is weird because that is all I use during my internship. So Sony provided me with a web part that they had written themselves that I used throughout these demos
20:56
But I wanted you all to have an option too. So I found this another GitHub link of code to get that script editor set up in your SharePoint online as well
21:07
So hopefully that will help to get that web part working because I found it super helpful
21:12
That's what I use every time with all of this. Good. All right, looks like I have demo here of how to use that script editor
21:23
So I'm in my site page. My backup will be a little quick that new one that I just made
21:32
And you see that little plus sign, that's how I'm going to add a new web part
21:36
So it drops down with all my options. And I can see that a moderate script editor
21:44
that I had put in. So this one's labeled a Smithsonian Institution
21:49
because that's what they had given me. So right in there, that's where you put your code
21:53
So luckily I have mine pasted in there. Why would have pasted it in there and it would be great
22:00
So I'll be showing you that in the next few demos. All right, so retrieving those images again
22:07
I need to get all the content set up before I can start really putting in that code
22:12
So getting those images first. Was pretty simple, so I was looking at the PDF I was given
22:19
I just use that snipping tool to save those images originally. But then I use a different way to get it into SharePoint because that what was really important All for all already to be in the cloud on there So I copied this and then I go back to my Smithsonian site and they had set up a
22:41
email workflow that if I emailed that specific address it would be stored into
22:46
a list and my image was stored into one of those columns
22:51
So really overall of this step is to get your image somehow into SharePoint so
22:58
that you can get a link because that's what I want to use into my code so that it pops up
23:04
So you can see here it's already in SharePoint and now I have this link when I open it up and that's what I want to use for the code
23:12
So I copy that. And then I'm going to go back to my modern script editor web part
23:21
You can see I edit snippet. I've pasted in my code already
23:26
And I'm going to go to that part I indicated before to
23:30
paste in that link and now the image shows up. Super easy. Make sure I save that
23:36
So that was really important saving and then publishing or republishing if you've already done that already to save all of your work
23:44
So now I have my image in my page, so I did that every time for each of my site pages that had
23:50
all those different images. So seven more times or eight. I've lost track. There was a lot
23:59
All right, so now again, those links are very important to navigating of where I want to
24:05
So my next step was creating unique links for every unit for every image
24:11
Each hotspot, excuse me. So this honestly took me some time, but luckily I'll show you how I did that
24:18
so it'll save you some time. So I'm in my SharePoint list of all of those information
24:25
the research I had done. I can see under this dropdown, I'm going to create a view and that's how I
24:32
specifically get this unit information to look how I want to, how to style it a little bit in SharePoint
24:39
So this one I'm doing Office of the CIO view. And I had hit all items
24:47
but really I want to take that away. So it only shows that one that matches
24:52
So you can see here under that option, lay back up a little bit under filter
24:57
Instead of all items in view, I want show only items when the following is true
25:02
When the unit name is equal to exactly what I put in that SharePoint site
25:07
so I know they'll actually show up. Has to be the exact same. So that's why I named it in my list
25:14
And then additionally for it to look a little better, I added the newspaper no line style for it to look in that format
25:23
which my boss liked. So that's what I did. So now in this specific view
25:29
you can see I have all the information for that unit. And that's the look that I want in my interactive image map
25:37
So that's the link that I use and paste into my code to pop up for that modal
25:43
Which I will get into soon. So now I talked about these image
25:50
these hotspots, but there's coordinates. How do you get them? Like you guess that's what I thought at first
25:55
I thought you had to guess, but really I just use this website called image map.net
26:02
It's totally free and it's meant to set up the whole image map for you
26:05
But because I had all this extra code and things for it to make it exactly how I wanted
26:11
I really just use this tool to steal the coordinates. So I'll show you here how I used that
26:20
So here I'm loading the image from website and that's my Smithsonian site where I had already put the images in before
26:27
because I want those dimensions to be exactly the same. So you can see here and then in this website under that
26:35
specific one that's selected of a new area, I name it that helps
26:40
me keep track of which coordinates go to what area. And I click on two corners to create that rectangle
26:47
because it's already on that setting. So I add a new area for each one and I repeat the step for every box
26:55
And this is great because I can see clearly how I'm making those boxes
27:00
and I don't have to worry about what those actual coordinates are because it's doing it for me
27:04
So I'm quickly going through and finishing all those that I know
27:08
need that hotspot. Doing it for all of them and then show me the code
27:14
So that's where it brings up all of those actual coordinates. And again, I put that name in so I can help me keep track of it
27:20
You don't have to, but that's how I know for this one, it goes to Board of Regents
27:25
So I simply just copy and pasting those coordinates. So I'm going back into SharePoint here
27:31
back into that code that I've already pasted in, and adding in those coordinates
27:37
So you can see him scroll to where it is appropriate. Right there, I had some old coordinates in there before
27:47
A lot of copying and pasting for me. So I do that for each one
27:52
And then once I have all those in and I save and republish again
27:57
we're going to see that I'm able to click on those spots and just for that rectangle
28:02
So you're going to see how the cursor changes as I hover over it
28:06
quickly going through make sure I have them all done. Save. And then you're going to see here
28:12
I quick test was me hovering so you can see the cursors changing
28:17
That's how I know it works or obviously clicking on it. But this is my quick check of seeing that it worked
28:23
Just a quick cover. Yeah, that's what I use. And honestly, I don't know how you all feel
28:31
but my boss was like, what was that site that you figured out the coordinates? and I was like, ah, it was a free site
28:36
Image map.net. So maybe that's super helpful for you because that was just something again
28:42
I had stumbled upon and didn't realize how helpful it was. So here we go again
28:47
Image dash map.net. Alright, so I keep bringing up this modal thing
28:53
but what is it? So it's a graphical control element subordinate to an applications main window
29:00
So for me, it looks like a little pop-up window. This was really important for my boss to have because she didn't want a whole new page opening every time in the navigation of the users to get confusing, opening up new pages or new tabs or new windows. She wanted all to stay in one window and easy to look at
29:19
So having this modal was helpful to just have that pop up and
29:23
then click out of it and go back to the image map once you were done
29:28
So the code I'm about to show you is all from W3 schools and
29:31
the things that I changed you'll see in color. So this was the main modal code, the CSS for it
29:40
You can see I have like display none hidden by default because I only
29:45
wanted to be shown when it's clicked upon. and then all these other attributes
29:49
to get it to look like as you can see, let me go back in this image here
29:55
So you can obviously change these to change the look and make it a little bit prettier, but this is all I needed for now
29:59
Bit more there's another section for the actual content and I added this image here to show you what each part of it belongs
30:09
to because when I first saw I was like I don't know what that means. So you can see here what corresponds to the margin
30:17
background color, the actual image, padding, border, etc. So again, all of this is on my GitHub already, so no worries
30:24
about having to remember it. Furthermore, we want that little close buttons to give users
30:30
the options to X out of the modal to go back to their original
30:35
homepage. So you can see here how I have that set up and the look of it
30:43
Alright, so now to get into some of the HTML portion of it
30:47
Again, all this white was already set up, but this iframe section was really important. That's how we got it to get
30:55
look in the same page and this is what I actually struggled it with for a bit because before I had
31:00
that section in it would give you make me that modal look but it would go to a new tab you can
31:05
see it obviously refreshing and taking up the whole window and that's not what I wanted I wanted it to
31:10
be overlapping of the page I was already in to act as a pop-up not go to a whole new tab or a new page
31:18
So more of the code you can see here where I'm signing some of the variables
31:24
This is for the entire modal and the span is for that little x, the close option
31:32
Furthermore, adding some function to it, this first part is when a user clicks on
31:37
the X, it'll close it and then also if they click anywhere outside of the modal
31:42
that will also close it. The function to actually show the modal
31:49
So we're looking at the variable here of the modal and that iframe
31:53
And then we're doing this display block instead of none. So actually show up so it knows that when on the click it will show up
32:02
So let's see all of that in action. Alright, so I am in my Smithsonian page
32:12
home page and right now you see that when I click on it
32:16
it opens up a whole new window, which is not what I want
32:20
So we're going to go back in and fix some of that
32:24
So I'm going back to edit and edit that snippet. And you're going to see what I had highlighted in purple
32:36
originally that window open, that's what I need to change first. Or one of the things I need to change
32:42
I'm not sure if I do this first there. But that's one of the problems
32:47
It says window opens. That's why I opened a whole new window
32:51
It is the first thing I do, so I thought some changing that so that instead of
32:56
opening to a whole new window, it opens instead as the function I made
33:00
which is show modal. So I'm going to go and save that and I do that for all the other ones that I want to be modal on that page
33:09
I have to redo this for every site page I had as well
33:14
For the site pages, I had to do something else. We'll get into that. So I make sure I save and republish. So now when I click on it, it opens up a pop up
33:23
This is exactly what we wanted for it to be. It looks like it overlaps
33:28
I'm doing a little teaser at the end there that the header navigation are still showing
33:34
but we'll get into that. So I've gone over all of the big ideas of how I got to that point
33:43
but as you saw, it wasn't perfect. So here are some of my tips and tricks for the problems I encountered
33:48
to refine it to get to that final look that I wanted. First, that header navigation and toolbar was still there
33:56
So I need to get that hidden somehow. So I'll show you how I did that here
34:03
So just where we left off, I can see all that extra stuff and I don't want it
34:10
So I'm going to go into edit that snippet again, edit some of the code
34:18
Go scroll down. To that specific attribute. I can see here I'm app pending to the end of that URL I had to
34:29
that specific item in the SharePoint list. The is I as hair Lego It going too fast for me Is dialogue equals one so that is what hides the navigation for that window
34:47
So I pended that on to all of those URLs for the SharePoint list
34:53
Again, I save and republish it. And now when I click on it again, it should be gone
35:03
Which it is very nice looks a lot better. Except so this was a tricky part as you
35:11
saw there. See if I back up a little bit. I still see that little page thing at
35:18
the top there. We don't like that, so let's go fix that part
35:22
In the next demo my bad. Hiding that toolbar before I forget
35:28
that step because that was also still there I'm under that specific link
35:32
that item in SharePoint. If I go and edit the page and I change one of the options on
35:39
the side here, edit web part. And then toolbar type, I want no toolbar right now
35:46
It's full toolbar. So I make sure I say OK to that so it saves that
35:53
And now. That should be gone from the look as well. See, now it's not there anymore, the add item
36:02
Alright, so we're getting there. We're getting to the look that we want
36:07
So that hiding the page tab was a little bit tricky. I'd add a little bit more code for that one
36:13
So first I have the removes the ribbon on the modal because that page was part of the ribbon
36:18
So I added a new function of on the frame refresh. So when that modal pops up because it's referring to that frame
36:26
it looks at the Myiframe.document and getting the element ID. This was the element I found in my SharePoint was referring to that ribbon
36:37
And then I want display to be none because obviously I don't want that to be there anymore
36:41
And then under the code for the modal, I had to change the onload to be this function instead
36:50
So I highlight this document here because I have to change it later for another option
36:55
and I'll get to that in a second. But for, I guess I should say specifically for Internet Explorer
37:01
This is what I used for that. So unfortunately I tried this in Google Chrome
37:08
and the page was still there and I found out that apparently between browsers different things happen
37:15
So I knew that some people, a lot of people like to use Google Chrome
37:20
so I wanted to have the option of that it would work in both browsers personally, not personally
37:26
For Smithsonian, they recommend using Internet Explorer, so that wasn't a problem
37:31
but I know a lot of people like I said, like to use Google Chrome. So this is the code that I use that
37:38
identifies what browser the user is using. And then I have these if statements for
37:46
oh, if it's this browser, I want to do this set of code instead
37:50
So you can see highlighted here in yellow. That's why I'm going to have the different code of how to
37:55
handle the modal differently based on the browser. So I specifically focus on Chrome because I found that one to be one of
38:05
the most popular ones along what I people I know using browser wise
38:11
So you can see here all this code is the same, but then I have to add a timer
38:17
So the way it works in Chrome is that if it loads in a certain time
38:23
then it will take away the bar. So this is a bit experimental to be honest
38:28
This color in purple was the time. So this happened in less than a second
38:36
So I had experiment with that number of how quickly I wanted to load
38:41
Because if it was too fast, then it would just load or if it was too slow
38:46
then it would just load. I think it was just too slow. My bad. But yeah, so with Chrome
38:52
it's a little bit weird. So I added that in case Chrome users wanted to use it
38:56
But overall, I made a note on the site that we recommend using Internet Explorer because that's what all Smithsonian
39:02
wanted their users to use anyway. Additionally, I noted this before, remember how it's just document for
39:09
all the other browsers. In Chrome it wants to be content document and they want to add a windows dot in the beginning So that settles the page part
39:22
Make sure I forgot to go over this demo to show you in action
39:29
So you can see here I'm gonna go edit again. And add that code in so it will hide away that page option
39:37
So I'll scroll down. You can see I've added here the code
39:42
to identify which browser is being used. And then you can see for the if statement
39:52
what is Google Chrome? You use that one that function. And if it's other browsers, in this case
39:58
I was specifically looking at Internet Explorer, then the show modal function will be that way instead
40:04
So basically, I just have show modal be different under those two different
40:09
functions that if statements, excuse me. See, I have all those in
40:17
I'm adding that onload code and that's specifically for Internet Explorer. Chrome does not need that
40:25
Because that's the problem that Chrome had, it doesn't do the onload. Once I see and republish it, now it should be good
40:33
that page tab should finally be gone. So I click on here, it's gone in Internet Explorer
40:41
and here I switched to Chrome. And it's also not there, so very good
40:45
Now it looks nice and clean, none of that extra stuff in my modal
40:52
All right. So now that back to parent site button, so this is really important for us again
40:59
to help with navigation and not get confusing. Like I said in the very beginning
41:03
I didn't want users to have to click the back arrow to get back to the homepage
41:07
I wanted a button or a link to already be there to indicate that users can get
41:12
back to the homepage easily by that. So these were for those extra site pages
41:18
I had to make for those further hierarchies. So they could easily go back between
41:23
the homepage and those extra pages with those further units. So here's the code here, it's very simple
41:30
Just for a link link to home page. And fair. And then I added for
41:42
My goodness, I'm getting ahead of myself. Continue that that opens the new page
41:50
in the same window and same tab. It doesn't open a whole new window or tab again
41:55
Like I said over and over, we want to avoid that. So this gives me the map name
42:01
The map ID is very similar to what we saw before. Instead of what we saw the very first time
42:07
which was window.open, and the second time it was show modal, the function we wrote
42:13
I have just location, so it just refreshes in the same window to that new page
42:21
So to quickly show that in action. You can see here for that
42:29
Right now it opens up a modal and a modal, which is not quite what we want
42:35
so we have to fix that. So it just goes to a new refreshed page
42:41
and then a modal and then I can go back easily. You can see here I go back into the code
42:47
for that home page and for that piece of code for specifically in this case secretary
42:53
because it has that further hierarchy, So show modal I want just location
42:58
So it just reloads in the same window, the same tab. So I'll save that. Republish
43:06
And now we're going to see when I click on secretary, it just refreshes the page to that further hierarchy
43:15
So I can see here the secretary branch. So now it's a whole new one
43:19
Just a refreshed page, which is nice. And that's the new site page that I
43:25
talked about in the very beginning. So here I've created another snippet
43:31
for that button or the link. I paste in that code here and I
43:36
added my link back to that home page. So that link there is just the one from before
43:43
I save that again, republish. I see that a lot because it's important to me
43:48
There many times where I forget one and then the code would just be gone So now I can just click return to parent site It takes me simply back to the home page So like I said here
44:00
navigation is all contained in one tab, which makes navigation for the front end user very easy
44:09
Alright, so that really covers everything. Please feel free to ask questions if you have any
44:58
Let's see. What was the hardest part of the project of
45:15
that page tab that I talked about being there in Internet Explorer and Google Chrome
45:22
because all the other things that were hidden. I found to be
45:25
simple to just add in the part at the end of the link or going to SharePoint and take away the
45:31
toolbar. Those are easy, but the page tab had to write a whole new set of code. And not only did
45:37
that take me a long time to figure out the first place, I got it done for just Internet Explorer
45:41
And before I presented it to my boss, I had this gut feeling. I was like, oh, let me check in Chrome
45:47
Sure enough, it didn't work in Chrome. So that was a bit of like a darn, but I figured it out
45:53
But yeah, that was so little, such a little thing, but that was what I probably worked on the most
45:59
Unfortunately, that seems so small. So that was probably the hardest part for me
46:10
Sara, I am being publishing questions, whatever I'm getting. Please go through and you can carry on with your answer
46:18
Okay, awesome. us someone asked how to get the recording is it on the website uh yeah that will be on website
46:31
that will be replied by me you can skip that question okay wasn't sure um what do you wish
46:38
you knew before you started that you know now hmm i so this was really my first exposure to
46:45
SharePoint web parts. Before that, I had just one other internship that I did
46:51
like my very beginning work in SharePoint. And web parts do so much. I think it's so cool
46:59
And I just learned a lot from that. So it was good to learn from it. But
47:04
I think I wish I knew more about the other web parts to begin with, because
47:08
as you can see from this, I used a lot of that modern script editor
47:12
so I thought that was like mostly it just coding which is fine I like coding but it has a bunch of
47:18
other web parts you can add to to make your internet really unique
47:22
do you have any advice for young ladies wanting to get into tech yes I am very passionate about this
47:35
I think unfortunately there's a lot still a big gender gap which makes it intimidating but really
47:41
like that shouldn't be a thing. I want you to stay confident in who you are and keep going
47:49
of what you want to do. It doesn't have to be coding. It could be any other realm of
47:53
tech, but if you love coding, that's awesome. There's definitely a lot of
47:57
communities that you can join to talk to other women who's probably felt
48:01
the same way. If you want to get involved with tech girls, like I said in the beginning
48:06
there's an awesome community there. I've been really supported by the ladies who run that and also by the girls I present to
48:13
So I know it's hard to not be afraid to join it, but just go for it
48:18
It's so worth it and feeling empowered as a role model makes it all worth it after that too
#Teen Interests