How to create a custom HTML Page

1. Create a page

On SeattleCloud Marketplace click "Create your own page type" button to access "Add new page" section → click on "Create HTML page" button.

---

2. Submit a draft version of your HTML page

In the next step you'll need to create a draft version of HTML page.

2.1 Package Module - By default, our system will create a module for you. However, you still can choose what Module to use. (SC Modules Tutorial)
2.2 Type - Add your HTML page name. Only letters & digits allowed, lower case in one word.
2.3 Kind - Confirm your page category. It can be HTML or Native.
2.4 Title - Here you need to add a title for your page. Only letters & digits allowed. The name should start with a letter.
2.5 Description - Add a description for your page.
2.6 Icon Image - PNG format image. Size: 18 x 18 px
2.7 Screenshot Image - JPG format image. Size: 180 x 240 px
2.8 Promo images - Upload here Promo Images for your page. These images will be displayed in the promotion details of your page. Allowed file extensions: PNG, JPG, JPEG, GIF
2.9 Promo Video (YouTube) - If you have a promo video for your page, please upload it on YouTube and add its URL.
2.10 Tutorial URL-  If you have a tutorial for your page, please add it on our Forum → Help & Tutorials category . Add the Thread URL in this field.
2.11 Supported platform - These options will appear as page info in the Marketplace. Related to module support platform. iOS - iPhone, iPod Touch, iPad devices ; Android - Android Phones and Tablets, Kindle devices. At least one of the Target platform must be selected in order to publish the page type.
2.12 Page Editor - You can pick from 3 different editor types.
   2.12.1 Default - You should specify the default key parameters, comma separated. These keys will be used as default configuration parameters for your page type in generic Key/Value pair editor
   2.12.2 Custom - With the Custom page editor you'll be able to add your custom settings (input, checkbox,textarea) and its parameters. Also, this editor will enable the Layout Editor and HTML Toolbox.

The java script of the editor should contain two main functions:

 GetPageSettingValue and SetPageSettingValue

GetPageSettingValue is used to get the value of the item from editor (input, checkbox, textarea).  SetPageSettingValue is used to set up the value of the editor element (input, checkbox, textarea) in iframe (simulator, HTML). The Control Unique ID represent the function GetPageSettingValue (key) that will return mainly in function SetPageSettingValue (key, value) to parse the value of the input item. The only change you have to make is to add unique function to parse the information accordingly to the page type you developed. In the screenshot, the unique function represents startCountdown.  The code for startCountdown  is located in countdowntimer.js file; however, it is not mandatory to link it to a js, you can write the function directly in the HTML file. Check Sample Code here.

   2.12.3 External - Editor will be loaded in "iframe".
2.13 Category - Choose your HTML page group.
2.14 HTML template page - Upload your HTML page code. If your code is responsive on different screen sizes, you'll need only the "*phone" version. Otherwise, you'll need to upload and a "tablet" version of the HTML page.
2.15 This page can be used by - SC Website - It will be added on Marketplace and all SC Users will be able to add this page in their apps; Only Me - This page will be private and only you'll be able to use it.
2.16 Status - Since this is a DRAFT version only the "In-Development" status will be available.
2.17 Price - Set a price for your page in US Dollars. 

You can update your page type on Profile → Developer Tools → My Pagetypes.

Now your page type should be available on SeattleCloud Marketplace.