### Setting up Your Solution

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/SUMMARY.md

Guidance on the initial setup process for a new solution within the JigX framework.

```markdown
[Setting up your solution](<docs/Overview/Setting up your solution.md>)
```

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

### Accessing Jigx Sample Project

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Jig Types/jig_calendar.md

Provides a success hint with a link to the Jigx sample solution on GitHub. It guides users to download the full project and follow setup instructions.

```html
:::hint{type="success"}
The code below is an extract from the full *jigx-samples* solution. The code snippets describe the component discussed in this section. For the solution to function in the Jigx app download the full *jigx-samples* project from :Link[GitHub]{href="https://github.com/jigx-com/jigx-samples/tree/main/quickstart/jigx-samples" newTab="true" hasDisabledNofollow="false"}, and follow the instructions in [Setting up your solution]().
:::
```

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

### JigX Address Form with Navigation Options

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Actions/go-to.md

This JigX example defines an 'Address' jig with a multi-line text field for the address. It includes two navigation actions: 'Add another guest' which navigates to 'jig-a' with 'new' behavior to start a new data stack, and 'Review details' which navigates to 'jig-a' with 'existing' behavior to cycle through previously captured data.

```yaml
title: Address
type: jig.default

inputs:
  fullName:
    type: string
    required: true

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8fDB8fHww

children:
  - type: component.form
    instanceId: form-a
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.text-field
          instanceId: address
          options:
            isMultiline: true
            label: Address

actions:
  - children:
      - type: action.go-to
        options:
          inputs:
            fullName: =@ctx.jig.inputs.fullName
          title: Add another guest
          behaviour: new
          linkTo: jig-a
      - type: action.go-to
        options:
          title: Review details
          behaviour: existing
          linkTo: jig-a
```

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

### Product List Component

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Custom components _Alpha_/Templates _Alpha_/Generic _Alpha_.md

A template for displaying a list of products. Includes links to the component definition and Jigx file for easy setup.

```jigx
component: https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/components/templates/list/product-1.jigx
jig: https://github.com/jigx-com/jigx-samples/blob/d5eb38a64423482ed10703b0b2889709beee309c/quickstart/jigx-samples/jigs/custom-components/templates/list/list-products.jigx
```

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

### Go-to Action Configuration

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Actions/go-to.md

Demonstrates the basic configuration of the 'go-to' action within an actions list. This setup typically renders a button or interactive element that, when triggered, navigates the user to a specified jig.

```yaml
actions:
  - children:
      - type: action.go-to
        options:
          title: Go to
          linkTo: default-employee-detail
```

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

### MS Graph Demonstrator Configuration

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Data Providers/REST/MS Graph/Graph tasks/Get To-do lists _ tasks.md

Configuration for the MS Graph Demonstrator solution, including onLoad and onRefresh actions, and expression definitions for date calculations.

```yaml
name: ms-graph-demonstrator
title: MS Graph Demonstrator
description: A solution using Microsoft Graph APIs .
category: business

onLoad:
  type: action.execute-action
  options:
    action: full-sync

onRefresh:
  type: action.execute-action
  options:
    action: full-sync

expressions:
  today: =$substring($now(), 0, 10)
  todayStart: =$toMillis($today)
  weekdayStr: =$floor($todayStart/86400000)
  weekdayNum: =($weekdayStr + 4) % 7
  startOfWeek: =$todayStart - ($weekdayNum * 86400000)
  thisWeek: =$startOfWeek + 604800000
  next7: =$number($todayStart) + 604800000

tabs:
  home:
    jigId: home
    icon: home
```

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

### Get Calendar Events and List

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Data Providers/REST/MS Graph/Graph Calendar/Get Event List.md

This Jigx code snippet demonstrates how to fetch calendar events for the next week and retrieve a list of calendars using the Microsoft Graph API. It utilizes REST data provider and requires an OAuth access token for authentication. The events are fetched based on a start and end datetime, and the calendar list is retrieved.

