Search

Tracy van der Schyff

Facilitating The Evolution of Human Capabilities

Search results

"wiki"

Day 183 Reference Wiki Pages

ATOI365D

#Office365Challenge Yesterday we created hyperlinks on shapes we inserted, today I’ll show you how to reference Current Wiki Pages and Apps on your site.

Day: 183 of 365, 182 left
Tools: SharePoint
Description: Reference Wiki Pages & Apps

Related Blogs:

Around the Office in 365 Days: Day 182 Shapes with Hyperlinks on Wiki Pages
Around the Office in 365 Days: Day 181 SharePoint Wiki Pages


As you know by now, you can create a Wiki Page by typing the new name between double square brackets. The same goes for referencing Wiki Pages in your current Wiki Page Library.

Put the page in edit mode, start typing two square brackets – you’ll notice the drop-down with reference to other Wiki Pages. Select any of the pages to reference (ensure that the link closes with the two brackets).

Wiki035

You can also click on List to open the Apps on current site:
Wiki036

The same can be done to link to Views:
Wiki037

Here you’ll see the “breadcrumb” I’ve built to allow users to navigate between the pages or return to the main process page. I’ve uses “2 spaces, Pipe character, 2 spaces” between the links:
Wiki038

This is the final product:
wiki039

Note:  Once this breadcrumb is built, you can copy and paste it to the other pages (copy it while in edit mode).

From tomorrow we’ll look at Publishing and Web Part pages and spend some more time on the web parts themselves.

Overview of my challenge: As an absolute lover of all things Microsoft, I’ve decided to undertake the challenge, of writing a blog every single day, for the next 365 days. Crazy, I know. And I’ll try my best, but if I cannot find something good to say about Office 365 and the Tools it includes for 365 days, I’m changing my profession. So let’s write this epic tale of “Around the Office in 365 Days”. My ode to Microsoft Office 365.

Keep in mind that these tips and tricks do not only apply to Office 365 – but where applicable, to the overall Microsoft Office Suite and SharePoint.

Day 182 Shapes with Hyperlinks on Wiki Pages

ATOI365D

#Office365Challenge Ready to have some fun with Wiki Pages? Yesterday we looked at creating and adding text and images. Let’s look at inserting shapes and adding hyperlinks to them today.

Day: 182 of 365, 183 left
Tools: SharePoint, PowerPoint
Description: Shapes with Hyperlinks on Wiki Pages

Related Blogs:

Around the Office in 365 Days: Day 181 SharePoint Wiki Pages
The lighter side of Microsoft #21: SharePoint Wiki Pages with clickable Metro tiles
The lighter side of Microsoft #13: Change the background colour or image on Wiki Pages
The lighter side of Microsoft #12: Wiki Pages for Organograms and Profile Pages
The lighter side of Microsoft #11: Using Wiki Pages for Business Process Mapping
The lighter side of Microsoft #18: Image maps in SharePoint 2013


In today’s example, I’ll be building some process pages. Firstly I’ve created the shapes I want to use in PowerPoint.

Insert the shapes, changes colours and add text, then right-click on the shapes and save them as individual pictures:

Wiki016

In SharePoint, I’ve created pages for the main Process page as well as the Departments below it. I did this by putting the Index page of my Wiki library in edit mode, then added all the page names in double square brackets, see below:

Wiki014

Once the Index page is saved, you can click on the hyperlinks to create the pages (see Blog Day 181 for more detail on creating pages):

Wiki015

I will edit the main Processes page first. I’ve added a 3×3 column table and then merged some of the cells to represent the image I’d like to build:

Wiki017

On this table I will now insert the shapes as per the planning in PowerPoint. (when you’re done, you need to set the width and the height of the table to remove the spaces between the shapes):
Wiki025

I’ve also resized the images (PowerPoint always creates the images rather large). Be careful to reduce them all by exactly the same %. All I did was take each shape and change the width to exactly half. As Lock Aspect Ratio is ticked, I only had to set the Horizontal Size of all the images, the Vertical will reset according to the Aspect Ratio.

Wiki034

When all the images are uploaded you can remove the table lines (set the style to clear):

Wiki024

Here’s a tip – if you drew these shapes freehand in PowerPoint – I bet you they won’t align now – it’s very difficult to guess the width of blocks that needs to align with others when there is spaces in between them involved. So what I did was insert a SmartArt in PowerPoint that looks like this – then drew the individual shapes over it to get my sizes right. You cannot save the individual shapes in SmartArt – or I would have just used that.

