gerard.paligot.com BUILDING DYNAMIC FORMS WITH JSONFORMS AND KMP 

WHAT IS THE ISSUE? 

France Colombia 

THE CHALLENGE ▸ Maintenance overhead ▸ Slow rollouts ▸ Inconsistent UI/UX ▸ Scaling difficult 

A BETTER WAY ▸ Standard to describe a form, not specific to a need ▸ Use a declarative approach, not hard-coded ▸ Flexible UI rendering, driven by the logic ▸ Maintainable & scalable 

JSONFORMS PRESENTATION 

THE BUILDING BLOCKS Schema Data structure & Rules UiSchema Layout & Appearance Data Current values JSONForms Component / Renderer 

LET’S BUILD A FORM! 

EXPLORING FEATURES JSONFORMS 

EXPLORING JSONFORMS FEATURES ▸ Dynamic visibility 

@Serializable data class Rule( val effect: Effect, val condition: Condition ) enum class Effect { Hide, Show, Disable, Enable } @Serializable data class Condition( val scope: String, val schema: ConditionSchema ) @Serializable data class ConditionSchema( val const: JsonPrimitive? = null, val enum: ImmutableList? = null, val not: ConditionSchema? = null, val pattern: String? = null ) 

DEMO TIME 

EXPLORING JSONFORMS FEATURES ▸ Dynamic visibility ▸ Custom controls 