```yaml
name: ms-graph-demonstrator
title: MS Graph Demonstrator
description: A sample solution that uses the Microsoft Graph API. You can deploy and use this solution without any additional configuration.
category: business
home:
    jigId: calendar-summary
    icon: home-apps-logo
    jigId: next-meeting
    when: | 
      =@ctx.datasources.next-meeting=null? false:true
    icon: meeting-remote

onFocus:
  type: action.action-list
  options:
    isSequential: true
    actions:
      - type: action.sync-entities
        options:
          provider: DATA_PROVIDER_REST
          entities:
            - entity: next-week-calendar-events
              function: get-calendar-events-next-week
              parameters:
                accessToken: microsoft.OAuth
                startdatetime: =$fromMillis($millis())
                enddatetime: =$fromMillis($millis()+604800000)
            - entity: calendars
              function: get-calendar-list
              parameters:
                accessToken: microsoft.OAuth

```

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

### Jigx Function Example: List Customers (GET)

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Data Providers/REST/Create an app using REST APIs.md

Example of a Jigx function to list customers, likely involving a GET request to a REST API endpoint. This function would be referenced in Jigx screens to display customer data.

```javascript
function listCustomers(status) {
  // Assume 'restService' is a pre-configured Jigx service object
  return restService.get('/customers', { status: status });
}
```

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

### Publishing a Jigx Solution

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Overview/Setting up your solution.md

Instructions for publishing a Jigx solution to make it visible in Jigx Management. This process is essential before users can access or interact with the solution within the Jigx App.

```jigx
1. Open the relevant solution/starter-app folder in VS Code.
2. Publish the solution as per [publishing your solutions](https://docs.jigx.com/publishing-a-solution).
3. Navigate to the solutions in Jigx Management to view the solution.
```

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

### List Customers (REST API)

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/SUMMARY.md

Provides an example of listing customers via a REST API. This usually involves a GET request to a customer endpoint.

```APIDOC
GET /customers
  Description: Retrieves a list of customers.
  Response:
    200 OK: An array of customer objects.
```

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

### Create Customer Jig Configuration

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Data Providers/REST/Create an app using REST APIs/Create customer _POST_.md

Configures a 'New Customer' jig with a header, a reset-state action on focus, and a local SQLite datasource for state information. It also defines query parameters to filter states based on selection.

```yaml
title: New Customer
type: jig.default
icon: global-collaboration-handshake

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://www.dropbox.com/scl/fi/ha9zh6wnixblrbubrfg3e/business-5475661_640.jpg?rlkey=anemjh5c9qsspvzt5ri0i9hva&raw=1
# add the reset-state to clear the data in the form for the state dropdown.
onFocus: 
  type: action.reset-state
  options:
    state: =@ctx.jig.components.customerForm.state.data
# Define the data to use in the jig, the data has been synced by the global
# action to the local data provider from the REST Service.    
datasources:
  region:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
      entities:
        - entity: us-states
      query: |
        SELECT 
          uss.id AS id, 
          json_extract(uss.data, '$.state') AS state, 
          json_extract(uss.data, '$.abbreviation') AS abbreviation,
          json_extract(uss.data, '$.stateCapital') AS stateCapital,
          json_extract(uss.data, '$.region') AS region,
          json_extract(uss.data, '$.flag') AS flag
        FROM 
          [us-states] AS uss
        WHERE  
          json_extract(uss.data, '$.abbreviation') = @selectedState        
      queryParameters:
        selectedState: =@ctx.components.usState.state.value
```

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

### Index Jigx Configuration

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Data Providers/REST/Create an app using REST APIs/Create customer _POST_.md

The main Jigx configuration file for the 'hello-rest-example' solution. It sets up global actions for data loading on focus and load events, and defines the primary tab navigation.

