När en affär påbörjas så är det vanligt att en lista av frågor ställs till säljare angående affären. På samma sätt kan köpare behöva fylla i information innan ett köp går igenom, till exempel för kreditupplysning eller låneansökan.

Vitec Connect tillhandahåller JSON Schema-definitioner för säljar- och köparformulären som visas i Mina Sidor. Partner hämtar schemat, renderar ett formulär och skickar tillbaka de ifyllda svaren till Vitec Connect.

Den här guiden sammanfattar nödvändiga Connect metoder och visar exempel på bibliotek som kan rendera formulär direkt från JSON Schema.

• Registrera dig i Connect-portalen om ni inte har gjort det
• Kontakta Vitec för att få tillgång till mina sidor API:erna med de kundmiljöer som ni vill hantera
• Kortet Mina Sidor innehåller allt ni behöver för att hantera formulären.

• Ni hämtar ut frågeformulär för säljare via denna metod
• Ni hämtar ut frågeformulär för köpare via denna metod
• Ni lämnar svar via denna metod

Frågeformulär returneras som JSON Schema enligt json-schema.org.

• Spara schemats $id så att du kan identifiera formuläret när du skickar svar.
• Använd fälten title och description som rubriker och hjälptexter i ditt gränssnitt.
• Respektera required, enum, format och andra begränsningar innan du skickar data till Vitec Connect.
• Använd reglerna if / then för att visa och validera följdfrågor dynamiskt.

Dessa bibliotek kan hjälpa dig att rendera ett formulär utan att bygga alla kontroller från grunden. I varje exempel antas att schemaFromApi innehåller JSON-schemat som returnerades av Connect metoder ovan.

npm install @rjsf/core
                    

import React from "react";
import Form from "@rjsf/core";

const schema = schemaFromApi;

export function QuestionnaireForm({ onSubmit }) {
  return (
    <Form
      schema={schema}
      onSubmit={(result) => onSubmit(result.formData)}
    />
  );
}
                    

npm install @jsonforms/core @jsonforms/react @jsonforms/material-renderers
                    

import React from "react";
import { JsonForms } from "@jsonforms/react";
import { materialRenderers } from "@jsonforms/material-renderers";

const schema = schemaFromApi;
const uiSchema = {
  type: "VerticalLayout",
  elements: [
    { type: "Control", scope: "#/properties/ownsProperty" },
    { type: "Control", scope: "#/properties/hasRenovations" },
    { type: "Control", scope: "#/properties/renovationDetails" },
    { type: "Control", scope: "#/properties/desiredMoveDate" }
  ]
};

export function QuestionnaireForm({ data, onChange }) {
  return (
    <JsonForms
      schema={schema}
      uischema={uiSchema}
      data={data}
      renderers={materialRenderers}
      onChange={({ data }) => onChange(data)}
    />
  );
}
                    

<link rel="stylesheet" href="https://code.cloudcms.com/alpaca/1.5.27/bootstrap/alpaca.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.cloudcms.com/alpaca/1.5.27/bootstrap/alpaca.min.js"></script>
<div id="questionnaire"></div>
                    

const schema = schemaFromApi;
$(function () {
  $("#questionnaire").alpaca({
    schema: schema,
    options: {
      form: {
        buttons: {
          submit: {
            title: "Send answers",
            click: function() {
              const values = this.getValue();
              console.log(values);
            }
          }
        }
      }
    }
  });
});
                    

Skicka den ifyllda svaren tillbaka till Vitec Connect med hjälp av formulärets id, bostadens id och kontaktens id som du använde tidigare.

    curl -X POST "https://connect.maklare.vitec.net/Service/MyPages/M123/Estate/OBJ123_12338494833/Document/Questionnaire/QSTB98E737867C4484FB40C042C41D0CB70/Contact/ADR1093248939844/Answers/Json" \
    -H "Authorization: Basic ENCODED_USERNAME_PASSWORD" \
    -H "Content-Type: application/json" \
    -d '{
      "qq1": true,
      "qq2": "Ja",
      "qq3": "Satte in jordfelsbrytare 2021",
      "qq4": "2024-11-01",
      "qg1": {
        "qq5": true,
        "qq6": "Gjordes 2022"
      }
    }'

En lyckad inlämning returnerar HTTP 204 (No Content). Valideringsproblem ger HTTP 400 med en lista av meddelanden som du kan visa för användaren. Har ni validerat formuläret korrekt innan inlämning så bör detta inte inträffa.