What is Platform?

The Joyfill Platform path is the recommended approach if you're looking for a native and fully self-controlled implementation of the various Joyfill solutions such as our PDF Exports & Downloads, UI Components, and our API.

By going the Platform route usually, teams want to host their own form data or existing form data and enhance it by utilizing our UI Components, API, and PDf Exports & Downloads solutions. This requires usually a developer or team of developers to implement but provides the most native integration of Joyfills solutions into your own product experience.

Overview

📘

You can mix and match our Embedded path with the Platform path when going with the Platform implementation

We recommend checking out our JS/React docs for more code examples.

Getting started with the Joyfill Platform is simple. First, you will want to sign up for an account on the Joyfill Manager. Then in 4 key steps, you can see Joyfill running in your app!

1. Create Account: To begin working with Joyfill, go to Joyfill's Developer Platform and create an account. By creating an account you will add yourself as the first user to your newly created Joyfill Organization and be placed inside the Joyfill Manager.
2. Retrieve API Key: Head over to Settings & Users -> API Keys and click + Add Key (ensure you save your public/secret key combination as you cannot view them after creation)
3. Create your first template (form/pdf): In Template Library click + Add Template Creating your first library template allows you to start building out your Document Templates library. Document Templates are your saved forms and pdfs structures that you or your customers will use to populate with data, export to PDF, etc. Make sure to drag some fields over to your template for this example.
4. Add to your application: Follow the Implementation below. While adding Joyfill to your application through our Platform path you can start with just our UI components to get a feel of how Joyfill will fit into your product flow.

Key Features

We provide a host of solutions for adding powerful forms solution to your own product.

Implementation

You can embed a Flatfile data exchange experience inside your own product with a Portal. For more detailed code guides please refer to the JS/React.

Think of integrating using the Platform path in five parts

1. Include @joyfill/components & have a userAccessToken ready
2. Export out JoyDoc React component or create a new JS instance of it for plain JS
3. Transpile your data to fit the JoyDoc Spec (optional, only needed if you are hosting your current existing data and do not plan to leverage the Joyfill Storage service)
4. Hook up listeners to events such as on-field changes and on file upload from the JoyDoc in order to either store the JoyDoc JSON data while your users fill out the form or trigger other events in your product based on certain field changes
5. Respond to the events of on save by generating a downloadable PDF link for your users to download their saved form

Specific implementation syntax will vary depending on your programming language. And your implementation does not have to follow the five parts above.

Install the dependency

npm install @joyfill/components

Implement your code

import React, { useState, useEffect } from 'react';

// 1. import the JoyDoc
import { JoyDoc } from '@joyfill/components';
import { joyfillSave, joyfillGenerate } from './helper.js';

// 2. setup the form component or page
const FormComponent = () => {

  const [ doc, setDoc ] = useState({});
  const [ pdfLink, setPdfLink ] = useState(null);

  // 3. retrieve the doc being edited/filled/viewed initially
  useEffect(async() => {
    const response = Joyfill.retrieveDocument(<REPLACE_USER_TOKEN>, <REPLACE_DOCUMENT_ID>);
    setDoc(response);
  });
  
  // 4. save the live modified doc & generate a downloadable pdf link
  const saveForm = async (doc) => {
    // here is a good place to save data to your own DB if you are self hosting
    await joyfillSave();
    const downloadableLink = joyfillGenerate(doc.identifier);
    setPDFLink(downloadableLink);
  }

  return (
    <>
    <a href={pdfLink}>Download PDF</a>
    <button onClick={() => saveForm(doc)}>
    	Save Changes
    </button>
    <JoyDoc
      mode="edit"
      doc={data}
      onChange={(params, changes, doc) => setDoc(doc)}
    />
    </>
  );

}

export default FormComponent;

// 1. with any userAccessToken and document identifiers you can
// quickly generate a downloadable PDF link of your filled out form
export const joyfillGenerate = async (identifier, userAccessToken) => {
  const response = await fetch(
    "https://api-joy.joyfill.io/v1/documents/exports/pdf", {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${userAccessToken}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ document: identifier })
  });

  const data = await response.json();
  return data.download_url;
}

// 2. (optional) save the edited or filled out document for your users
export const joyfillSave = async (doc) => {
  const response = await fetch(
    `https://api-joy.joyfill.io/v1/documents/${doc.identifier}`, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${userAccessToken}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      type: "document",
      stage: "published",
      name: "ACME_WorkOrder",
      group: "<group_id>", // optional
      files: [doc]
    })
  });

  const data = await response.json();
  return data;
}