```yaml
name: hello-rest-example
title: Hello REST Solution
category: sales
# onFocus is triggered whenever the jig is displayed.
# The sync-entities action in the global action calls the Jigx REST function
# and populates the local SQLite tables on the device with the data returned 
# from REST service.
onFocus: 
  type: action.execute-action
  options:
    action: load-data
# onLoad is triggered when the solution is loaded on the device. 
# The sync-entities action in the global action calls the Jigx REST function
# and populates the local SQLite tables on the device with the data returned 
# from REST service.        
onLoad: 
  type: action.execute-action
  options:
    action: load-data
    
tabs:
  home:
    jigId: list-customers
    icon: home-apps-logo
```

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

### Get Calendar List Function

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Data Providers/REST/MS Graph/Graph Calendar/Get Calendar List.md

This Jigx function retrieves a list of calendars for the authenticated user from Microsoft Graph. It uses a GET request to the '/me/calendars' endpoint and handles pagination using '@odata.nextLink'.

```APIDOC
GET https://graph.microsoft.com/v1.0/me/calendars

---

**Description:** Retrieves a list of calendars associated with the authenticated user.

**Provider:** DATA_PROVIDER_REST

**Parameters:**

*   `accessToken` (header, required, string): The OAuth access token for Microsoft Graph. Value is typically obtained via `microsoft.OAuth`.

**Output Transform:** `$`: Applies the output transform to the response.

**Records:** `=$.value`: Extracts the 'value' field from the response, which contains the list of calendars.

**Continuation:** Handles pagination for results.
    *   `when`: `$."@odata.nextLink"`: Checks if a next link exists in the response.
    *   `url`: `$=$."@odata.nextLink"`: Uses the next link URL for subsequent requests.
    *   `parameters`:
        *   `accessToken` (header, required, string): The OAuth access token for Microsoft Graph. Value is typically obtained via `microsoft.OAuth`.
```

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

### PDF Document Example (Dynamic Data)

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Jig Types/jig_document.md

This example demonstrates how to display a PDF document using JigX with dynamic data. It specifies the document type as PDF and retrieves the URL from a data source. The example also includes a placeholder for offline display and a success hint for data setup.

```yaml
type: jig.document
title: PDF Document Type (Dynamic Data)
description: Example of PDF Financial Report
icon: document
badge: 1

placeholders:
  - when: =@ctx.system.isOffline
    title: No data to display
  
source:
  documentType: PDF
  uri:  =@ctx.datasources.documents-dynamic[type='PDF'].url
```

```yaml
datasources:
  documents-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/documents
      query: |
        SELECT 
          id, 
          '$.name', 
          '$.description', 
          '$.type', 
          '$.url' 
        FROM [default/documents] 
```

```yaml
databaseId: default
tables:
  documents: null
```

```yaml
name: jig-doc-pdf
title: jig-doc-examples
category: business
tabs:
  home:
    jigId: document-pdf-dd
    icon: home-apps-logo
```

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

### Product Listing with Discounts

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Components/summary.md

Displays a list of products with their titles, images, tags, prices, and discounts. This example utilizes a static data source to populate the product information.

```yaml
datasources:
  products:
    type: datasource.static
    options:
      data:
        - title: Headphones WH-1000XM4
          uri: https://images.unsplash.com/photo-1618366712010-f4ae9c647dcb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=776&q=80
          tag: free transport 
          price: 211.96
          discount: 0.10
        - title: Bluetooth speaker Charge 5
          uri: https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2062&q=80
          tag: in stock
          price: 191.6
          discount: 0.15
        - title: M1 Bluetooth Wireless Mouse
          uri: https://images.unsplash.com/photo-1587749091230-fb8a034d695c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80
          tag: in stock
          price: 59.96
          discount:
        - title: Wireless headphones T3S
          uri: https://images.unsplash.com/photo-1578319439584-104c94d37305?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80
          tag: in stock
          price: 84.3
          discount: 0.10
        - title: Multifunction charging station
          uri: https://images.unsplash.com/photo-1587749091230-fb8a034d695c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80
          tag: in stock
          price: 71.08
          discount:
```

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

### Uploading Data to Dynamic Data Tables

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Overview/Setting up your solution.md

