@zohodesk/form-widget

Installation

npm install @zohodesk/form-widget

---

Service Sdk

FormWidgetSdk(_id)

action	params	return
getSections	-	Promise
setFormSections	data	-
insertSection	position, data	-
deleteSection	sectionId	-
updateSection	sectionId, data	-
hideSection	sectionId	-
showSection	sectionId	-

Detailed Actions

• getSections:
• setFormSections:
• insertSection:
• deleteSection:

=====================

@zohodesk/form-widget

Actions

setFormSections(data)

Set the form sections.

• data: An array of form section data.

insertSection(position, data)

Insert a form section at a specified position.

• position: The position at which to insert the section.
• data: The data of the form section to insert.

deleteSection(sectionId)

Delete a form section by its ID.

• sectionId: The ID of the form section to delete.

updateSection(sectionId, data)

Update a form section by its ID.

• sectionId: The ID of the form section to update.
• data: The updated data for the form section.

hideSection(sectionId)

Hide a form section by its ID.

• sectionId: The ID of the form section to hide.

showSection(sectionId)

Show a hidden form section by its ID.

• sectionId: The ID of the form section to show.

Reducers

The following constants are used in the reducers:

• SET_FORM_SECTIONS: Set the form sections.
• INSERT_FORM_SECTION: Insert a form section.
• DELETE_FORM_SECTION: Delete a form section.
• UPDATE_FORM_SECTION: Update a form section.
• HIDE_FORM_SECTION: Hide a form section.
• SHOW_FORM_SECTION: Show a form section.

sections(state, action)

Reducer for managing form sections.

• state: The current state of form sections.
• action: The action object with a type and data property.

Example usage:

import {
  SET_FORM_SECTIONS,
  INSERT_FORM_SECTION,
  DELETE_FORM_SECTION,
  UPDATE_FORM_SECTION,
  HIDE_FORM_SECTION,
  SHOW_FORM_SECTION
} from "../constants";

const sections = (state = initialState.sections, action) => {
  const { type, data } = action;
  switch (type) {
    case SET_FORM_SECTIONS: {
      return data;
    }
    case INSERT_FORM_SECTION: {
      const { position, data } = data;
      const newState = [...state];
      newState.splice(position, 0, data);
      return newState;
    }
    case DELETE_FORM_SECTION: {
      const { id } = data;
      return state.filter(section => section.id !== id);
    }
    case UPDATE_FORM_SECTION: {
      // Implement update logic
      return state;
    }
    case HIDE_FORM_SECTION: {
      const { id } = data;
      const index = state.findIndex(section => section.id === id);
      if (index !== -1) {
        const newState = [...state];
        newState[index] = { ...state[index], show: false };
        return newState;
      }
      return state;
    }
    case SHOW_FORM_SECTION: {
      const { id } = data;
      const index = state.findIndex(section => section.id === id);
      if (index !== -1) {
        const newState = [...state];
        newState[index] = { ...state[index], show: true };
        return newState;
      }
      return state;
    }
    default:
      return state;
  }
};

export default sections;