---
# System prepended metadata

title: Sketch of uischema

---

# Sketch of uischema

## Requirements

* Must be able to pass custom props to components through the uischema
* Must be able to pass the schema and context along to nested uses of ScrudComponent so that they may render themselves
* Must be able to specify the ordering of elements for render.

## Example

```javascript=
[
    {
        "property_name": "foo",
        "component": "TextField",
        "component_props": {
            "label": "Foo",
            "required": true
        }
    }
]
```

## Next step

* Discuss
* Specify using json-schema

# current ssr-form-gen

```javascript=
{
  "foo": { /* component settings */}
}
```

# current vue-form-json-schema
```javascript=
[
    {
        "component": "Form",
        "fieldOptions": {
            "props": {
                "context": {
                    "schema": "http://schema.org/",
                    "openteams": "http://api.openteams.com/json-ld/common/",
                    "openteams-partner": "http://api.openteams.com/json-ld/PartnerProgramApplication/",
                    "@id": "http://api.openteams.com/json-ld/PartnerProgramApplication",
                    "first_name": "schema:givenName",
                    "last_name": "schema:familyName",
                    "email": "schema:email",
                    "phone_number": "schema:telephone",
                    "country": "schema:country",
                    "company_legal_name": "schema:legalName",
                    "company_address": "schema:location",
                    "company_website": "openteams:companyWebsite",
                    "linkedin_url": "openteams:linkedinURL",
                    "github_url": "openteams:githubURL",
                    "top_skills": {
                        "@id": "schema:skills",
                        "@container": "@list",
                        "openteams:contents": {
                            "@type": "openteams:SkillEntry"
                        }
                    },
                    "services": {
                        "@id": "openteams-partner:services",
                        "@container": "@list",
                        "openteams:contents": "openteams:Service"
                    },
                    "average_hourly_rate": {
                        "@id": "schema:PriceSpecification",
                        "amount": "schema:price",
                        "currency": "schema:priceCurrency"
                    },
                    "operational_painpoints": {
                        "@id": "openteams:painPoints",
                        "@container": "@list",
                        "openteams:contents": "openteams:operational_painpoint"
                    },
                    "partnership_objectives": {
                        "@id": "openteams:partnershipObjectives",
                        "@container": "@list"
                    },
                    "found_through": {
                        "@id": "openteams:foundThrough",
                        "@container": "@list"
                    }
                },
                "url": "https://backend.staging.openteams.com/api/partner-profiles/",
                "requestType": "post"
            }
        },
        "children": [
            {
                "component": "FormFirstName",
                "fieldOptions": {
                    "props": {
                        "label": "first_name"
                    }
                },
                "children": []
            },
            {
                "component": "FormLastName",
                "fieldOptions": {
                    "props": {
                        "label": "last_name"
                    }
                },
                "children": []
            },
            {
                "component": "FormEmail",
                "fieldOptions": {
                    "props": {
                        "label": "email"
                    }
                },
                "children": []
            },
            {
                "component": "FormPhoneNumber",
                "fieldOptions": {
                    "props": {
                        "label": "phone_number"
                    }
                },
                "children": []
            },
            {
                "component": "FormCountry",
                "fieldOptions": {
                    "props": {
                        "label": "country"
                    }
                },
                "children": []
            },
            {
                "component": "FormCompanyName",
                "fieldOptions": {
                    "props": {
                        "label": "company_legal_name"
                    }
                },
                "children": []
            },
            {
                "component": "FormCompanyAddress",
                "fieldOptions": {
                    "props": {
                        "label": "company_address"
                    }
                },
                "children": []
            },
            {
                "component": "FormCompanyURL",
                "fieldOptions": {
                    "props": {
                        "label": "company_website"
                    }
                },
                "children": []
            },
            {
                "component": "FormLinkedInURL",
                "fieldOptions": {
                    "props": {
                        "label": "linkedin_url"
                    }
                },
                "children": []
            },
            {
                "component": "FormGitHubURL",
                "fieldOptions": {
                    "props": {
                        "label": "github_url"
                    }
                },
                "children": []
            },
            {
                "component": "FormCompanySkills",
                "fieldOptions": {
                    "props": {
                        "label": "top_skills"
                    }
                },
                "children": []
            },
            {
                "component": "FormServiceSelect",
                "fieldOptions": {
                    "props": {
                        "label": "services"
                    }
                },
                "children": []
            },
            {
                "component": "FormHourlyRate",
                "fieldOptions": {
                    "props": {
                        "label": "average_hourly_rate"
                    }
                },
                "children": []
            },
            {
                "component": "FormPainPoints",
                "fieldOptions": {
                    "props": {
                        "label": "operational_painpoints"
                    }
                },
                "children": []
            },
            {
                "component": "FormTextField",
                "fieldOptions": {
                    "props": {
                        "label": "partnership_objectives"
                    }
                },
                "children": []
            },
            {
                "component": "FormFeedback",
                "fieldOptions": {
                    "props": {
                        "label": "found_through"
                    }
                },
                "children": []
            }
        ]
    }
]
```