Steps for populating Dynamic Data tables with data, which is necessary for new solutions. This involves downloading CSV files and uploading them through Jigx Management.

```jigx
1. Access relevant data table extracts. For jigx-samples, download [CSV files](https://github.com/jigx-com/jigx-samples/tree/main/quickstart/csv).
2. Navigate to the Dynamic Data tables in the data section of your solution in Jigx Management.
3. Upload the extracts as detailed in the [Data](https://docs.jigx.com/S_SB-data) section.
```

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

### REST GET Request for Customers

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Data Providers/REST/Create an app using REST APIs/REST errors.md

Demonstrates how to configure a REST GET request to fetch customer data, including setting headers, parameters, and transforming the output.

```jigx
provider: DATA_PROVIDER_REST
# Returns records from the backend
method: GET
url: https://[your_rest_service]/api/customers 
forRowsWithMatchingIds: true
# Direct the function call to use local execution,
# between the mobile device and the REST service.
useLocalCall: true

parameters:
  x-functions-key:
    location: header
    required: false
    type: string
    # Use manage.jigx.com to define credentials for your solution.    
    value: XXX
  syncId:
    type: number
    location: header
    required: false
    value: =$toMillis($now()) % 86400000

outputTransform: |
    $.customers.{ 
        "id": custId,
        "firstName": firstName,
        "lastName": lastName,
        "companyName": companyName,
        "address": addresses[0].address,
        "city": addresses[0].city,
        "state": addresses[0].state,
        "zip": addresses[0].zip,
        "phone1": phones[0].mobile,
        "phone2": phones[0].office,
        "email": email,
        "web": web,
        "region": region,
        "customerType": customerType,
        "jobTitle": jobTitle,
        "logo": logo
      } 
      
conversions:
  - property: logo
    from: base64
    to: local-uri
```

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

### Index Jig Configuration

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Data Providers/REST/Create an app using REST APIs/Create customer _POST_.md

Configures the main index jig for the application, including data synchronization and focus events.

```jigx
name: hello-rest-example
title: Hello REST Solution
category: sales
# onFocus is triggered whenever the jig is displayed. 
# The sync-entities action in the global action calls the Jigx REST function
# and populates the local SQLite tables on the device with the data returned 
# from REST service.
onFocus: 
  type: action.execute-action
  options:
    action: load-data
# onLoad is triggered when the solution is loaded on the device. 

```

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

### Get To-Do Task Lists

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Data Providers/REST/MS Graph/Graph tasks/Get To-do lists _ tasks.md

This function fetches a list of To-Do task lists from Microsoft Graph. It uses a GET request to the /me/todo/lists endpoint and supports pagination with the $top parameter and continuation links. Authentication is handled via an access token.

```yaml
provider: DATA_PROVIDER_REST
method: GET
url: https://graph.microsoft.com/v1.0/me/todo/lists
outputTransform: $ 
parameters:
  accessToken:
    location: header
    required: true
    type: string
    value: microsoft.OAuth #Use manage.jigx.com to define credentials for your solution
  $top:
    type: string
    location: query
    required: false
    value: 100
records: =$.value
continuation:
  when: =$."@odata.nextLink"
  url: =$."@odata.nextLink"
  parameters:
    accessToken:
      location: header
      required: true
      type: string
      value: microsoft.OAuth
errorTransform: |
  {
    "error": "No lists"
  }
```

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

### Shadow Docs: Add Screen to Home Hub

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/SUMMARY.md

Instructions on how to add a new screen to the home hub using Shadow Docs in JigX.

```markdown
[Add a screen to the home hub](<docs/Shadow Docs/Add a screen to the home hub.md>)
```

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

### Get Calendar Events (Microsoft Graph API)

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Actions/sync-entities.md

This API retrieves events for a specific calendar from the Microsoft Graph API. It uses a GET request and supports filtering, limiting results, and pagination. Authentication is handled via an access token in the header.

