### GitHub Sample Project

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Getting started/Create an app from scratch/Create the Map.md

Provides a link to download the 'Hello Jigx' solution project from GitHub, which serves as a practical example for users following the guide.

```github
https://github.com/jigx-com/jigx-samples/tree/main/quickstart/hello-jigx-solution
```

--------------------------------

### Global Action Configuration and Jig Call Example

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/UI/Actions.md

This example provides a complete setup for global actions, showing both the global action definition (`global-action.jigx`) and how to call it from a jig (`jig.jigx`). It highlights passing contextual values using parameters defined in the global action and provided by the jig.

```yaml
action:
  type: action.execute-entity
  options:
    provider: DATA_PROVIDER_DYNAMIC
    entity: default/contacts
    method: update
    onSuccess:
      description: Contact Updated
      title: Contact Updated
    # set the global jig parameters
    data:
      id: =@ctx.action.parameters.id
      name: =@ctx.action.parameters.name
      email: =@ctx.action.parameters.email
parameters:
  id:
    type: string
    required: true
  name:
    type: string
    required: true
  email:
    type: string
    required: true
```

```yaml
actions:
  - children:
      - type: action.execute-action
        options:
          title: Update Work details
          action: update-details
          # Provide the context values for the global jig parameters in the jig calling the global action.
          parameters:
            id: =@ctx.components.id.state.value
            name: =@ctx.components.name.state.value
            email: =@ctx.components.email.state.value
```

--------------------------------

### Jigx Builder Installation

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Welcome to Jigx Documentation.md

Instructions for installing the Jigx Builder extension in Visual Studio to start creating Jigx solutions.

```markdown
[Install](<./Getting started/Install the Jigx Builder.md>)

Install the Jigx Builder extension in Microsoft Visual Studio and create your Jigxs solutions.
```

--------------------------------

### Install Jigx Builder Extension

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/Jigx Builder _code editor_/Install.md

Steps to install the Jigx Builder extension from the Visual Studio Marketplace.

```VSCode Extension
1. Download and install VS Code from https://code.visualstudio.com/download.
2. Open VS Code.
3. Click the Extensions icon in the left navigation bar.
4. Search for "Jigx Builder".
5. Click the blue "Install" button.
```

--------------------------------

### Default Jig Example

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/UI/Jigs _screens_.md

Provides an example of the Default Jig, highlighting its versatility for forms, lists, and various components and actions.

```javascript
import { jig } from '@jigx/core';

// Example usage of jig.default
jig.default({
  // configuration options for the default jig
});
```

--------------------------------

### Jigx Utility Examples

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/UI/Components _controls_.md

Demonstrates utility components in Jigx, such as count-up timers, event handlers, progress bars, and summary displays. These examples highlight common functionalities for data presentation and user feedback.

```html
<a href="https://docs.jigx.com/examples/count-up">count-up</a>
<a href="https://docs.jigx.com/examples/event">event</a>
<a href="https://docs.jigx.com/examples/progress-bar">progress-bar</a>
<a href="https://docs.jigx.com/examples/summary">summary</a>
```

--------------------------------

### Jigx Charts Examples

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/UI/Components _controls_.md

Demonstrates the usage of different chart components in Jigx, including line charts and pie charts. These examples showcase how to render and configure various chart types.

```html
<a href="https://docs.jigx.com/examples/line-chart">line-chart</a>
<a href="https://docs.jigx.com/examples/pie-chart">pie-chart</a>
```

--------------------------------

### Jigx Interactive Components Examples

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/UI/Components _controls_.md

Showcases interactive components in Jigx, including interactive images and their items. These examples demonstrate how to create engaging user experiences with dynamic content.

```html
<a href="https://docs.jigx.com/examples/interactive-image">interactive-image</a> 
<a href="https://docs.jigx.com/examples/interactive-image-item">interactive-image-item</a>
```

--------------------------------

### Jigx Widgets Example

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/UI/Components _controls_.md

An example demonstrating the 'widgets' component in Jigx, which likely serves as a container or manager for various UI elements. This example showcases composite list document functionality.

```html
<a href="https://docs.jigx.com/examples/widgets">widgets</a>
```

--------------------------------

