Page tree
Skip to end of metadata
Go to start of metadata

This guide explains how to use QuickLook in your project for iOS devices that support office documents.

What is QuickLook ?

QuickLook simply provide previews of items formatted as below;

  • ".doc" , ".docx"
  • ".xls"  , ".xlsx"
  • ".ppt" , ".pptx"
  • ".pdf"

For more information about QuickLook you can visit iOS Developer Site/QuickLook.

How to Use QuickLook ?

Firstly, add your office documents into assets folder. You can also use "webLinks" or downloaded files within the app. 

Now, create an instance of QuickLook control and use it for different document types;

var quickLook = new SMF.UI.iOS.QuickLook();
    
    var btn = new SMF.UI.TextButton({
			name : "btn",
			text : "Press me for pdf",
			width : "70%",
			left : "15%",
			height : "10%",
			top : "20%",
			onPressed : function(e) {
				quickLook.document = "PDFSample.pdf";
				quickLook.show();
			}
		});
	Pages.page1.add(btn);
	
	    var btnExcel = new SMF.UI.TextButton({
			name : "btn",
			text : "Press me for excel",
			width : "70%",
			left : "15%",
			height : "10%",
			top : "35%",
			onPressed : function(e) {
				quickLook.document = "excel.xlsx";
				quickLook.show();
			}
		});
	Pages.page1.add(btnExcel);
    
    var btnDoc = new SMF.UI.TextButton({
			name : "btn",
			text : "Press me for docx",
			width : "70%",
			left : "15%",
			height : "10%",
			top : "50%",
			onPressed : function(e) {
				quickLook.document = "word.docx";
				quickLook.show();
			}
		});
	Pages.page1.add(btnDoc);
	
	var btnPptx = new SMF.UI.TextButton({
			name : "btn",
			text : "Press me for pptx",
			width : "70%",
			left : "15%",
			height : "10%",
			top : "65%",
			onPressed : function(e) {
				quickLook.document = "powerpoint.pptx";
				quickLook.show();
			}
		});
	Pages.page1.add(btnPptx);

When the app started, you will see 4 buttons bound to different document types. When a button pressed it will open QuickLook with related document.

Best Practice

First, define a global function which handles the documents.

function showOfficeFile(filePath) {
    if (Device.deviceOS == 'iOS') {
        var quickLook = new SMF.UI.iOS.QuickLook();
        quickLook.document = filePath;
        quickLook.show();
    }
    else { // Android devices don't support office documents.
        alert("Office documents are not supported");
    }
}

Second, define a global function which opens documents if the related extension is supported.

function openDocument(filePath) {
	var ext = filePath.substr(filePath.lastIndexOf('.') + 1);

	switch (ext) {
		case 'doc':
			showOfficeFile(filePath);
			break;
		case 'docx':
			showOfficeFile(filePath);
			break;
		case 'ppt':
			showOfficeFile(filePath);
			break;
		case 'pptx':
			showOfficeFile(filePath);
			break;
		case 'xls':
			showOfficeFile(filePath);
			break;
		case 'xlsx':
			showOfficeFile(filePath);
			break;
		case 'doc':
			showOfficeFile(filePath);
			break;
		case 'pdf':
			showOfficeFile(filePath);
			break;
		default:
			alert("wrong file extension...");
	}

}

Finally, use openDocument(filePath) function to open documents;

openDocument("PDFSample.pdf");