```APIDOC
Get Calendar Events:
  Endpoint: https://graph.microsoft.com/v1.0/me/calendars/{calendarId}/events
  Method: GET
  Provider: DATA_PROVIDER_REST

  Parameters:
    - calendarId: (Path, Required, string) The ID of the calendar to retrieve events from.
    - $filter: (Query, Optional, string) Filter results using OData query syntax.
    - $top: (Query, Optional, string, Default: "100") The maximum number of results to return.
    - accessToken: (Header, Required, string, Value: "jigx.graph.oauth") The access token for authentication.

  Output Transform: $ (Uses the entire response)

  Continuation:
    - Parameters:
      - accessToken: (Header, Required, string, Value: "jigx.graph.oauth")
    - URL: =$."@odata.nextLink"
    - When: =$."@odata.nextLink"

  Records: =$.value

  Local Call: true

  Example Usage:
    This configuration defines a REST call to fetch events from a specific calendar. The `accessToken` is provided by a jigx.graph.oauth source. Pagination is handled by checking for `@odata.nextLink` in the response.
```

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

### Jigx Function Example: List Customers with Continuation (GET)

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Data Providers/REST/Create an app using REST APIs.md

Example of a Jigx function to retrieve customers in batches using the 'continuation' parameter, common for handling large datasets from REST APIs.

```javascript
function listCustomersPaginated(continuationToken) {
  const params = {};
  if (continuationToken) {
    params.continuation = continuationToken;
  }
  return restService.get('/customers', params);
}
```

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

### Image Widget 2x4 Example

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Widgets/image.md

This example demonstrates an image widget with a 2x4 size configuration. It features overlaying titles and subtitles at the top, along with an icon. The `isContentOverlaid` option is set to true. The code includes the widget configuration and its corresponding grid item setup.

```yaml
widgets:
  image1-2x4:
    type: widget.image
    options:
      source:
        uri: https://images.unsplash.com/photo-1433086966358-54859d0ed716?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80
      isContentOverlaid: true
      top:
        type: component.titles
        options:
          title: John Donald
          subtitle: john.donald@gmail.com
          icon: phone
          align: center
```

```yaml
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children:
        type: component.jig-widget
        options:
          jigId: image-1_2x4
          widgetId: image1-2x4
```

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

### Jigx Components Overview

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Components.md

Lists various Jigx components available for use, categorized by functionality. Includes links to detailed documentation for each component.

```markdown
|                    | [pie-chart](./Components/charts/pie-chart.md)                   | default&#xA;list                                         |
|                    | [progress-bar](./Components/progress-bar.md)         | default                                                  |
|                    | [summary](./Components/summary.md)               | default&#xA;list&#xA;document                            |
| Input controls     | [chat](./Components/chat.md) &#xA;[choice-field](./Components/form/choice-field.md) &#xA;[duration-picker](./Components/form/duration-picker.md) &#xA;[form](./Components/form.md)&#xA;[media-field](./Components/form/media-field.md) &#xA;[text-field](./Components/form/text-field.md) &#xA;[email-field](./Components/form/email-field.md) &#xA;[number-field](./Components/form/number-field.md) &#xA;[dropdown](./Components/form/dropdown.md) &#xA;[checkbox](./Components/form/checkbox.md) &#xA;[date-picker](./Components/form/date-picker.md) &#xA;[signature-field](./Components/form/signature-field.md) | default                                                  |
| Interactive        | [interactive-image](./Components/interactive-image.md)&#xA;[interactive-image-item](./Components/interactive-image/interactive-image-item.md)                           | default                                                  |
```

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

### Jigx Preview Usage and Limitations

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Preview.md

Explains how the Jigx preview is triggered and lists components that support it. It also highlights current known issues and limitations, such as problems with header display and the behavior of 'action.go-to' within action lists.

```markdown
The preview is triggered by *long-pressing* the widget or item. The *long-press* action can be used on:

1. Widgets
2. List-items on widget
3. onPress action on list-item or event.

:::hint{type="warning"}
1. Currently issues could be experienced when displaying the header's `title` and `subtitle` in the preview.
2. Using the `action.go-to` within an action [action-list](./Actions/action-list.md) does not trigger the preview popup.
:::
```

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