### Document Jig Example

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/UI/Jigs _screens_.md

Shows how to implement the Document Jig for displaying PDF files or HTML pages within an application.

```javascript
import { jig } from '@jigx/core';

// Example usage of jig.document
jig.document({
  // configuration options for displaying documents
});
```

--------------------------------

### Input Transform Example with Parameters

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/Data/Data Providers/REST/REST Overview.md

An example of an input transform using JSONata to construct a JSON payload. It demonstrates how Jigx parameters are mapped to JSON fields.

```JSONata
$.{
  "orderNumber": orderNumberParameter,
  "orderDescription": orderDescriptionParameter
}
```

--------------------------------

### Full-screen Jig Example

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/UI/Jigs _screens_.md

Demonstrates the use of the Full-screen Jig to display content, such as locations, across the entire screen.

```javascript
import { jig } from '@jigx/core';

// Example usage of jig.fullscreen
jig.fullscreen({
  // configuration options for full-screen display
});
```

--------------------------------

### Grid Jig Example

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/UI/Jigs _screens_.md

Illustrates the Grid Jig for creating structured grid layouts with rows and columns, ensuring a consistent and flexible interface.

```javascript
import { jig } from '@jigx/core';

// Example usage of jig.grid
jig.grid({
  // configuration options for grid layout
});
```

--------------------------------

### Jigx Solution Steps Overview

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Getting started/Create an app from scratch.md

This section outlines the steps involved in building the 'Hello-Jigx' mobile application using Jigx. It details the creation of various components like maps, calendars, and data forms, along with their build times and links to detailed guides.

```jigx
Step 1: Create the Hello Jigx solution project
Start by creating the Hello Jigx project in VS Code
Build time: 2 min
Link: https://docs.jigx.com/create-the-hello-jigx-solution-project

Step 2: Create the Map
Build a map jig that displays a specific location on a map, with an icon for the jig.
Build time: 10 min
Link: https://docs.jigx.com/create-the-map

Step 3: Create the Calendar
Next, add a calendar jig that displays a week with the events, meetings, and relevant details.
Build time: 10 mins
Link: https://docs.jigx.com/create-the-calendar

Step 4: Create Data - forms & lists
Build a jig to add a new customer by capturing the customer's details using a form. Then add a jig to list all the customers created using the form. Add the ability to view, and edit these customer records.
Build time: 20 mins
Link: https://docs.jigx.com/create-data-form-and-list

Step 5: Combine the solution's elements
Now you have built a solution that shows a location on a map, a calendar with detailed entries, and a new customer form and list in a single solution. Let us expand the solution further by joining the new customer form and list into one jig, then add a jig header to the new customer jig.
Build time: 15 mins
Link: https://docs.jigx.com/combine-the-solutions-elements

Step 6: Customize the Hello-Jigx solution
Extend your solution with styling changes and additional functionality. Replace the map icon with a location widget in the map.jigx file, and replace the people icon with the image widget in the composite.jigx file. Change the calendar icon and add a badge to display the number of events for the week.
Build time: 10 mins
Link: https://docs.jigx.com/customize-the-hello-jigx-solution
```

--------------------------------

### Phone Number Validation (Regex)

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/Logic/Validation.md

Validates phone numbers, allowing for international formats starting with '+'. Example: +271234556789.

```regex
^\+?[1-9]\d{1,14}$
```

--------------------------------

### Jigx Mobile App Usage Guide

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Getting started/Create an app from scratch/Create Data - Form _ List/Run the updated solution.md

This documentation outlines the steps to use the Hello-Jigx solution within the Jigx mobile application. It covers the process from launching the app and signing in to interacting with customer forms and lists, including adding, viewing, and editing customer data.

