Built In UI Components

The Digital Feedback Mobile SDK provides a comprehensive set of pre-built native UI components for displaying surveys. These components handle survey presentation, user interaction, and data collection using native UI elements, providing a seamless experience for your users.

Component Overview

Note: Built-in UI components are not currently supported for React Native.

The SDK includes the following components:

Layout Components

• SdkDialog - A complete, pre-packaged dialog for displaying surveys with minimal setup

Question View Components

• SdkQuestionInfoView - Displays informational text to users
• SdkQuestionSingleView - Single-choice questions (radio buttons, star ratings)
• SdkQuestionMultiView - Multiple-choice questions (checkboxes)
• SdkQuestionNumericView - Numeric input questions
• SdkQuestionTextView - Open text input questions

Quick Start

Using SdkDialog

The easiest way to display surveys is using SdkDialog, which handles everything for you:

Android

class MySurveyFragment : Fragment(), ProgramCallback {
    override fun onSurveyStart(config: SurveyFrameConfig) {
        val options = SdkDialogOption(themeColor = Color.RED)
        SdkDialog(config, options).openDialog(parentFragment)
    }
}

iOS

class ViewController: UIViewController, ProgramCallback {
    func onSurveyStart(config: SurveyFrameConfig) {
        if let controller = delegate?.getTriggerController() {
            let options = SdkDialogOption(themeColor: .red)
            _ = SdkDialog(config: config, options: options).openDialog(controller: controller)
        }
    }
}

Using Individual Components

For custom layout implementations, you can use individual question view components:

Android

override fun onSurveyPageReady(page: SurveyPage) {
    val questions = page.questions
    
    for (question in questions) {
        val questionView = when (question) {
            is InfoQuestion -> SdkQuestionInfoView(context, question)
            is SingleQuestion -> SdkQuestionSingleView(context, question)
            is MultiQuestion -> SdkQuestionMultiView(context, question)
            is NumericQuestion -> SdkQuestionNumericView(context, question)
            is TextQuestion -> SdkQuestionTextView(context, question)
            else -> null
        }
        
        questionView?.let {
            it.themeColor = yourColor
            it.setup()
            yourContainer.addView(it)
        }
    }
}

iOS

func onSurveyPageReady(page: SurveyPage) {
    let questions = page.questions
    
    for question in questions {
        var questionView: SdkQuestionView?
        
        switch question {
        case let infoQuestion as InfoQuestion:
            questionView = SdkQuestionInfoView(question: infoQuestion)
        case let singleQuestion as SingleQuestion:
            questionView = SdkQuestionSingleView(question: singleQuestion)
        case let multiQuestion as MultiQuestion:
            questionView = SdkQuestionMultiView(question: multiQuestion)
        case let numericQuestion as NumericQuestion:
            questionView = SdkQuestionNumericView(question: numericQuestion)
        case let textQuestion as TextQuestion:
            questionView = SdkQuestionTextView(question: textQuestion)
        default:
            break
        }
        
        questionView?.themeColor = yourColor
        questionView?.setup()
        yourContainer.addArrangedSubview(questionView!)
    }
}

Customization

All components support customization through parameters.

For detailed documentation on each component, including all properties, methods, and examples, see the individual component pages:

• SdkDialog
• SdkQuestionInfoView
• SdkQuestionSingleView
• SdkQuestionMultiView
• SdkQuestionNumericView
• SdkQuestionTextView