@Composable fun RendererStringScope.Material3StringProperty( value: String?, modifier: Modifier = Modifier, error: String? = null, onValueChange: (String) !" Unit ) { !!# } @Composable fun RendererNumberScope.Material3NumberProperty( value: String?, modifier: Modifier = Modifier, error: String? = null, onValueChange: (String) !" Unit ) { !!# } @Composable fun RendererBooleanScope.Material3BooleanProperty( value: Boolean, modifier: Modifier = Modifier, onValueChange: (Boolean) !" Unit ) { !!# } @Composable fun RendererLayoutScope.Material3Layout( modifier: Modifier = Modifier, content: @Composable (UiSchema) !" Unit ) { !!# } 

@Composable fun RendererBooleanScope.Material3BooleanProperty( value: Boolean, modifier: Modifier = Modifier, onValueChange: (Boolean) !" Unit ) { when { isToggle() !" Switch( value = value, modifier = modifier, label = label(), description = description(), enabled = enabled(), onCheckedChange = onValueChange ) else !" Checkbox( value = value, modifier = modifier, label = label(), enabled = enabled(), onCheckedChange = onValueChange ) } } @Stable interface RendererBooleanScope { fun isToggle(): Boolean fun label(): String? fun description(): String? fun enabled(): Boolean } 

@Composable internal fun StringProperty( control: Control, schemaProvider: SchemaProvider, jsonFormState: JsonFormState, content: @Composable RendererStringScope.(id: String) !" Unit ) { val scope = remember(control) { RendererStringScopeInstance(control, schemaProvider, jsonFormState) } scope.content(control.propertyKey()) } 

@Composable internal fun Property( control: Control, schemaProvider: SchemaProvider, jsonFormState: JsonFormState, stringContent: @Composable (RendererStringScope.(id: String) !" Unit), numberContent: @Composable (RendererNumberScope.(id: String) !" Unit), booleanContent: @Composable (RendererBooleanScope.(id: String) !" Unit) ) { when (schemaProvider.getPropertyByControl(control)) { is StringProperty !" StringProperty( control = control, schemaProvider = schemaProvider, jsonFormState = jsonFormState, content = stringContent ) is BooleanProperty !" BooleanProperty( control = control, schemaProvider = schemaProvider, jsonFormState = jsonFormState, content = booleanContent ) is NumberProperty !" NumberProperty( control = control, schemaProvider = schemaProvider, jsonFormState = jsonFormState, content = numberContent ) is ObjectProperty !" error("Object property can't be specified in the layout") is ArrayProperty !" TODO() } } 

@Composable fun JsonForm( schema: Schema, uiSchema: UiSchema, modifier: Modifier = Modifier, state: JsonFormState = rememberJsonFormState(initialValues = mutableMapOf()), layoutContent: @Composable (RendererLayoutScope.(@Composable (UiSchema) !" Unit) !" Unit), stringContent: @Composable (RendererStringScope.(id: String) !" Unit), numberContent: @Composable (RendererNumberScope.(id: String) !" Unit), booleanContent: @Composable (RendererBooleanScope.(id: String) !" Unit) ) { val schemeProvider = rememberSchemeProvider(uiSchema = uiSchema, schema = schema) Box(modifier = modifier) { Layout( uiSchema = uiSchema, jsonFormState = state, layoutContent = layoutContent, content = { control !" Property( control = control, schemaProvider = schemeProvider, jsonFormState = state, stringContent = stringContent, numberContent = numberContent, booleanContent = booleanContent ) } ) } } 

JsonForm( schema = schema, uiSchema = uiSchema, state = state, layoutContent = { Material3Layout(content = it) }, stringContent = { id !" val value = state[id].value as String? val error = state.error(id = id).value Material3StringProperty( value = value, error = error!$message, onValueChange = { state[id] = it } ) }, numberContent = {}, booleanContent = {} ) 

DEMO TIME 

EXPLORING JSONFORMS FEATURES ▸ Dynamic visibility ▸ Custom controls ▸ External data interaction 

DEMO TIME 

JSONFORMS ARCHITECTURE 

ARCHITECTURE CORE VS RENDERER 

OUR KOTLIN MULTIPLATFORM ARCHITECTURE JSONForms shared KMP ui Material3 Renderer material3 Your Renderer Set Custom Renderer 

ROAD TO COMPOSE MULTIPLATFORM WITH CUPERTINO RENDERER 

OUR KOTLIN MULTIPLATFORM ARCHITECTURE JSONForms shared KMP ui Material3 Renderer material3 Your Renderer Set Custom Renderer Apple Renderer cupertino Custom Renderer 

kotlin { !!# sourceSets { commonMain.dependencies { api(projects.ui) implementation(compose.ui) implementation(compose.foundation) implementation(libs.cupertino) } } } 

@Composable fun RendererStringScope.CupertinoStringProperty( value: String?, modifier: Modifier = Modifier, error: String? = null, onValueChange: (String) !" Unit ) { !!# } @Composable fun RendererNumberScope.CupertinoNumberProperty( value: String?, modifier: Modifier = Modifier, error: String? = null, onValueChange: (String) !" Unit ) { !!# } @Composable fun RendererBooleanScope.CupertinoBooleanProperty( value: Boolean, modifier: Modifier = Modifier, onValueChange: (Boolean) !" Unit ) { !!# } @OptIn(ExperimentalCupertinoApi!%class) @Composable fun RendererLayoutScope.CupertinoLayout( modifier: Modifier = Modifier, content: @Composable (UiSchema) !" Unit ) { !!# } 

@Composable fun RendererStringScope.CupertinoStringProperty( value: String?, modifier: Modifier = Modifier, error: String? = null, onValueChange: (String) !" Unit ) { when { isRadio() !" SegmentedControl( !!# ) isDropdown() !" WheelPicker( !!# ) else !" OutlinedTextField( !!# ) } } 

DEMO TIME 

No content

IN CONCLUSION 

IN CONCLUSION ▸ Standardize complex forms with JSONForms implementation ▸ Respect the JSONForms architecture for customization purpose ▸ Deliver a native user experience ▸ Accelerate development and our rollout ▸ Improve maintainability & scalability 

REFERENCES ▸ JSONForms standard https://jsonforms.io/ ▸ jsonforms-kotlin https://github.com/GerardPaligot/jsonforms-kotlin ▸ compose-cupertino https://github.com/schott12521/compose-cupertino 

THANK YOU! gerard.paligot.com