Wiki027

So this is what the page looks like now, I’ve also changed the zones (text layout – two columns)  and added my document library web part on the right. We’ll get to web parts in detail over the next couple of days.

Pretty cool right? Using the table to insert the shapes – then fixing the table width and height keeps it in place on high and low resolutions:

Wiki026

Now lets add hyperlinks to the shapes. It will be easier to open a duplicate tab on which you can get all the hyperlinks you need. I then dragged the duplicate tab out to put the windows next to each other. See below:

When the above page is in edit mode, select the shape where you would like to insert the hyperlink, for example Operations. Click on Insert Tab > Link > From Address. On the other tab, navigate to the Home Page (Index) of your Wiki Library. From here you can copy and paste all the links you need. Right click on the Operations Page Link and select Copy Shortcut. You can now paste that link in the Insert Hyperlink Address bar on the left. Do this for all the shapes. Save the page and test the links.

(Yes, you can click Insert Link > From SharePoint and navigate to the pages to get the links, but in my experience that just takes too long).

Wiki029

Now when users click on the shapes, it navigates to the Wiki page you’ve built for that process. If I hover over the shape it shows the URL it’s link to in the bottom of my browser:

Wiki030

Now that the links are added, you can go to the Links Tab to configure the link. Create a Description and stipulate whether it must open in a new window:

Wiki031

This is what the description (hover over text) will look like:

Wiki032

Note:  You can add hyperlinks on Shapes, buttons, Photos and Text. These hyperlinks can be to pages in your current sites or to websites external to your company.

I’ve also added two extra buttons (I created them in PowerPoint), the Helpdesk Button I created a Mailto URL on and the Contacts Button I linked to a Contacts Listing. Read my blog on creating Mailto URL’s here.

wiki033

Now that was fun!!!

Tomorrow I’ll show you how to build old fashioned bread-crumbs on your pages and reference / link different Wiki Pages to each other.

Overview of my challenge: As an absolute lover of all things Microsoft, I’ve decided to undertake the challenge, of writing a blog every single day, for the next 365 days. Crazy, I know. And I’ll try my best, but if I cannot find something good to say about Office 365 and the Tools it includes for 365 days, I’m changing my profession. So let’s write this epic tale of “Around the Office in 365 Days”. My ode to Microsoft Office 365.

Keep in mind that these tips and tricks do not only apply to Office 365 – but where applicable, to the overall Microsoft Office Suite and SharePoint.

Day 181 SharePoint Wiki Pages

ATOI365D

#Office365Challenge My blog today will give you an overview of Wiki Pages in SharePoint. How to create them and start adding content.

Day: 181 of 365, 184 left
Tools: SharePoint
Description: SharePoint Wiki Pages

Related Blogs:

The lighter side of Microsoft #21: SharePoint Wiki Pages with clickable Metro tiles

The lighter side of Microsoft #13: Change the background colour or image on Wiki Pages

The lighter side of Microsoft #12: Wiki Pages for Organograms and Profile Pages

The lighter side of Microsoft #11: Using Wiki Pages for Business Process Mapping

The lighter side of Microsoft #18: Image maps in SharePoint 2013


Terminology:

The word “wiki” means “quick” in Hawaiian language. A wiki is a site that is designed for groups of people to quickly capture and share ideas by creating simple pages and linking them together. Your organization can use a wiki for a variety of uses. On a large scale, you can share large volumes of information in an Enterprise wiki. Or on a smaller scale, you can use a team site as a wiki to gather and share ideas quickly about a project. Microsoft

A wiki is a website that provides collaborative modification of its content and structure directly from the web browser. In a typical wiki, text is written using a simplified mark-up language (known as “wiki mark-up”), and often edited with the help of a rich-text editor.  The encyclopedia project Wikipedia is by far the most popular wiki-based website. Wikipedia


As mentioned before – these are by far my favourite! Wiki pages are such a cool, creative way to allow end users to create some really beautiful pages. Imagine a PowerPoint presentation where some of the shapes etc. on the pages are hyperlinked to go to the other pages. Doing this as Wiki Pages is a step up and allows for that navigation between pages to be in the web. This means that any user already creating content in Word / PowerPoint can create them as Web pages – and it’s easy!!

 How to create a Wiki Page:

  • As a new page in your Site Pages Library:

