Zoom In/Out and Expand/Collapse Survey Elements

Survey Creator allows users to create surveys and forms of any complexity and length. However, longer forms can be challenging to navigate and manage because their structure becomes harder to see. To facilitate the work with surveys, especially when rearranging its elements, survey authors can collapse and expand form elements and adjust the scale of the entire form on the design surface using a set of UI controls. These tools help achieve a more compact view to easily reposition survey elements.

With scaling, survey creators can zoom in on a specific part of a survey or zoom out to get a clear view of its structure. Users can control the zoom level using the "Zoom In," "Zoom Out," and "Zoom to 100%" buttons. To hide these buttons and disable the zoom feature, set the allowZoom property to false:

const creatorOptions = {
  // ...
  allowZoom: false
};
const creator = new SurveyCreatorModel(creatorOptions);

To make editing of survey elements easier, questions, panels, and pages on the design surface can expand or collapse. Users can control this by using individual Expand/Collapse buttons, along with the "Collapse All" and "Expand All" buttons. When collapsing or expanding all elements, users can also activate the "Lock Question State" button. This ensures that when using the "Collapse All" and "Expand All" buttons, only pages and panels are affected, while the state of the questions remains unchanged. If you wish to disable the ability to expand and collapse elements in the UI, simply set the expandCollapseButtonVisibility property to "never":

const creatorOptions = {
  // ...
  expandCollapseButtonVisibility: "never"
};
const creator = new SurveyCreatorModel(creatorOptions);

You can use the collapsePages, collapsePanels, and collapseQuestions properties to specify the initial state for pages, panels, and questions:

const creatorOptions = {
  // Collapse all survey elements at startup
  collapsePages: true,
  collapsePanels: true,
  collapseQuestions: true
};
const creator = new SurveyCreatorModel(creatorOptions);

Survey elements can be expanded and collapsed at runtime using the expandElement(el), collapseElement(el), expandAll(), and collapseAll() methods. In addition, you can handle the onElementGetExpandCollapseState event to change an element's state in response to a certain action or event, for example, when a drag and drop operation starts or users click the "Expand All" button. In this demo, the onElementGetExpandCollapseState event is used to expand and select the last page when a survey JSON schema is loaded. Refer to the Code tab for a code example.

Survey pages on the design surface can automatically collapse when users start dragging a survey element to reposition it. This feature helps rearrange surveys quickly and efficiently. By default, pages collapse only when users begin dragging a page. If you also want pages to collapse when users start dragging a question or panel, enable the collapseOnDrag property as shown below. In this case, when moving a question or panel, pages collapse to help you select a target page. As you drag an element over it, the page expands, allowing you to see its layout and choose the perfect spot for placement. In this demo, the collapseOnDrag property is disabled.

const creatorOptions = {
  // ...
  collapseOnDrag: true
};
const creator = new SurveyCreatorModel(creatorOptions);