Dynamic Page Layout Generation for API Responses

maxkzn · December 1, 2023, 9:22am

HI everyone!

I have I little question and I would like to know if it’s possible!

My goal is to create a web page that automatically generates a layout based on the data returned from an API call. The key challenge here is the uncertainty in the type and order of the input data. Additionally, the API may return up to 30 different inputs, each potentially of a different type.

Here are my specific questions and requirements:

Dynamic Layout Creation: Is it possible within WeWeb to dynamically generate a page layout that adapts to the order and type of data received from an API call?
Input Type Identification: How can I efficiently identify the type of each input received from the API? I’m looking for a method to categorize and display these inputs correctly on the page.
Recommendations and Examples: If anyone has undertaken a similar project or knows of examples or resources that could guide me in the right direction, your sharing would be immensely appreciated.

Thank you in advance for your answers!

Have a nice day all

Broberto · December 1, 2023, 9:30am

It would be great if you gave a little more concrete example of the structure of the dynamic data, you definitely can do this, but the difficulty depends on how complex you go with your requirements.

For now, the easiest way, is to make this happen with bound collections (repeating items) and conditionally rendering the content.

A sample of the data in order to assess complexity would definitely help to tell you more.

maxkzn · December 1, 2023, 10:40am

Hey! thank you for your answer!

I’m trying to create an item in a webflow collection, by an API call i get the structure of the collection (order and type of fields are changing for every collection).

Can I do that with repeating items, and display the right field type?

API Call collection details

{
  "id": "#",
  "displayName": "Solutions",
  "singularName": "Solution",
  "slug": "solutions",
  "createdOn": "2023-10-17T22:49:32.287Z",
  "lastUpdated": "2023-11-14T23:22:08.062Z",
  "fields": [
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "Image",
      "slug": "image-hero",
      "displayName": "hero-image/open-graph-image",
      "helpText": null,
      "validations": null
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "hero-alt-text-image",
      "displayName": "hero-alt-text-image",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "subheading",
      "displayName": "subheading",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "01975f6eb3eb8ea4b1dc0e2a886c7b0b",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "main-heading",
      "displayName": "h1-heading",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "description",
      "displayName": "description-text",
      "helpText": null,
      "validations": {
        "singleLine": false
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "MultiReference",
      "slug": "logo-svg-code",
      "displayName": "logo-svg",
      "helpText": null,
      "validations": {
        "collectionId": "#ref"
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "1st-h2-heading",
      "displayName": "h2-heading-1",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "1st-text",
      "displayName": "text-1",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "1st-link-text",
      "displayName": "link-text-1",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "Image",
      "slug": "1st-photo",
      "displayName": "image-1",
      "helpText": null,
      "validations": null
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "alt-text-image-1",
      "displayName": "alt-text-image-1",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "2nd-h2-heading",
      "displayName": "h2-heading-2",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "2nd-text",
      "displayName": "text-2",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "2nd-link-text",
      "displayName": "link-text-2",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "Image",
      "slug": "2nd-photo",
      "displayName": "image-2",
      "helpText": null,
      "validations": null
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "alt-text-image-2",
      "displayName": "alt-text-image-2",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "3rd-h2-heading",
      "displayName": "h2-heading-3",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "3rd-text",
      "displayName": "text-3",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "3rd-link-text",
      "displayName": "link-text-3",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "Image",
      "slug": "3rd-photo",
      "displayName": "image-3",
      "helpText": null,
      "validations": null
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "alt-text-image-3",
      "displayName": "alt-text-image-3",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "h2-heading-services",
      "displayName": "h2-heading-services",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "MultiReference",
      "slug": "services",
      "displayName": "services",
      "helpText": null,
      "validations": {
        "collectionId": "#ref"
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "PlainText",
      "slug": "cta-text",
      "displayName": "cta-text",
      "helpText": null,
      "validations": {
        "singleLine": true
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": false,
      "type": "MultiReference",
      "slug": "reviews",
      "displayName": "reviews",
      "helpText": null,
      "validations": {
        "collectionId": "#ref"
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": true,
      "type": "PlainText",
      "slug": "name",
      "displayName": "name",
      "helpText": null,
      "validations": {
        "maxLength": 256
      }
    },
    {
      "id": "#",
      "isEditable": true,
      "isRequired": true,
      "type": "PlainText",
      "slug": "slug",
      "displayName": "slug",
      "helpText": null,
      "validations": {
        "maxLength": 256,
        "pattern": {},
        "messages": {
          "pattern": "Must be alphanumerical and not contain any spaces or special characters",
          "maxLength": "Must be less than 256 characters"
        }
      }
    }
  ]
}

Broberto · December 1, 2023, 11:02am

I think this is definitely doable The API Call, and also the display seems pretty on the simpler side.

Topic		Replies	Views
Seeking Assistance with Dynamic Form Creation and API Submission in WeWeb How do I?	1	280	December 3, 2023
Dynamic Children from API response How do I?	8	246	August 11, 2023
A grid with elements from a collection How do I?	1	324	October 6, 2022
A REQUEST: Making dynamic collection pages, with unique URLs! Ask us anything	9	467	May 11, 2023
Create a dynamic page in WeWeb for a single record from Airtable Ask us anything binding	6	535	August 7, 2023

Dynamic Page Layout Generation for API Responses

Related topics