```APIDOC
Project: /jigx-com/jigx-docs

Page Title: Run the updated solution
Page Description: Learn how to use the powerful Hello-Jigx solution in the Jigx mobile app with this comprehensive guide. Discover the step-by-step instructions for signing in, accessing the Hello Jigx solution, and making the most of the customer forms and list.

Steps to Use Hello-Jigx Solution:
1. Launch the Jigx mobile app.
2. Sign in using Jigx account details.
3. Navigate to the Home Hub screen.
4. Interact with widgets: Map, Calendar, Customer, Customer List.

Customer Form and List Operations:
- Add New Customer: Tap the 'Customer' icon, fill the form, and submit.
- View Customer Details: Tap the customer's name in the 'Customer List' widget.
- Edit Customer: Tap 'Edit Customer' button on the customer details view, modify information (e.g., email, name), and save.

Visuals:
- Form & list widgets: Displays the main interface with form and list widgets.
- New customer form: Shows the interface for adding a new customer.
- View customer: Illustrates the screen for viewing a customer's details.
- Edit customer: Demonstrates the interface for editing customer information.
```

--------------------------------

### Filter Salesforce Account Data by Name

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/Data/Data Providers/Salesforce/Using the Salesforce provider.md

This example shows how to filter the Salesforce Account object to retrieve only accounts whose names start with the letter 'A'. It utilizes a SQLite query to select specific columns (`id`, `Name`, `BillingCountry`) from the Account entity.

```yaml
title: Accounts starting with A
type: jig.list
icon: contact

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1577974291737-faf660945d53?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2674&q=80

onFocus:
  type: action.action-list
  options:
    actions:
      - type: action.sync-entities
        options:
          provider: DATA_PROVIDER_SALESFORCE
          entities:
            - Account

datasources:
  filter-account:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL

      entities:
        - entity: Account
      # filter the account object to return specific columns and a select number of rows
      query: SELECT id, '$.Name', '$.BillingCountry' FROM [Account] WHERE '$.Name' LIKE 'a%'

data: =@ctx.datasources.filter-account
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.Name
    subtitle: =@ctx.current.item.BillingCountry
```

--------------------------------

### Jigx Project Structure and Steps

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Getting started/Create an app from scratch/Create the Map.md

This section outlines the steps to create a Jigx project, add a map jig, and publish the solution. It references other documentation pages for detailed instructions on project creation, adding the jig, and publishing.

```jigx
1. [Create the Hello Jigx project](<./Create the Hello Jigx solution project.md>)
2. [Add the jig.default](<./Create the Map/Adding the Map Jig.md>) with an icon, and static data source.
3. [Publish the project](<./Create the Map/Publish the project.md>).
4. [Open the Jigx mobile app](<./Create the Map/Run the solution in the app.md>), click on the location jig, and view the map.
```

--------------------------------

### Calendar Data Source Example

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Getting started/Create an app from scratch/Create the Calendar/Add the calendar jig and datasource.md

This YAML code defines a static datasource for calendar events. It includes fields for event start and end times, location, attendees, tags, and the event title. This data can be used by a calendar jig.

```yaml
type: datasource.static
options:
  data:
    - id: 1
      eventEnd: 2 
      eventStart: 1 
      location: Redmond, WA 
      people:
        - avatarUrl: https://randomuser.me/api/portraits/men/1.jpg   
          fullName: Tim Cook 
      tags:
        - color: color2 
          title: Negotiation 
      title: Negotiation with Company A
    - id: 2
      eventEnd: 4
      eventStart: 2  
      location: Palo Alto, CA
      people:
        - avatarUrl: https://randomuser.me/api/portraits/men/49.jpg
          fullName: Michael Tate
      tags:
        - color: color5
          title: Qualification
      title: Demo for Company B
    - id: 3
      eventEnd: 25
      eventStart: 24
      location: Menlo Park, CA
      people:
        - avatarUrl: https://randomuser.me/api/portraits/men/90.jpg
          fullName: Michael Tong
      tags:
        - color: color6
          title: Verbal
      title: Sign contract  
```

--------------------------------

### Publish Jigx Solution using JigxBuilder

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Getting started/Create an app from scratch/Combine the solution_s elements/Publish the Hello Jigx solution.md

This snippet outlines the steps to publish a Jigx solution using the JigxBuilder extension in VS Code. It details how to initiate the publishing process by clicking the JigxBuilder icon and the subsequent confirmation and progress monitoring.

```VSCode
1. In VS Code click on the **Jigx Builder** icon in the left navigation bar.
2. In the Jigx Explorer hover over the Hello-Jigx node till you see the **publishicon (rocket)**. Click on the icon to start the publishing process.
3. Click **Publish** on the confirmation message screen.
4. The publishing process starts and the progress shows in the bottom right corner of the VS Code editor. A message displays when the solution is successfully published.
```