### Image Widget 2x2 Example

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Widgets/image.md

This example shows an image widget configured with a 2x2 size. It includes overlaying titles and subtitles at the bottom, along with an icon. The `isContentOverlaid` option is set to false. The provided code includes the widget configuration and its grid item setup.

```yaml
widgets:
  image2-2x2:
    type: widget.image
    options:
      source:
        uri: https://images.unsplash.com/photo-1476610182048-b716b8518aae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2159&q=80
      isContentOverlaid: false
      bottom:
        type: component.titles
        options:
          title: Seljalandsfoss
          subtitle: Iceland
          icon: pin
```

```yaml
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children:
        type: component.jig-widget
        options:
          jigId: image-2_2x2
          widgetId: image2-2x2
```

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

### MS Graph API - Get Trending Items

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Data Providers/REST/MS Graph/Graph Insights/Get item trending.md

This APIDOC entry describes the REST GET request to fetch trending items from the Microsoft Graph API. It specifies the URL, output transformation, required access token, optional top parameter for limiting results, and how to handle pagination using continuation links.

```APIDOC
MS Graph API - Get Trending Items:
  Method: GET
  URL: https://graph.microsoft.com/v1.0/me/insights/trending
  Description: Retrieves a list of trending documents around the user.
  Parameters:
    accessToken:
      location: header
      required: true
      type: string
      description: The OAuth access token for authentication.
      value: microsoft.OAuth
    $top:
      location: query
      required: false
      type: string
      description: The maximum number of results to return.
      value: "100"
  Output Transform: $.value
  Continuation:
    when: =$.nextLink
    url: =$.nextLink
    parameters:
      accessToken:
        location: header
        required: true
        type: string
        value: microsoft.OAuth
  Related: [MS Graph API - Get Calendar List](https://learn.microsoft.com/en-us/graph/api/calendar-list-list?view=graph-rest-1.0&tabs=http)
```

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

### Jigx Tab Configuration

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Data Providers/REST/Create an app using REST APIs/Create customer _POST_.md

Shows a basic configuration for a tab in Jigx, specifying the 'jigId' for the customer list and an icon.

```yaml
tabs:
  home:
    jigId: list-customers
    icon: home-apps-logo
```

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

### REST Operators

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Data Providers/REST.md

Demonstrates the basic REST operators available for interacting with APIs: GET, POST, PUT, and DELETE.

```APIDOC
REST Operators:

GET: Retrieves data from a specified resource.
POST: Submits data to be processed to a specified resource.
PUT: Updates a specified resource with new data.
DELETE: Deletes a specified resource.
```

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

### Jigx Components Overview

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/SUMMARY.md

Details common component properties and specific component implementations in Jigx.

```markdown
# Common component properties

This document outlines the common properties shared across various Jigx components, such as `id`, `label`, `visible`, and `style`.
```

```markdown
# Jigx Components

This section details various components available in Jigx, including:
- `avatar`: Displays user avatars.
- `card`: A container for content with a card-like appearance.
- `carousel`: Displays a series of items in a rotating carousel.
- `charts`: Provides various chart types (bar, line, pie).
- `chat`: Implements a chat interface.
- `component actions`: Defines actions that can be performed on components.
- `count-up`: Animates a number counting up.
- `countdown`: Displays a countdown timer.
- `divider`: A visual separator.
- `entity`: Displays entity data.
- `event`: Handles component events.
- `expander`: Allows content to be expanded or collapsed.
- `form`: A container for form elements.
- `grid`: Displays items in a grid layout.
- `image`: Displays images.
- `interactive-image`: An image that can be interacted with.
- `jig-header`: A header component for Jigs.
- `list`: Displays items in a list format.
- `location`: Displays location information.
- `progress-bar`: Shows a progress bar.
- `segmented-control`: A control with segmented options.
- `stepper`: A component for guided multi-step processes.
- `summary`: Displays a summary of information.
- `video-player`: Plays video content.
- `web-view`: Embeds web content.
```

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

