Adding App Components

To add a form screen to your app:

1. For Gridview / Page Layout, choose one of the available layouts. You can rotate the layout you choose. See Gridview Layout for more details.
2. Select Add.
3. Select the new form you created in the app screen list and not the new form's sub page.
   Notice: When you add a new form, a subpage is automatically created for the new form as well. SOTI Snap by default selects the sub page and not the new form.
4. In the Form Properties panel on the right, configure the form.
5. Optional: Nest more pages or web pages under the form.

To add a page to your app, do the following:

1. For Gridview / Page Layout, choose one of the available layouts. You can rotate the layout you choose. SeeGridview Layout for more details.
2. Select Add.
3. In the Page Properties in the right panel, perform the following tasks:
   1. For the ID field: SOTI Snap automatically generates and uses a unique identifier for a new page. You can change this field's value. If you do change it, set it to the same as the Name field.
   2. For the Name field: This is the name you entered earlier when creating the page. You use this field when referring to this page (such as when incorporating Events and Action) or organizing pages. If you have not done so already, enter a unique customized name.
   3. For the Page Title drop-down list, select one of the following labels:
      • Same as page name
      • Same as form name
      • Same as app name
      • Custom name
   4. Design the background of the page. Do one of the following:
      1. Color: Select Color Scale to choose a solid color to fill the background.
      2. Image: Select Upload Image to upload an image to use it as a background for this page. Then select the Scale drop-down menu to choose a setting.
         • Fit
         • Fill
         • Stretch
         • Tile
         • Center
4. Switch to the Format tab to edit the padding and margin of the page.
5. Switch to the Events tab to configure the events.

To add a web page to your app, do the following:

1. Select Add.
2. In the Webpage Properties in the right panel, choose how a Header name label option from the drop-down list. A header name appears at the top of the app screen while on a specific screen.
   • Same as page name
   • Same as app name
   • Custom name
3. Do one of the following to specify a URL:
   Important: The specified URL must began with HTTP or HTTPS.
   1. Enter the URL of the web page you want to embed in your app.
   2. Select a Global Variable that has a value set to a URL or select an App Field (widget) that has text set to a URL.

   You can specify the direct URL to the page you want to initially display. You can also specify a base URL of the entire site and then use parameters to point to the specific page that you want to display. Parameters are useful when the link is likely to differ slightly between users, such as the addition of an authentication or other security features.

   Optional: For the URL, define the keys and assign their corresponding values to the properties below.

   1. Headers: Use headers when you want to grant app users access to secured webpages. Only visitors with the header values can access the web page.
      Restriction: Only the website developer can supply the headers defined for a page.
   2. Query Strings: Use query strings to display the results of a search.
   3. Cookies: Use cookies to keep users logged into a web page by passing token or session keys and values. SOTI Snap use cookies to enable automatic authentication to a logged in user so they do not need to log in each time they access the website.
   4. Path Parameters: Use path parameters to generate more dynamic links.

To add a hamburger menu to your app:

1. Select Add.
2. In the Menu Properties panel on the right, make sure that SOTI Snap has toggled Show Hamburger Menu switch to on.
3. Select the Menu Item tab, and then select the Add button to add a new menu item.
4. Enter a new name for the menu item and select the image icon to upload a image. SOTI Snap associates the menu item with the image you have uploaded in the hamburger menu on the app. Repeat for as many menu items as you want to appear in the Hamburger menu.
5. Optional: Switch to the Header tab and toggle the option to Enabled.
   1. Select the image icon under Display photo to upload an image that appears in the Hamburger Menu.
   2. Enter a name in the Display name field.
6. Switch to the Format tab to edit the appearance of the hamburger menu.
7. Switch to the Events tab.
8. From the Hamburger drop-down list, select a menu or header item.
9. Beside Actions, select Add and select and define an action from the Actions drop-down list.
10. Repeat for the rest of the menu and header items and select Save.

To add an AI form builder to your app:

1. Do one of the following:
   • Select Prompt to enter a prompt message to generate your form:
     1. Optional: Select Lead Generation Form or Feedback Form to automatically fill a prepared prompt message.
     2. Below Enter the prompt and see SOTI Snap AI in action, enter a prompt message in the text box describing the form you want to generate.
        Tip: The built-in AI has the following features:

        • Support for 100+ languages.
        • Generate sophisticated contextual images upon request.
        • Embed relevant videos upon request.
        • For each of the requested widgets, their properties are automatically filled out with appropriate values.
   • Select PDF/Image to upload a file to generate your form:
     Note: The maximum file size is 10MB.
     Choose from one of the following:
     • Optional: Select Learn more to see more details about this feature.
     • Optional: Select Feedback to submit your name, email and a message to SOTI about this feature.
     • From your local device's file explorer, drag a *.pdf, *.jpeg, *.jpg, *.png, *.txt, or *.doc file into the Drag and drop image file here file selector box. A file icon or preview appears.
     • 1. Select to open a file browser.
       2. From the file browser, navigate to the *.pdf, *.jpeg, *.jpg, *.png, *.txt, or *.doc file containing your form.
       3. Select the file. A file icon or preview appears.
2. Select Generate With AI.
   Note: It may take a few minutes for SOTI Snap to automatically generate the form.

Result: You have generated a new form, which opens in the canvas for editing. You can now edit and customize your new form.