--------------------------------

### Jigx App Onboarding and Verification

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Getting started/Creating an account.md

This section details the user onboarding process for the Jigx application. It includes steps for initial setup, email verification via OTP, and password creation. The process involves downloading the app, entering an email address, receiving and entering a 6-digit OTP, and setting a new password.

```APIDOC
JigxAppOnboarding:
  - Download and open the Jigx app.
  - Tap 'Get Started' and enter your email address.
  - Upon tapping 'Continue', a 6-digit OTP is sent to your email.
  - Enter the OTP in the 2-Step verification screen.
  - Create a new password following the displayed requirements.
```

--------------------------------

### Jigx Solution Details Configuration

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/UI/Home Hub/Index settings.md

Demonstrates the configuration of core solution details in `index.jigx`, including name, title, and category.

```yaml
name: global-solutions
title: global solutions
category: consulting
```

--------------------------------

### Jigx Builder Publishing Process

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Getting started/Use pre-built solutions.md

This snippet outlines the steps to publish changes made to a Jigx solution using Jigx Builder. It details how to initiate the publishing process, authenticate with Jigx, and monitor the upload progress.

```markdown
1. In the Jigx Explorer hover over the **solution name** till you see the **publish** **icon (rocket)**. Click on the icon to start the publishing process.
2. Enter your Jigx username and press **Enter**.
3. Enter your Jigx password and press **Enter**. The publishing process starts, and the progress shows in the bottom right corner of the VS Code editor. A message displays when the solution is successfully published. The changes are immediately visible in the Jigx App.
```

--------------------------------

### List Jig Example

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/UI/Jigs _screens_.md

Provides an example of the List Jig for creating and styling lists of data, including interactive elements like checkboxes and swipeable items.

```javascript
import { jig } from '@jigx/core';

// Example usage of jig.list
jig.list({
  // configuration options for list display and interaction
});
```

--------------------------------

### JSON Example Data Structure

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/Data/Datasources.md

This snippet shows an example of the JSON data structure for customer records, including nested objects for addresses and phones.

```json
"customers": [
        {
            "custId": 1,
            "firstName": "Merilyn",
            "lastName": "Bayless",
            "companyName": "20 20 Printing Inc",
            "addresses": [
                {
                    "address": "195 13n N",
                    "city": "Santa Clara",
                    "county": null,
                    "state": "CA",
                    "zip": "95054"
                }
            ],
            "phones": [
                {
                    "mobile": "408-758-5015",
                    "office": "408-758-5015"
                }
            ],
            "email": "merilyn_bayless@cox.net",
            "web": "http://www.printinginc.com",
            "region": "US West",
            "customerType": "Silver",
            "jobTitle": "Project Manager",
            "logo": null
        },

```

--------------------------------

### Jigx Solution Publishing Shortcuts

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Getting started/Create an app from scratch/Combine the solution_s elements/Publish the Hello Jigx solution.md

Provides keyboard shortcuts for publishing Jigx solutions within VS Code. These shortcuts allow for quick publishing of either the entire solution or individual files.

```VSCode
- Publish all files in Jigx solution on Mac is `⌘R⌘R`, and on Windows is `Alt+R Alt+R`
- Publishing an individual file on Mac is `⌘R⌘F`, and on Windows is `Alt+R Alt+F`
```

--------------------------------

### Microsoft Graph API Examples

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/Data/Data Providers/REST/Microsoft Graph OAuth.md

This section provides links to various examples demonstrating how to interact with the Microsoft Graph API using Jigx. These examples cover common use cases such as retrieving user profiles, managing calendars, accessing emails, handling tasks, and obtaining user insights.

```APIDOC
Graph User Profile:
  - Fetches user profile information from Microsoft Graph.
  - Includes a sample for updating a user's profile picture.

Graph Calendar:
  - Retrieves a list of user calendars.
  - Renders a calendar view on a Jigx jig.
  - Demonstrates adding calendar entries to a Microsoft 365 calendar.

Graph Mail:
  - Fetches a list of user emails.
  - Displays emails in a Jigx list jig.
  - Allows viewing email content.

Graph Tasks:
  - Retrieves a list of user To-do tasks.
  - Displays tasks in a Jigx list jig.

Graph Insights:
  - Fetches trending documents related to the user.
  - Displays the list in a Jigx list jig.
```

