Search code examples
formscanvaspowerappsconnector

Canvas PowerApp Form unable to get fields from Custom Connector returning tabular data from REST API


I created a Custom Connector our of my REST API that returns tabular data. I used it as a datasource in a canvas powerapp, which store the records from the custom connector into a collection. This collection is used as datasource by a Gallery which successfully displays the items and attributes of each item. However, when I try to create an Edit Form that uses the collection as datasource it cannot access the fields. It does not work using directly the custom connector as data source either.

In this answer from @aorphan I read that you can use custom connectors in forms as long as they return tables instead of actions. And as far as I can see, the content of the collection is tabular data: DataType is Table

Even the columns of the collection can be accessed as attributes of the item displayed by the Gallery: ThisItem fields

However, even after setting the collection as datasource of a new Edit Form, it is unable to add any fields from the datasource: Form add fields

Just in case my data needs some richer definition to be correctly interpreted by the Form, the JSON returned by my API looks like this:

    {
        "quotes": [
            {
                "quote_pk": 347,
                "shipment_name": "test add leg",
                "organization_ff_name": "LIFE",
                "quote_id": "1234",
                "effective_until": "2020-05-10",
                "eta": "2020-05-14T12:00:00Z",
                "price": 100.0,
                "quote_status": 2
            },
            {
                "quote_pk": 345,
                "shipment_name": "test modal review",
                "organization_ff_name": "LIFE",
                "quote_id": "123",
                "effective_until": "2020-05-11",
                "eta": "2020-05-22T12:00:00Z",
                "price": 1749.94,
                "quote_status": 6
            }
        ]
    }

And the definition of my Custom Connector goes like this:

swagger: '2.0'
info: {title: some title, description: some description, version: '1.0'}
host: server.domain.com
basePath: /organizations/endpoint/
schemes: [https]
consumes: []
produces: []
paths:
  /organizations/endpoint/shipment_quotes/: {}
  /shipment_quotes/:
    get:
      responses:
        '200':
          description: default
          schema:
            type: object
            properties:
              quotes:
                type: array
                items:
                  type: object
                  properties:
                    quote_pk: {type: integer, format: int32, description: quote_pk}
                    shipment_name: {type: string, description: shipment_name}
                    organization_ff_name: {type: string, description: organization_ff_name}
                    quote_id: {type: string, description: quote_id}
                    effective_until: {type: string, description: effective_until}
                    eta: {type: string, description: eta}
                    price: {type: number, format: float, description: price}
                    quote_status: {type: integer, format: int32, description: quote_status}
                description: quotes
      summary: peration summary
      description: operation description
      operationId: operationId
      parameters:
      - {name: Content-Type, in: header, required: false, type: string}
      - {name: Accept, in: header, required: false, type: string}
definitions: {}
parameters: {}
responses: {}
securityDefinitions: {}
security: []
tags: []

Please help me to get the datasource right so the form be able to add its fields, or at least let me know in case this is not possible for some reason so I can move on.


Solution

  • Formally, Collections cannot be used as a DataSource for Form controls in PowerApps. You're efforts are admirable and it looks like you've tried just about everything, so I'll pass my little secret. Its probably not officially supported so use at your own risk.

    1. Create a Collection of the response from your Custom Connector (which you've done)
    2. Add a Gallery control and set its Items property to the Collection (which you've already done)
    3. Add an Edit Form control and set its DataSource property to the Collection (which you've already done)
    4. Click the three little dots and Add Custom Card
    5. Add a TextBox control to the Custom Card.
    6. Set the TextBox Default property to gallery.Selected.X where "X" is the value you want to edit in the form.
    7. Repeat steps 4-7 for each form field you wish to capture.
    8. Create a "Submit" button in the Form which Patches/UpdateIf's the Collection then calls your POST (or PUT) method from the Custom Connector to patch the edits back to your DataSource.

      8a. I only see a GET request in your swagger file. You'll (obviously) need a POST/PUT to get the data from the Collection back up to your DataSource.

      8b. This little "wrapper" is likely what PowerApps handles for you when you use an "approved" DataSource for a Form control.

    Note: Your Form will show "No data source" in the PowerApps studio, but your user won't see it.

    Here it is in action: enter image description here

    enter image description here

    Help much?