Now there are different ways of doing this. You can go to your Site Pages Library, click on Files Tab (1), New Document (2), then select Wiki Page (3):

Wiki001Or you can create a Wiki Page library app specifically for your pages. I prefer doing this as all my Wiki Pages will then be in one location (away from the Site Pages).

  • As a new Wiki Page Library App:

Go to Site Contents and click in Add an App. Search for Wiki. Click on the icon to create a new Wiki Page Library, I’ve named mine “Wiki” as I’ll be using it for all my Wiki Pages. Once created, find it in your Site Contents and open the App:Wiki002

A Wiki Page Library by default opens on its own Home page, click on Edit in the top right corner to edit the page:

Wiki003

I’ve selected all the text and deleted it.

Now this is something I always do, I never use this page to add content, but rather us it as my Index page for all my Wikis. See the note I’ve added at the top to remind the users. You can create a new Wiki Page from any other existing Wiki Page – I also don’t do that. I always come back to this Index page and create it from here. It’s similar to giving a book a good Index page – even though only for Administrative purposes. End users will not navigate here – they will navigate directly to the specific Wiki Page they want to read (however which way you’ve shared that).

Wiki004

Once I’ve added the text and table – I can add a new page name to create a new page. This is very easy to do, Type the new page name in square brackets as seen below and save the page:

Wiki005

When your Index page is not in edit mode anymore – you’ll be able to click on the new Wiki Page name to create it:

Wiki006

And voila!! Your page is created. You can now add text and formatting to the page. As this will be a Newsletter, the first thing I do is add layout to the page. There is nothing as boring as reading text which are not formulated into columns (think Newspaper). Under the Format Text Tab, you’ll find Text Layout on the right. In this example I’ll choose 3 columns:

Wiki007

I then proceed to add text and images:
Wiki008


To adjust the size of images, do not try to drag them smaller – I’ve chosen 350px width for all my images to get a clean ‘article’ look. Select the picture and under the Image Tab, you’ll find Horizontal size which you can adjust:


wiki009

Once you are done with your changes, Save the page:

Wiki010

This is my end result. Take note how placement of images and making all the images the same size, has a great impact on how well the article presents. Once the page is saved, you can copy the URL of the page and share on an announcement, email or even link on your landing page:

wiki011

Wiki Pages print really well straight from the browser, if your menu is not showing click Alt. then click on File > Print Preview. You might have to adjust your page a bit for print area best fit:

Wiki012

 

Tomorrow I’ll be looking at adding hyperlinks and shapes on Wiki Pages.

Overview of my challenge: As an absolute lover of all things Microsoft, I’ve decided to undertake the challenge, of writing a blog every single day, for the next 365 days. Crazy, I know. And I’ll try my best, but if I cannot find something good to say about Office 365 and the Tools it includes for 365 days, I’m changing my profession. So let’s write this epic tale of “Around the Office in 365 Days”. My ode to Microsoft Office 365.

Keep in mind that these tips and tricks do not only apply to Office 365 – but where applicable, to the overall Microsoft Office Suite and SharePoint.

The lighter side of Microsoft #21: SharePoint Wiki Pages with clickable Metro tiles

lighterside

Just having some fun today with racing flags and angry birds. In this post I’ll recap on changing the background image on a SharePoint page, adding clickable metro tile icons and removing the transparent page overlay.

Time to build: Approximately 30minutes (excluding creating the picture/icons for upload)
Audience: End User and Super User
(End User, Super User, SharePoint Designer, SharePoint System Administrator, Web (.NET) Developer)
Level of fun: Accommodating
(Challenging, Accommodating, and Relaxing Fun)
Responsive: This design is NOT responsive and is aimed at helping End Users have fun & create their own home pages without understanding code or being a developer.

Step 1: Decide on a background image and create your icons to be used as metro tiles
Of course I do this in PowerPoint, I planned the grid design and used shapes and images, added text, saved them as images and resized them in Microsoft Office Picture Manager.
Keep in mind that the icons that “stretch” over 2 or 3 small icons will not be the combined size of the 2 or 3 icons but also needs to include the space between the icons.
I’ve checked the padding allowed in the tables by clicking on F12 > Find > Select element by click (in the browser). I then clicked on a cell in the table (not on the image) and found the padding reference.
See the image below on how I used that to calculate the image sizes. I decided on 140×140 pixels for the single metro tiles, I then added the padding etc. to determine the larger image sizes.
For the background image I chose a landscape image of acceptable quality and shaded the image from the top left corner to display the left and top navigation better. The theme on my site has a transparent left and top nav. In the next blog I’ll show you how to change the background colour of this.
Padding and image sizes

