questionnaire-ui v1.0.7

Questionnaire-component

Description

Questionnaire-components works as a wrapper for user's own custom form components, which are utilized to create a form based on the response data of a user defined api call.

The Questionnaire requires a config-property, which is an object that needs to have the following properties itself: url and components.

The url-property requires the api-url from which the component gets the data used to create the actual questionnaire-ui. The return data from the api-call is always in the following structure:

{
    "form": {
        "name": "Stupid questionnaire",
        "code": "STUPIDQUESTIONNAIRE",
        "locale": "1350",
        "group": "Clients",
        "questions": [
            {
                "code": "GENDER",
                "type": "Select",
                "order": "1",
                "text": "What is your gender?",
                "options": [
                    {
                        "order": "1",
                        "text": "Male",
                        "value": "M"
                    },
                    {
                        "order": "2",
                        "text": "Female",
                        "value": "F"
                    }
                ]
            },
                        {
                "code": "NAME",
                "type": "Text",
                "order": "2",
                "text": "What is your name",
            },
            {
                "code": "AGE",
                "type": "Slider",
                "order": "3",
                "text": "How old are you?",
                "minValue": "0",
                "maxValue": "120",
                "step": "1"
            },
        ]
    }
}

The components-property in the config-object is an object holding the mappings connecting the user defined form-components to the Questionnare api. The Questionnaire supports the following component-mappings:

• Checkbox
• Radio
• Select
• Slider
• Text

The config-object can also have the following optional properties: skipQuestionCodes, headers. The skipQuestionCodes-property can hold an array of strings defining which specific questions the user does not want to render. The strings in the array are not case sensitive. In the case of the above Questionnaire data, one could opt out of rendering the the age-question in the following matter:

const myConfig = {
    url: 'http://www.my-questinnaire-api-url.com',
    skipQuestionCodes: ['age']
    components: {
        Text: MyTextInput,
        ...
    },
};
<Questionnnaire config={myConfigObj} >

The headers-property in the config-object is used to define what kind of HTTP-headers are send with the API-call. For example, a user can define here which languages the client is able to understand, and which locale variant is preferred:

const myConfig = {
	headers: {
		'Accept-language': 'fi-FI',
	},
};

The Questionnaire also has the following optional properties: getFormAnswerStructure, onLoadStart, onLoadEnd. The getFormAnswerStructure -property expects a function as a value. The function will be called in the componentDidMount -life cycle method of the Questionnaire. The function will be called with an object that has a specific structure. This is the structure which the questionnaire-api expects when a quesionnaire is saved with answer-data. The Questionnaire-api expects the answer-data to be in the following structure:

{
    "form": {
        "code": "STUPIDQUESTIONNAIRE",
        "locale": "1350",
        "personId": "070707-0707",
        "personName", "Duck Donald"
        "questions": [
            {
                "code": "GENDER",
                "answerValue": "M"
            },
                        {
                "code": "NAME",
                "answerValue": "Matti Meikäläinen"
            }
            {
                "code": "AGE",
                "answerValue": "25"
            },
        ]
    }
}

The onLoadStart and onLoadEnd -properties also expect functions as a value. The onLoadStart -function is called when the Questionnaire-component starts fetching data from the API, while the onLoadEnd-function is called when the component finishes fetching the data.

In addition to these Questionnnaire specific properties, a user can define any number of additional properties (such as onClick, onFocus, onInput etc.), which are automatically passed to the custom user defined components. Check the usage-section for an example.

Usage

import React from 'react';
import Questionnnaire from 'questionnaire';

const MyTextInput = ({ question, onInput }) => {
	const handleInput = (e) => {
		onInput(Object.assign({}, {question}, { answerValue: e.target.value }));
	};
	return <input placeholder={question.text} onInput={handleInput} />;
};

const myConfig = {
    url: 'http://www.my-questinnaire-api-url.com',
    skipQuestionCodes: ['gender', 'age']
    components: {
        Text: MyTextInput,
    },
    headers: {
		'Accept-language': 'fi-FI',
	},
};

export default class MyQuestionnaire extends React.Component {
    state = {
        formAnswerObj: null,
        isLoading: true
    }

    handleFormAsnwerStructure = (formAnswerObj) => {
        this.setState({
            formAnswerObj
        })
    }

    handleQuestionnaireInput = ({question, answerValue}) => {
        const {formAnswerObj} = this.state;
        const updatedAnswerArray = formAnswerObj.questions.map((q) => {
            if (q.code === question.code) {
                return {
                    answerValue,
                    code: q.code,
                }
            }
        });

        this.setState({
            formAnswerObj: Object.assign({}, formAnswerObj, {questions: updatedAnswerArray})
        });
    }
    handleOnLoadStart = () => {
        this.setState({isLoading: true})
    }

    handleOnLoadEnd = () => {
        this.setState({isLoading: false})
    }

	return (
        <React.Fragment>
            {this.state.isLoading && <p> Questionnaire is fetching data</p>}
            <form>
                <Questionnaire
                    config={myConfig}
                    getFormAnswerStructure={this.handleFormAsnwerStructure}
                    onInput={this.handleQuestionnaireInput}
                    onLoadStart: {this.handleOnLoadStart},
                    onLoadEnd: {this.handleOnLoadEnd},
                />
            </form>
        </React.Fragment>

	);
};