--------------------------------

### JigX Best Practices

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/UI/Home Hub/Creating a Home Hub.md

Provides guidance on best practices for developing with JigX, including recommendations for handling videos, optimizing performance, and choosing the right Jig types.

```javascript
## Best practice

- Adding videos directly to the Home Hub should be avoided if possible, instead add a gallery of images that when tapped open a jig with the video, use [grid-item](https://docs.jigx.com/examples/grid-item) to create the gallery.
- Consider what you add to the Home Hub as it could impact the app's performance, for example, long lists with data.
- The `onload` event must be configured on the index.jigx file for syncing data to the device.
- When deciding on the type of jig to use as the Home Hub it is recommended to use the [jig.default](https://docs.jigx.com/examples/jigdefault) or [jig.grid](https://docs.jigx.com/examples/jiggrid) as they provide the broadest scope of components, actions, and widgets.
```

--------------------------------

### Jigx Expression Examples Overview

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/Logic/Expressions.md

This section outlines various categories of expression examples available for Jigx Apps, showcasing how JSONata and JavaScript can be used for data manipulation and logic.

```APIDOC
Jigx Expression Examples:

- Arrays: Create filtered lists from arrays and handling arrays with SQL and Dynamic Data.
- Aggregation: Return minimum, maximum, or an average value in an array.
- Boolean: Evaluate data to find a true or false result.
- Comparison Operators: Compare values in data and use the value in a conditional logical expression.
- Date & Time: Return a date and time in various formats, e.g., ISO 8601.
- Path Operators: Navigate and access specific elements or properties within a data set.
- Functional Programming: Compare values or display data based on certain conditions and using logical statements.
- Jigx Variables: Manipulate data specific to a Jigx App, e.g., determining the logged-in user.
- Predicate Queries: Used for query refinement.
- String: Concatenate strings, write numbers as strings, or select characters from a string.
- Advanced expressions: Filter an array of records and perform expression transformations.
- Regex + JSONata: Create validation for text fields by combining JSONata and Regex expressions.
- JavaScript expressions: Write modular and reusable code by encapsulating functionality within JavaScript functions.
```

--------------------------------

### Example REST Function Error Configuration

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/Data/Data Providers/REST/REST error handling.md

An example of how to configure an error section within a function file for a REST endpoint in Jigx.

```yaml
# Configure an error section in each function file for REST endpoint,

```

--------------------------------

### Jigx Solution Publishing Shortcuts

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Getting started/Create an app from scratch/Create the Calendar/Publish your project.md

Keyboard shortcuts for publishing Jigx solutions. These shortcuts allow for quick publishing of either the entire solution or individual files directly from the editor.

```markdown
- Publish all files in Jigx solution on Mac is `⌘R⌘R`, and on Windows is `Alt+R Alt+R`
- Publishing an individual file on Mac is `⌘R⌘F`, and on Windows is `Alt+R Alt+F`
```

--------------------------------

### Generate Unique GUID (Jigx System Expression)

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/Logic/Expressions/Expressions - cheatsheet.md

This Jigx system expression utilizes the built-in `$uuid()` function to generate a universally unique identifier (GUID).

```yaml
=$uuid()
```

--------------------------------

### Single Jig Home Hub Configuration

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/UI/Home Hub/Creating a Home Hub.md

This snippet demonstrates how to configure a simple Home Hub using a single jig. It includes setting up data loading and defining the tab structure to reference the main hub jig.

```yaml
name: Expo 
title: Expo
category: business

# Data is synced in the index.jigx file.
onLoad: 
  type: action.sync-entities
  options:
    provider: DATA_PROVIDER_DYNAMIC
    entities:
      - default/events

# Use the tabs property to reference the jig you want as the home screen.
# Select an icon for the jig in the bottom navigation bar.
tabs:
  - jigId: yoga-wellness
    icon: home-apps-logo
```