### Salesforce - List Records

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/SUMMARY.md

Instructions for retrieving records from Salesforce objects using the API. This typically involves a GET request with SOQL queries.

```APIDOC
List Records in Objects:
  Method: GET
  Endpoint: /services/data/vXX.X/query/
  Description: Retrieves records from a Salesforce object using SOQL.
  Query Parameters:
    - q: The SOQL query string.
  Example:
    GET /services/data/v58.0/query/?q=SELECT+Id,Name,Industry+FROM+Account+WHERE+Industry='Technology'
  Response:
    200 OK: A JSON array containing the queried records.
```

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

### Preview Web-view

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/SUMMARY.md

Documentation for previewing web content or web views within JigX.

```markdown
[Web-view](docs/Preview/Web-view.md)
```

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

### Image Widget 4x2 Example

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Widgets/image.md

This example showcases an image widget configured with a 4x2 size. It utilizes `component.titles` at the bottom for displaying a location title and subtitle, along with an icon aligned to the right. The `isContentOverlaid` option is set to false. The code provides the widget configuration and its grid item setup.

```yaml
widgets:
  image2-4x2:
    type: widget.image
    options:
      source:
        uri: https://images.unsplash.com/photo-1585848705732-e938bf971da6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1546&q=80
      isContentOverlaid: false
      bottom:
        type: component.titles
        options:
          title: Orlicke Hory
          subtitle: Czech Republic
          icon: pin
          align: right
          iconColor: color4
```

```yaml
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children:
        type: component.jig-widget
        options:
          jigId: image-2_4x2
          widgetId: image2-4x2
```

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

### Go-to with 'new' behavior

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Actions/go-to.md

This jig demonstrates the 'go-to' action with the 'new' behavior. It saves guest data and then navigates to the next jig in the stack, pushing the current state into the app's history. This is useful for sequential data entry where each step needs to be preserved.

```yaml
title: Name
type: jig.default

onFocus:
  type: action.reset-state
  options:
    state: =@ctx.solution.state

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1521336575822-6da63fb45455?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGFkdmVudHVyZXxlbnwwfHwwfHx8MA%3D%3D

children:
  - type: component.form
    instanceId: form-a
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.text-field
          instanceId: fullName
          options:
            label: Name

actions:
  - children:
      - type: action.action-list
        options:
          title: NEXT
          isSequential: true
          actions:
            - type: action.execute-entity
              options:
                provider: DATA_PROVIDER_LOCAL
                entity: guests
                method: save
                data:
                  fullName: =@ctx.components.fullName.state.value
            # The go-to action is configured to open the next jig in the stack.
            - type: action.go-to
              options:
                # Set the parameters to use the value held in the state,
                # this will be used as an input throughout the stack.
                inputs:
                  fullName: =@ctx.components.fullName.state.value
                # Select new to push the jig into the app history,
                # this allows you to capture the next jig's data in the stack.
                behaviour: new
                # Configure which jig must open next.
                linkTo: jig-b
```

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

### Get User Profile

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Data Providers/REST/MS Graph/Graph User Profile/Get User Profile _ Photo.md

Retrieves the profile of the currently authenticated user from the Microsoft Graph API. It uses a REST data provider and requires an access token for authentication. The output is transformed to include the raw data.

```yaml
provider: DATA_PROVIDER_REST
method: GET
url: https://graph.microsoft.com/v1.0/me
useLocalCall: true
outputTransform: $
parameters:
  accessToken:
    location: header
    required: true
    type: string
    value: microsoft.OAuth #Use manage.jigx.com to define credentials for your solution
```

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

### Microsoft Graph List Messages REST Function

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Data Providers/REST/MS Graph/Graph Mail/Get list messages.md

