# Titanium.UI.iOS.PreviewContext > A PreviewContext provides options to configure the iOS 9 3D-Touch "Peek and Pop" feature. - Source: https://titaniumsdk.com/docs/sdk/13.0.0/Titanium.UI.iOS.PreviewContext - Titanium SDK version: 13.0.0 - Kind: proxy - Platforms: iPhone - Since: Titanium SDK 5.1.0 - Extends: Titanium.Proxy - Inheritance: Titanium.Proxy The PreviewContext is created by the [Titanium.UI.iOS.createPreviewContext](https://titaniumsdk.com/docs/sdk/Titanium.UI.iOS.md#createPreviewContext) method. You must set the `pop` and `preview` properties when creating a `PreviewContext` object. Use this class to configure the previewing context which is displayed while "peeking" a view. Note: This feature requires iOS 9 and a 3D-Touch capable device (such as iPhone 6S or iPhone 6S Plus). You cannot test 3D touch on the iOS simulator. To check if the current device supports 3D touch, use the [Titanium.UI.iOS.forceTouchSupported](https://titaniumsdk.com/docs/sdk/Titanium.UI.iOS.md#forceTouchSupported) property and consider using the `longpress` event to provide a fallback to your users on non-3D-touch devices. See also: * [iOS Developer Library: Adopting 3D Touch on iPhone](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/Adopting3DTouchOniPhone/3DTouchAPIs.html) ## Example: PreviewContext example using a Button as receiver. The example below creates a new preview context and assigns a `window`, `actions` and a `contentHeight`. After that, we assign the preview context to a view which will trigger the "peeking" of it. Note, that this is independent from the click event of the view itself. ``` js var actions = []; var win = Ti.UI.createWindow({ backgroundColor: "white" }); // The view to be previewed while popping. var previewView = Ti.UI.createView({ backgroundColor: "blue" }); // The window to be opened after popping the preview. var detailWindow = Ti.UI.createWindow({ backgroundColor: "yellow" }); detailWindow.add(Ti.UI.createLabel({ text: "You made it!" })); // The actions to be added to the preview context. var action = Ti.UI.iOS.createPreviewAction({ title: "Preview Action", style: Ti.UI.iOS.PREVIEW_ACTION_STYLE_DEFAULT }); action.addEventListener("click", function(e) { alert("Title: " + e.title + " / Style: " + e.style+" / Index: " + e.index); }); var subAction = Ti.UI.iOS.createPreviewAction({ title: "Preview Subaction" }) subAction.addEventListener("click", function(e) { alert("Title: " + e.title + " / Style: " + e.style+" / Subindex: " + e.index); }); var actionGroup = Ti.UI.iOS.createPreviewActionGroup({ title: "More actions...", style: Ti.UI.iOS.PREVIEW_ACTION_STYLE_DESTRUCTIVE, actions: [subAction] }); actions.push(action); actions.push(actionGroup); // Create the preview context var context = Ti.UI.iOS.createPreviewContext({ preview: previewView, actions: actions, // Can have both Ti.UI.iOS.PreviewAction + Ti.UI.iOS.PreviewActionGroup contentHeight: 300 // When unspecified, we use the available height }); // Fired after popping the preview context.addEventListener("pop", function(e) { detailWindow.open(); }); // Assign the preview context var button = Ti.UI.createButton({ previewContext: context, // Will be ignored on unsupported devices title : "Open Window!", backgroundColor: "#A6171C", width: 200, height: 50, tintColor: "#fff" }); win.add(button); win.open(); ``` ## Example: PreviewContext example using a ListView as receiver. ```js var actions = []; var win = Ti.UI.createWindow({ backgroundColor: "white" }); // The view to be previewed while popping. var previewView = Ti.UI.createView({ backgroundColor: "blue" }); // The window to be opened after popping the preview. var detailWindow = Ti.UI.createWindow({ backgroundColor: "yellow" }); detailWindow.add(Ti.UI.createLabel({ text: "You made it!" })); // The actions to be added to the preview context. var action = Ti.UI.iOS.createPreviewAction({ title: "Preview Action", style: Ti.UI.iOS.PREVIEW_ACTION_STYLE_DEFAULT }); action.addEventListener("click", function(e) { alert( "Title: " + e.title + "\nStyle: " + e.style + "\nIndex: " + e.index + "\nSectionIndex: " + e.sectionIndex + "\nItemIndex: " + e.itemIndex ); }); actions.push(action); // Create the preview context var context = Ti.UI.iOS.createPreviewContext({ preview: previewView, actions: actions, // Can have both Ti.UI.iOS.PreviewAction + Ti.UI.iOS.PreviewActionGroup contentHeight: 300 // When unspecified, we use the available height }); // Fired after peeking the preview // Use this event to configure the preview depending on the sectionIndex / itemIndex context.addEventListener("peek", function(e) { Ti.API.warn("sectionIndex: " + e.sectionIndex); Ti.API.warn("itemIndex: " + e.itemIndex); }); // Fired after popping the preview context.addEventListener("pop", function(e) { detailWindow.open(); }); // Assign the preview context var listView = Ti.UI.createListView({ previewContext: context, // Will be ignored on unsupported devices }); var section1 = Ti.UI.createListSection({ headerTitle: "Section 1" }); var section2 = Ti.UI.createListSection({ headerTitle: "Section 2" }); var items = []; for(var i = 1; i <= 5; i++) { items.push({ properties: { title: "Cell #" + i } }); } section1.items = items; section2.items = items; listView.sections = [section1, section2]; win.add(listView); win.open(); ``` ## Properties ### actions - Type: Array - Platforms: iPhone The preview actions and preview action groups. Provides an array with elements of the type [Titanium.UI.iOS.PreviewAction](https://titaniumsdk.com/docs/sdk/Titanium.UI.iOS.PreviewAction.md) and [Ti.UI.iOS.PreviewActionGroup](https://titaniumsdk.com/docs/sdk/Titanium.UI.iOS.PreviewActionGroup.md). Both can be used together. ### contentHeight - Type: Number - Platforms: iPhone - Default: `The available height of the screen.` The height of the preview. Specified the height of the preview which will be shown during "peeking". ### preview - Type: Titanium.UI.View - Platforms: iPhone The preview view. Provides the preview for "peeking". This view is independent from the window which can be openend after "popping" the preview to give you the ability to provide different layouts for the preview and the full window. If you want to adjust the preview inside the `peek` event, change the view assigned to this property. ## Events ### peek - Platforms: iPhone Fired when the user peeks the preview. You can configure the preview You can configure the preview in this event before it is displayed. If the preview context is assigned to a normal view like a [Titanium.UI.Button](https://titaniumsdk.com/docs/sdk/Titanium.UI.Button.md) the `preview` property can be received here to change the content of it before displaying. If the preview context is assigned to a [Titanium.UI.ListView](https://titaniumsdk.com/docs/sdk/Titanium.UI.ListView.md), you can also receive the properties `sectionIndex`, `itemIndex` and `itemId` here to access item-specific data to display. Note: Don't do asynchronous operations like HTTP requests here, since the preview will not wait for the operations to complete. Event properties: - `preview` (Titanium.UI.View): The view to be previewed. - `sectionIndex` (Number): The section index of the ListView to identify the selected section. Note: This property is only available if the preview context is assigned to a [Titanium.UI.ListView](https://titaniumsdk.com/docs/sdk/Titanium.UI.ListView.md). - `itemIndex` (Number): The item index of the ListView to identify the selected item. Note: This property is only available if the preview context is assigned to a [Titanium.UI.ListView](https://titaniumsdk.com/docs/sdk/Titanium.UI.ListView.md). - `itemId` (String): The item ID bound to the list item that generated the event. ### pop - Platforms: iPhone Fired when the user pop the preview. You will most likely open a fullscreen window here. You can open a window here or update your current UI. If the preview context is assigned to a normal view like a [Titanium.UI.Button](https://titaniumsdk.com/docs/sdk/Titanium.UI.Button.md) the `preview` property can be received here to change the content of it before displaying. If the preview context is assigned to a [Titanium.UI.ListView](https://titaniumsdk.com/docs/sdk/Titanium.UI.ListView.md), you can also receive the properties `sectionIndex`, `itemIndex` and `itemId` here to access item-specific data to display. Note: Don't do asynchronous operations like HTTP requests here, since the preview will not wait for the operations to complete. Event properties: - `preview` (Titanium.UI.View): The view to be previewed. - `sectionIndex` (Number): The section index of the ListView to identify the selected section. Note: This property is only available if the preview context is assigned to a [Titanium.UI.ListView](https://titaniumsdk.com/docs/sdk/Titanium.UI.ListView.md). - `itemIndex` (Number): The item index of the ListView to identify the selected item. Note: This property is only available if the preview context is assigned to a [Titanium.UI.ListView](https://titaniumsdk.com/docs/sdk/Titanium.UI.ListView.md). - `itemId` (String): The item ID bound to the list item that generated the event. ## Inherited members 6 members are inherited. Each is documented on the type that declares it. - [Titanium.Proxy](https://titaniumsdk.com/docs/sdk/13.0.0/Titanium.Proxy.md): `addEventListener`, `apiName`, `applyProperties`, `bubbleParent`, `fireEvent`, `removeEventListener` --- - This corpus documents Titanium SDK 13.4.1. Anything here that does not name a version describes 13.4.1. - Titanium is maintained by TiDev. The Appcelerator toolchain is retired: there is no `appc` CLI, no Appcelerator Studio and no hosted build service. The supported CLI is `titanium` on npm, invoked as `ti`.