--------------------------------

### Jigx index.jigx Migration Example

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/Best practice/Migration plan.md

Example of an old index.jigx file structure before the migration to bottom tab navigation. This snippet illustrates the properties that are being deprecated or changed.

```yaml
name: student-app
title: Student-app
category: analytics

```

--------------------------------

### Publish Jigx Project Shortcuts

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Getting started/Create an app from scratch/Create Data - Form _ List/Publish your project.md

Provides keyboard shortcuts for publishing Jigx projects within VS Code. These shortcuts allow for quick publishing of either the entire solution or individual files.

```VSCode Shortcuts
Publish all files in Jigx solution:
  Mac: ⌘R⌘R
  Windows: Alt+R Alt+R

Publishing an individual file:
  Mac: ⌘R⌘F
  Windows: Alt+R Alt+F
```

--------------------------------

### Inserting a Jig Template

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/UI/Jigs _screens_/Jig Templates.md

This snippet demonstrates the process of inserting a Jigx template. It involves right-clicking in the Explorer, creating a new jig file, using Jigx IntelliSense to select 'Use template', browsing the template gallery, and clicking the 'Insert' button. It also highlights the need to check YAML comments for manual steps and add the jigId to the index file.

```jigx
1. In Explorer in the **jigs** folder, right-click and create a new jig file with the .jigx extension.
2. Use **ctrl+space **to open the jig IntelliSense popup and select **Use template**.
3. Browse the template gallery and click the blue **Insert** button.
4. Check the YAML code for comments specifying additional steps (e.g., '#Create new table invoices in databases/default.jigx').
5. Add your jigId to the `index.jigx` file.
6. Publish your project and view the jig.
```

--------------------------------

### Jigx Input Controls Examples

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/UI/Components _controls_.md

Provides examples for various input control components in Jigx, such as text fields, dropdowns, checkboxes, and date pickers. These components are essential for user interaction and data input.

```html
<a href="https://docs.jigx.com/examples/chat">chat</a>
<a href="https://docs.jigx.com/examples/choice-field">choice-field</a>
<a href="https://docs.jigx.com/examples/duration-picker">duration-picker</a> 
<a href="https://docs.jigx.com/examples/form">form</a> 
<a href="https://docs.jigx.com/examples/media-field">media-field</a> 
<a href="https://docs.jigx.com/examples/text-field">text-field</a> 
<a href="https://docs.jigx.com/examples/email-field">email-field</a> 
<a href="https://docs.jigx.com/examples/number-field">number-field</a> 
<a href="https://docs.jigx.com/examples/dropdown">dropdown</a> 
<a href="https://docs.jigx.com/examples/checkbox">checkbox</a> 
<a href="https://docs.jigx.com/examples/date-picker">date-picker</a> 
<a href="https://docs.jigx.com/examples/signature-field">signature-field</a>
```

--------------------------------

### Jigx Solution Naming Restrictions

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Getting started/Create an app from scratch/Create the Hello Jigx solution project.md

Defines the naming conventions for Jigx solutions, including restrictions on starting characters, spaces, and case sensitivity. Hyphens are used to replace spaces.

```jigx
1. Cannot start with a number.
2. No spaces are allowed. Hyphens replace spaces.
3. Must be in lowercase.
```

--------------------------------

### SendGrid API JSON Request Body Example

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/Data/Data Providers/REST.md

This is an example of the JSON request body structure required by the SendGrid API's '/v3/mail/send' endpoint. It outlines the fields for recipients, sender, subject, and content.

```json
{
  "personalizations": [
    {
      "to": [
        {
          "email": "anemail@com"
        }
      ]
    }
  ],
  "from": {
    "email": "youremail.com"
  },
  "subject": "Sending with SendGrid is Fun",
  "content": [
    {
      "type": "text/plain",
      "value": "and easy to do anywhere, even with cURL"
    }
  ]
}
```

--------------------------------

### Handling Spaces in Translation Variables

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/Additional functionality/Localization.md

Provides examples of how to manage spaces in translation variable names. It shows a working example using underscores and an alternative approach where a `translation_string` is added to the datasource to remove spaces before translation.