Defines a REST GET function to fetch email messages from the Microsoft Graph API. It specifies the endpoint, authentication method, query parameters for filtering and limiting results, and how to handle paginated responses.

```APIDOC
provider: DATA_PROVIDER_REST
method: GET
url: https://graph.microsoft.com/v1.0/me/mailFolders/inbox/messages
outputTransform: $ 
useLocalCall: true
parameters:
  accessToken:
    location: header
    required: true
    type: string
    value: microsoft.OAuth #Use manage.jigx.com to define credentials for your solution
  $filter:
    type: string
    location: query
    required: false
  $top:
    type: string
    location: query
    required: false
    value: 200
records: =$.value
continuation:
  when: =$."@odata.nextLink"
  url: =$."@odata.nextLink"
  parameters:
    accessToken:
      location: header
      required: true
      type: string
      value: microsoft.OAuth
```

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

### Execute Sync Entities Action

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Data Providers/REST/Create an app using REST APIs/Create customer _POST_.md

Demonstrates how to execute the 'load-data' action, which is part of the sync-entities functionality. This action is typically used to fetch data from a REST service and populate local device storage.

```yaml
onLoad:
  type: action.execute-action
  options:
    action: load-data
```

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

### Go to onSuccess Action Configuration

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Actions/go-to.md

This YAML configuration defines a sequence of actions. It includes executing an entity (form creation with a signature) and, upon successful completion ('onSuccess'), it uses the 'go-to' action to navigate to the 'default-employee-detail' page. A 'go-back' action is also included in the sequence.

```yaml
actions:
  - children:
      - type: action.action-list
        options:
          title: Sign and go to detail
          isSequential: true
          actions:
            - type: action.execute-entity
              options:
                provider: DATA_PROVIDER_DYNAMIC
                entity: default/form
                method: create
                data:
                  signature: =@ctx.components.signature.state.value
                onSuccess:
                  title: Succesfully signed
                  actions:
                    - type: action.go-to
                      options:
                        title: Go to employee detail
                        linkTo: default-employee-detail
            - type: action.go-back
```

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

### Dynamic Data Source Configuration

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Components/form/dropdown.md

Configures a dynamic data source for a dropdown, specifying the SQLite provider and entities. This setup is for fetching data at runtime.

```yaml
title: Dropdown
type: jig.default

datasources:
  employees-dropdown:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
```

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

### List & View Customers (REST API)

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/SUMMARY.md

Demonstrates how to list and view customer data using a REST API. This typically involves making GET requests to specific endpoints.

```APIDOC
GET /customers
  Description: Retrieves a list of all customers.
  Response:
    200 OK: Array of customer objects.

GET /customers/{id}
  Description: Retrieves details for a specific customer by ID.
  Parameters:
    - id (path): The unique identifier of the customer.
  Response:
    200 OK: Customer object.
    404 Not Found: If the customer with the specified ID does not exist.
```

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

### Static Product Data Source

Source: https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Components/summary.md

Defines a static data source named 'products' containing a list of product objects. Each product includes a title, image URI, tag, price, and discount.

```yaml
datasources:
  products:
    type: datasource.static
    options:
      data:
        - title: Headphones WH-1000XM4
          uri: https://images.unsplash.com/photo-1618366712010-f4ae9c647dcb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=776&q=80
          tag: free transport 
          price: 211.96
          discount: 0.10
        - title: Bluetooth speaker Charge 5
          uri: https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2062&q=80
          tag: in stock
          price: 191.6
          discount: 0.15
        - title: M1 Bluetooth Wireless Mouse
          uri: https://images.unsplash.com/photo-1611850698562-ae3d28934080?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80
          tag: in stock
          price: 59.96
          discount:
        - title: Wireless headphones T3S
          uri: https://images.unsplash.com/photo-1578319439584-104c94d37305?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80
          tag: in stock
          price: 84.3
          discount: 0.10
        - title: Multifunction charging station
          uri: https://images.unsplash.com/photo-1587749091230-fb8a034d695c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80
          tag: in stock
          price: 71.08
          discount:
```