Custom Question Renderer
Each SurveyJS question type comes with a predefined renderer—a component that specifies the question's markup. If you want to customize a question's appearance, you can create a custom renderer and use it instead of the predefined renderer. Follow the instructions below to implement this functionality in your survey:
Create a component that renders your custom markup.
If the component reuses a predefined renderer, its class should extend one of the predefined classes. For example, in this demo, a custom component adds an image to a predefined Radiogroup question. The component's class extends Radiogroup's class (see the
Register your component under a custom name in the component collection.
In React, register the component in
ReactElementFactoryas shown in the
In Angular, register the component in
AngularComponentFactoryas shown in the
In Knockout, use techniques native to this library: Component Registration in Knockout.
Register your component as a renderer for a selected question type.
RendererFactory.Instance.registerRenderer(questionType, renderAs, rendererName)method that accepts the following parameters:
String- A question type for which this renderer can be used.
String- A name that activates this renderer. This name should be assigned to the
renderAsproperty in JSON.
String- The custom renderer's name under which you registered it in step 2.
renderAsproperty in the survey JSON schema.
Set this property to the
renderAsname under which you register the custom renderer in step 3. Specify the
renderAsproperty only for those questions that should use the custom renderer.