ODK Player

A React library to render ODK forms powered by Enketo Express 🔥⚡

ODK (Open Data Kit) is a free and open-source set of tools that help organizations author, field, and manage mobile data collection solutions. Enketo Express is a form engine that enables offline-capable, web-based form filling experiences. ODK Player is a React library that seamlessly integrates Enketo Express with React applications, allowing for easy rendering of ODK forms.

This library simplifies the process of incorporating ODK forms into React projects, providing a smooth and intuitive experience for both developers and users.

Prerequisites:

Before using ODK Player, ensure the following prerequisites are met:

1. Deployed Enketo Express Instance: You need to have a deployed instance of Enketo Express where your ODK forms are hosted.
2. Deployed OpenRosa-Compliant Server: ODK forms are typically served through an OpenRosa-compliant server. Ensure that you have a server, for example, Centro, properly deployed and configured.

How to Use:

To use ODK Player in your React application, follow these steps:

/* Sample Code snippet to incorporate ODK player */
// Import ODKPlayer and initializeODKPlayer from 'odk-player'
import ODKPlayer, { initializeODKPlayer } from 'odk-player';
import { useEffect } from 'react';

function App() {

  const onChange = (data) => {
    console.log("OnChange being executed on data: ", data)
  }

  const onSubmit = (data) => {
    console.log("OnSubmit called on data: ", data);
  }

  const onFailure = (data) => {
    console.log("onFailure called on data: ", data);
  }

  // Call initializeODKPlayer in useEffect with enketo express instance url and open rosa compliant server url.
  useEffect(() => {
    initializeODKPlayer(
        "ENKETO_EXPRESS_SERVER_URI", 
        "OPEN_ROSA_SERVER_URI"
        );
  }, [])

  return (
    <div className="App">
      <header className="App-header">

        {/* Finally load the ODKPlayer component in your app providing in the required props */}
        <ODKPlayer
          formId={"Nursing Form-Medical (CRP)"}
          height='100vh'
          width='50vw'
          offline={false}
          onChange={onChange}
          onSuccess={onSubmit}
          onFailure={onFailure}
        />
      </header>
    </div>
  );
}

export default App;

Props:

| Prop | Type | Description | Default | |----------|--------|--------------------------------------------------|---------| | formId | string | The id of the form to be rendered | None | | height | string | Height of the iframe to be rendered | 100vh | | width | string | Width of the iframe to be rendered | 100vw | | offline | boolean | Boolean to decide whether form should work offline or not | false | | onChange | function | Callback function to be executed on any form change event | None | | onSuccess | function | Callback function to be executed on successful submission of form | None | | onFailure | function | Callback function to be executed on failure of form submission | None |

Ending Notes:

Thank you for choosing ODK Player! I hope this library makes integrating ODK forms into your React applications a breeze. Don't forget to star my repository if you find it useful!

🌟 Star us on GitHub: [https://github.com/Samagra-Development/odk-player]

Feel free to contribute, report issues, or suggest improvements. Happy coding! 💻✨