Step 2: Create Page in SharePoint (Settings > Add a page, see previous blogs for more details / alternative just edit your home page)

Step 3: Add background image
1. Upload your background image to your Site Assets (or wherever) and copy the URL for later use
2. While the page is in Edit mode: Insert Tab > Web part > Media and content > Script Editor > Add
3. Edit the script editor web part then click on Edit Snippet on the Web Part
4. Insert the code from the image below, Insert > Ok and Apply the web part. Remember to replace the highlighted area with the URL to your background image (Step 3:1)
Note:
Background image will be stretched across the page, regardless of your resolution settings. If you have a composed look (theme) applied to your site, SharePoint will automatically apply a semi transparent white colour (or what has been specified in your theme) over any background colour or image. To remove this I’ve added the “.ms-core-overlay { background-color: transparent;}” code. If you prefer the transparent look, you can remove this part.
Replace background

Step 4: Adding the table with the metro tiles
1. First save the page to confirm that the background image is displaying correctly
2. Edit the page > Insert Tab > Table 8W x 4H (my example)
3. Insert the images in the table (keep in mind that you’ll have to merge some of the cells where an image spans across 2 or 3 images)
4. Add the hyperlinks to the images: Insert Tab > Link > From Address
5. Set the table width to 1% and the Table Height to 1px. This will ensure that the images don’t move because of resolution / zoom.
6. If the images move out of line after setting the width / height, remove any spaces before or after images – this should fix it.
7. Remove the table border by setting it to clear: Design Tab > Style > clear
Table Settings

And here’s the final product. How schweet is that?!?!
Landing page final

The lighter side of Microsoft #13: Change the background colour or image on Wiki Pages

lighterside

Want to change the background colour / image on your SharePoint Wiki Pages? Well it’s easier than you think. And don’t be scared because it involves adding a web part and some code – if I could do it – so could you!!

For some background info on Wiki Pages, refer to my previous blogs Wiki Pages for Organograms and Profile Pages and Using Wiki Pages for Business Process Mapping

Adding a different background colour:
Edit your wiki page > Insert > Web Part > Media and Content > Script Editor > Add:
Add Script Editor

Now edit the Script Editor by clicking on the dropdown on the right of the web part > Edit Web Part > Edit Snippet:
Edit Script Editor