```yaml
# Working, notice there no spaces in the variable name
genus: '{title, select, hornet {Hornet (Vespa crabo)} house_wasp {House wasp} leafcutter_bee {Leafcutter bee}}'

# Not working due to spaces in the variable
genus: '{title, select, hornet {Hornet (Vespa crabo)} House wasp {House wasp} Leafcutter Bee {Leafcutter bee}}'

```

```json
[
  {
    "rid": "4a181550-2166-42d3-9194-a0dc8b432073",
    "content": {
      "name": "Resettlement",
      "color": "color2",
      "translation_string": "resettlement"
    }
  },
  {
    "rid": "901e337e-a190-437c-b611-4d1382f40c5c",
    "content": {
      "name": "Exceptional destruction",
      "color": "color4",
      "translation_string": "exceptional_destruction"
    }
  },
  {
    "rid": "c20a31f7-5be1-4cbb-9b4b-7b70382c9929",
    "content": {
      "name": "Consultation",
      "color": "color9",
      "translation_string": "consultation"
    }
  },
  {
    "rid": "cfacbb0d-3982-4884-8d6c-f7cddbe7e17f",
    "content": {
      "name": "Local change",
      "color": "color3",
      "translation_string": "local_change"
    }
  }
]

```

```yaml
value:
  id: services_dropdown
  values:
    translation_string: =@ctx.inputs.inspection.translation_string

```

```yaml
services_dropdown: "{translation_string, select, resettlement {Resettlement} exceptional_destruction {Exceptional destruction} consultation {Consultation} local_change {Local change} other {Unknown}}"

```

--------------------------------

### Jigx Builder YAML Code Completion

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Getting started/Install the Jigx Builder.md

Demonstrates how to activate code completion in the Jigx Builder's YAML editor within VS Code. Pressing Ctrl+Space displays valid options based on the current cursor context.

```VSCode Extension
To activate code completion in the Jigx Builder YAML editor, press **Ctrl+Space** simultaneously. This will display valid options relevant to the current cursor position.
```

--------------------------------

### Jigx REST Service Configuration Example

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/Data/Data Providers/REST.md

An example of a Jigx function definition for a REST service, demonstrating the configuration of the data provider, HTTP method, URL, input transformation, and parameters including headers and body content.

```yaml
provider: DATA_PROVIDER_REST
method: POST
url: "https://api.sendgrid.com/v3/mail/send"
inputTransform: >-
  $.{"personalizations": [{ "to": [ { "email": emailto, "name": name }]}],"from": {"email": emailfrom, "name": name }, "reply to": {"email": emailfrom, "name": name },"subject": subject, "content": [{ "type": "text/html", "value": content}]}
parameters:
  Authorization:
    location: header
    type: string
    value: Bearer XXXXXX
    required: true
  emailfrom:
    location: body
    type: string
    required: true
  emailto:
    location: body
    type: string
    required: true
  name:
    location: body
    type: string
    required: true
  subject:
    location: body
    type: string
    required: true
  content:
    location: body
    type: string
    required: true
```

--------------------------------

### JSONata Output Transform Example

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Building Apps with Jigx/Data/Data Providers/REST/REST Overview.md

Demonstrates transforming a REST API response into an array of JSON objects suitable for insertion into SQLite tables using JSONata. The example shows an input JSON structure and the resulting transformed array.

```JSONata
$.orders.
```

--------------------------------

### User Provisioning and Authentication Flow

Source: https://github.com/jigx-com/jigx-docs/blob/main/docs/Understanding the basics/Authentication.md

Explains the user provisioning process, including auto-provisioning and manual approval, and how Jigx handles authentication with external IDPs.

```APIDOC
User Provisioning and Authentication:
  - Auto-provisioning: If enabled, Jigx automatically creates a user if validated by AAD/Okta and not already in the organization. Jigx token creation and assignment are handled.
  - Manual Approval: If auto-provisioning is disabled, users can request access, requiring administrator approval before provisioning.
  - Authentication: Upon successful authentication with AAD/Okta, existing Jigx Cloud users are assigned a Jigx token for subsequent calls.
  - Configuration Storage: AAD/Okta configuration is stored in AWS-secured storage in Jigx Cloud.
```