https://github.com/kentico-ericd/xperience-community-json-component

A form component which stores multiple objects in a field as JSON
https://github.com/kentico-ericd/xperience-community-json-component

component json xperience-by-kentico

Last synced: 5 months ago
JSON representation

A form component which stores multiple objects in a field as JSON

• Host: GitHub
• URL: https://github.com/kentico-ericd/xperience-community-json-component
• Owner: kentico-ericd
• License: mit
• Created: 2024-12-05T19:06:18.000Z (10 months ago)
• Default Branch: master
• Last Pushed: 2024-12-12T23:08:24.000Z (10 months ago)
• Last Synced: 2025-04-15T08:09:09.226Z (6 months ago)
• Topics: component, json, xperience-by-kentico
• Language: TypeScript
• Homepage:
• Size: 419 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# Xperience Community: JSON component

[![Nuget](https://img.shields.io/nuget/v/XperienceCommunity.JsonComponent)](https://www.nuget.org/packages/XperienceCommunity.JsonComponent#versions-body-tab)

[![build](https://github.com/kentico-ericd/xperience-community-json-component/actions/workflows/build.yml/badge.svg)](https://github.com/kentico-ericd/xperience-community-json-component/actions/workflows/build.yml)

## Description

This package adds a new [UI form component](https://docs.kentico.com/developers-and-admins/customization/extend-the-administration-interface/ui-form-components) which stores multiple objects in a single field as a JSON array. New objects can be added and removed from the array directly from the administration UI.

## Library Version Matrix

| Xperience Version | Library Version |

| ----------------- | --------------- |

| >= 29.0.0         | >= 1.0.0        |

## :gear: Package Installation

Add the package to your application using the .NET CLI

```powershell

dotnet add package XperienceCommunity.JsonComponent

```

## 🚀 Quick Start

1. Create a model that represents an object in the JSON array. Decorate properties with the `JsonInput` attribute to enable editing in the administration:

```cs

namespace MySite.Models;

public class MyModel {

    [JsonInput]

    public string? Name { get; set; }

    [JsonInput(Type = JsonInputType.Number)]

    public int Age { get; set; }

}

```

2. In the __Content types__ application, create a new field on your content type using the "Long text" data type

3. Select the "JSON array" form component

4. In the "Model class" property, add the fully-qualified type name (the namespace and class name) of your model from step 1. E.g. "MySite.Models.MyModel"

## 🗒 Full Instructions

View the [Usage Guide](./docs/Usage-Guide.md) for more detailed instructions.