The screen will open where you need to insert the code to change the background colour. Paste the code here (remember to change the hex colour code to the colour you’ve chosen > Click on Insert > Click on Apply:
Code for Background Colour

Save the Wiki Page. Keep in mind that the colour will be affected by the theme applied to your site. That was easy, right?!

Adding a different background image:
First you need to upload the image to an existing image library, in this example I’ve used my site assets library. Make sure that ‘everyone’ has read access to these images.
1. Upload the image to your SharePoint site
2. Copy the URL to your image by clicking on the image until only the image is visible > copy URL
3. Edit your wiki page (and follow the same steps as above)
4. Insert Tab > Web Part > Media and Content > Script Editor > Add
5. Edit Web Part > Edit Snippet
6. Add the following code:
Code for Background Image
7. I’ve added “!important” to override any existing styles SharePoint might want to apply on this page. On O365 I also had to make my Image URL relative (by replacing the server/site with ../ ) before it would work.
8. Click on Insert > Click on Apply

Read more:
If you know the RGB, use the RGB to HEX conversion tool, if you’re not sure, you can use the HEX (HTML) colour picker from W3Schools and also refer to the 216 cross-browser colour palette.
Read more on the W3Schools site about the position / repetition of images

Voila!!

And that’s a wrap for today! Enjoy.

Eat Sleep SharePoint Repeat

The lighter side of Microsoft #12: Wiki Pages for Organograms and Profile Pages

lighterside

My objective with this post is to open your eyes to what can be done on Wiki Pages (and don’t worry – no code was hurt in the process), AND what can be done in PowerPoint. Everyone who knows me well enough – knows that PowerPoint is my secret weapon and if I could cook in it – believe me – I would (at least then I could crop out the burnt parts ha ha).

I’m on a bit of a roll with Wiki Pages at the moment. When on contracts it seems my main mission is to work myself to death and I don’t get much to blogging. So I’ll be sharing quite a bit over the next two weeks, before going back to the salt mines.

So here goes…

In this post I’ll show you how to build a visual Organogram on a SharePoint Wiki Page. From this page you’ll be able to click on an employee and navigate to their profile page. I’ll be building this on O365 (SharePoint Online) – 2013 of course and the only other tools used are PowerPoint and Snipping Tool (found on all MS OS PC’s since your grandmother started using Vista).

As I’ll be referring to some previous blogs – see below list for more information:
The lighter side of Microsoft #11: Using Wiki Pages for Business Process Mapping
The lighter side of Microsoft #10: Mailto e-mail links
The lighter side of Microsoft #5: Be more creative with Microsoft Office
The lighter side of Microsoft #3: Banners & Click-able Images In SharePoint

I’ll also be referencing the below Ribbons image throughout this blog:
Menus used

Creating the Organogram Wiki Page:
In Wiki Pages for Business Process Mapping I explained how to use an Index page and create the new wiki pages from there. Using [[ ]] (square brackets) I add the new page on my index – [[Organogram]] – and saved the Index page. Once saved I can then click on the underlined name to create the new page.

Starting from a blank page I inserted a 3 (column) x 6 (row) table {Ribbons Image #1}. In PowerPoint I created the objects by inserting shapes and adding text to them. I then right-clicked and saved these shapes as images. On the SharePoint Wiki Page I inserted these images {Ribbons Image #2}. To get the alignment right – I’ve had to merge some of the columns {Ribbons Image #6} and centre the images. I also set the overall width of the table {Ribbons Image #7} to move the images closer to each other. I also changed the table’s style to not display the lines {Ribbons Image #4}. Save the page.

As these are images, you can use any fonts and don’t have to worry about web-safe fonts at all. To resize images – do not drag them – use the Image Tab Resizing – lock aspect ratio {Ribbons Image #8}.

Images below shows the final Organogram page – with the gridlines switched on in edit mode, and finally the saved image.
Organogram2
Oganogram1

Creating the employee profile page:
Go back to your index page and add an entry for the new page you want to create. I’ve built my own profile page, so I added [[Tracy van der Schyff]]. Once the index page is saved, you can click on the underlined name to create the new page.

For this page I used PowerPoint. On the slide I inserted and arranged various images. Some of these are from PowerPoint Templates I downloaded from Presentermedia.com – fantastic site by the way. Keep up the good work guys!

After adding the text I used snipping tool to snip (copy) the different images. I did not want to insert one image as I have to add different hyperlinks to different images. You can only add one hyperlink per image (I surely miss the Image Maps I used in SharePoint 2010 Designer), and this is the only way to do it. See the image below that shows the full image in PowerPoint – and how I planned to cut it up.

Profile Tracy 3

Once all the individual images are saved, I can go back to the Profile Wiki Page and insert the images.
On the Tracy van der Schyff Wiki Page – I’ve inserted a 3 (column) x 12 (row) table {Ribbons Image #1} and inserted all the images. Again for alignment I merged some cells and set the overall table width {Ribbons Image #6 and #7} and then set the table style to clear {Ribbons Image #4}. Lastly I clicked on the individual social media images and inserted the hyperlinks to my social media pages. See my blog The lighter side of Microsoft #10: Mailto e-mail links. On the larger image I inserted a mailto link, this will enable users to click and send me an email. Save the page.

Keep in mind that these images are not responsive and will stay the same size regardless of the resolution. So design the image to have most of the clickable links towards the top left corner / half of the image, in case it cuts off. Find the average best fit size for the average resolution in your company and you’ll be ok.

Images below shows the final Profile page – with the gridlines switched on in edit mode, and finally the saved image.
Profile Tracy 2
<img
Profile Tracy 1b

Adding the link on the Organogram page to the Profile page:
First copy the URL of your saved profile page. Navigate to the Organogram page and edit the page, click on the image you want to link the profile page to. I’ve used Tracy van der Schyff. Insert the link to the other page {Ribbons Image #4}. Save the page. The image on the Organogram that reads Tracy van der Schyff will now be clickable and will open the Profile page I created. Remember to add a link on the profile page back to the organogram page.

Insert link

And that’s it for today. Go forth and be awesome!

Eat Sleep SharePoint Repeat

Powered by WordPress.com.

Up ↑