Tag Archives: iPhone

New SharePoint apps for education and business

We are releasing several apps for SharePoint (on-premises and Office 365) I’ve included some information below, please feel free to drop me an email or give me a call if you want an online demonstration of the Apps. More information on the apps can be found here

Parents evening booking system

Parent evening booking SharePoint App

This app allows parents to view available days/times and book online. This app was designed to reduce the administrative time taken to book slots on behalf of parents based on their preferences.

Parent evening booking SharePoint App

Some of the features include:

  • Parents view available slots
  • Parents book online
  • Parents can make changes to the booking
  • Teachers can see who has booked to see them
  • Admins can upload session data via spreadsheet
  • Supports multiple children at the school
  • Updated several times a year as part of the subscription

Internal helpdesk

The Cloud Design Box internal helpdesk app manages all your support tickets in an easy-to-use list. Users can view and update their own tickets while the helpdesk team have access to manage all the support tickets.

Parent evening booking SharePoint App

Leave requests

Leave and holiday requests tend to create a burden on admin, managers and human resources. Streamlining requests to just a few clicks and automating the processes by sending notification emails saves everyone time.

Parent evening booking SharePoint App

Using the Cloud Design Box dashboard, employees can view all approved holidays for their team, allowing them to make an informed decision on when to request leave. Employees fill in a simple form on the site which is them emailed to their manager for approval. In just a few clicks the manager can approve or reject with some feedback.

Employee onboarding dashboard

Over the years Cloud Design Box developed several workflows and processes for new employees. When making this web part, we took the core requirements made added them to an easy-to-use interface.

Parent evening booking SharePoint App

A clean dashboard shows instantly the onboarding status and progress of each employee. Each task list assigned to individual departments can be viewed in more detail.

Parent evening booking SharePoint App

The HR department have full control over the lists so they can check the current status and chase up any outstanding tasks. Departments are alerted by email when a new employee joins and have access to update their own task list. The app is mobile friendly and can be used on any device.

KPI and appraisal tracker

This dashboard was designed to make it easier and clearer for managers to track the progress of their team. Setting a KPI is easy and the employee can view their own goals and see a graphical representation of the progress made towards meeting their targets.

Parent evening booking SharePoint App

Appraisal documentation can also be attached to the employee making appraisal meetings easy to track.
It’s been really exciting developing these new apps and dashboards. Our enthusiastic customers have helped define the core functions and we look forward to developing these further as time goes on.

Other Apps

Our other apps include:

  • PO Tracker
  • Timesheets

And can be found on the Cloud Design Box website

For more information or to arrange a demonstration please drop me an email or give me a call.

Thanks,
Tony

Supporting iPad in a HTML5 Web App

In a previous post I wrote about creating a HTML5 site which also worked as an iPhone Web App. If the web app needs to also support iPad integration, there are a few more lines needed in the HTML as well as a couple more loading images.
The following code needs to go in the head section of the HTML:

<!--iPad and iPhone startup app screens -->
<!-- iPhone startup image -->
<link rel="apple-touch-startup-image" href="https://siteURL/Images/startup.png"/>
<!-- iPad startup image portrait view -->
<link rel="apple-touch-startup-image" href="https://siteURL/Images/startup_ipad.png" media="no mobile, screen and (device-width: 768px) and (orientation:portrait)"/>
<!-- iPad startup image landscape view -->
<link rel="apple-touch-startup-image" href="https:/siteURL/Images/startup_ipad_hor.png" media="no mobile, screen and (device-width: 768px) and (orientation:landscape)"/>

The code above specifies different startup images for different devices. The iPad can load web apps either when placed horizontally or vertically. This means it requires two loading images.
Startup png images for iPad should have the following dimensions:
Default Portrait png should be 768w x 1004h
Default Landscape png should be 1024w x 748h

SharePoint Master Page for iPhone HTML 5 Web App

iPhone Web AppIn my last post, I showed how to create an iPhone web app using HTML5. Recently I have been working on constructing a HTML5 SharePoint Master Page that also works as an iPhone web app.
I managed to do this by downloading Randy Drisgill’s Starter Master Pages Download Here
I then removed as many tags as possible without breaking the publishing Master Page. Changed the doc type, added the meta and link tags (see previous post). This allowed me to create a HTML5 compliant SharePoint Master page which also worked as an iPhone web app. Further customisation is needed to convert the TMG/ISA login form to a mobile friendly smart phone page if you are using an authenticated SharePoint 2010 site.

Creating a HTML5 iPhone Web App!

iPhone App Icon

First create two images which will be vital in creating the iPhone web application. The first image is for the app’s icon. This is the icon you will see when you add it to your home screen. Make sure your image is 57px by 57px and save it as a JPEG or PNG file.

iPhone icon

Startup Screen

The second image is for the app’s loading screen. When the icon is selected, the app will start in full screen mode and display a loading screen while it loads the HTML page in the background. This image should be 320px wide and 460px high.
Startup Screen

HTML 5 page

HTML5 does not yet work in any desktop browser fully yet but more mobile web broswers are supporting it.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset=utf-8>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<title>tony is here iPhone web app</title>
		<link rel="stylesheet" href="html5css.css">
		<link rel="apple-touch-icon" href="images/tony-icon.jpg" />
		<link rel="apple-touch-startup-image" href="images/tonystartup.png" />
		<!-- Prompt user to install on iphone if accessed through mobile safari -->
		<script type="text/javascript">
			if (window.navigator.standalone) {
				// fullscreen mode
			} else{
				alert('Install on iPhone by pressing Add to Home Screen')
			}
	</script>
	</head>
	<body>
		<section id="wrapper">
			<header>
				<h1>Tony Phillips SharePoint and Web Design Blog</h1>
			</header>

			<article>
				<section>
					<button type="button" name="Blog" class="css3button" onclick="parent.location='blog.html'">Blog</button>
					<button type="button" name="Linked In" class="css3button" onclick="parent.location='linkedin.html'">Linked In</button>
					<button type="button" name="Facebook" class="css3button" onclick="parent.location='facebook.html'">Facebook</button>
					<button type="button" name="Twitter" class="css3button" onclick="parent.location='twitter.html'">Twitter</button>
					<button type="button" name="Email" class="css3button" onclick="parent.location='email.html'">Email</button>
				</section>
			</article>
		</section>
	</body>
</html>

You may notice a few differences in the example above from a standard HTML page. There are two link tags to provide the iPhone with the icon and loading screen location. These are the two graphics created in the first section of this post.

<link rel="apple-touch-icon" href="images/tony-icon.jpg" />
<link rel="apple-touch-startup-image" href="images/tonystartup.png" />

The two meta tags below scale the site to the mobile device’s screen and enable adding as a web app on the iPhone.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes">

The only new tags in this example are the section, header, article and button tags which all make it much easier to create websites in HTML5. HTML5 is worth a google!

JavaScript

You can also detect if the site is being accessed through the web browser or if it has been loaded from the home screen. If it has been opened in the browser, we can notify the user that they can add this site as a web app. All you need to do is add the following JavaScript in the HEAD section of the HTML.

// Prompt user to install on iphone if accessed through mobile safari
if (window.navigator.standalone) {
// fullscreen mode
} else{
alert('Install on iPhone by pressing Add to Home Screen')
}

Make sure you take full advantage of CSS3 when styling your site. Rounded corners and shadows look great on buttons without the need for background images or jQuery!

To see this example working go to the following URL on your iPhone and add it to your home screen. In my next post I will explain how this could also be a SharePoint MasterPage!

http://www.tonyishere.co.uk/mobile