OpenContent

https://opencontent.readme.io
Admin
OpenContent provides structured content editing capabilities for DNN (DotNetNuke) platforms,...
Tokens:55,164
Snippets:519
Trust Score:9.9
Update:9 months ago
Show doc for...
Tokens:
Raw
### Builder Configuration Example with Version Setting

Source: https://opencontent.readme.io/docs/migrating-existing-templates-to-builder-v2

Shows how to specify the builder version within the manifest.json file. This allows for selective use of Builder V2 while maintaining compatibility with older templates using AlpacaJS.

```json
"builderVersion": 1/2
```

--------------------------------

### OpenContent: Nested {{#equal}} Helpers Inside {{#each}} - Working Example

Source: https://opencontent.readme.io/discuss/5d3f6db70434220026ce367f

This code snippet demonstrates a working example of nested {{#equal}} helpers outside of an {{#each}} loop in OpenContent. It shows that the helpers function as expected when not within an iteration context.

```OpenContent
{{#equal Settings.Setting1 "value1"}}
{{#equal Settings.Setting2 "value2"}}
I can see this rendered.
{{/equal}}
{{/equal}}
```

--------------------------------

### Working Handlebars Example with Localization

Source: https://opencontent.readme.io/discuss/633c2eaeb427af0d482607b5

Illustrates a working Handlebars code snippet that correctly displays localized strings and iterates through items, demonstrating a functional approach to localization within loops.

```handlebars
<p class="CategoryHeader">{{Localization.Category}}: {{Category}}</p>
{{#each Items}}
   <p>{{@index}}</p>
{{/each}}
```

--------------------------------

### Razor Static Content Localization Example

Source: https://opencontent.readme.io/v3.5/discuss/592402553b558b270000ee40

Demonstrates how to use the static content localization functionality in the Razor host by accessing localized strings from resource files. The example utilizes the @Html.GetLocalizedString helper to retrieve a translated string for 'Time'.

```razor
@Html.GetLocalizedString("Time")
```

--------------------------------

### jQuery Plugin Initialization with Localization Tokens

Source: https://opencontent.readme.io/discuss/633bdc726ee8a30016504253

Example of initializing a jQuery plugin (dnnExpandAll) using localization tokens. The initial attempt shows a common pitfall where tokens are not directly resolved in JavaScript files.

```javascript
  $("#DemoPanel .dnnFormExpandContent a").dnnExpandAll({
     targetArea: "#DemoPanel",
     expandText: "{{Localization.ExpandAll}}",
     collapseText: "{{Localization..CollapseAll}}"
  });

```

--------------------------------

### OpenContent: Nested {{#equal}} Helpers Inside {{#each}} - Non-Rendering Example

Source: https://opencontent.readme.io/discuss/5d3f6db70434220026ce367f

This code snippet illustrates the problem where nested {{#equal}} helpers do not render properly when placed inside an {{#each}} loop in OpenContent. The issue arises due to the change in context within the loop.

```OpenContent
{{#each Items}}
{{#equal ../Settings.Setting1 "value1"}}
{{#equal ../Settings.Setting2 "value2"}}
This does not get rendered.
{{/equal}}
{{/equal}}
{{/each}}
```

--------------------------------

### Select2 - Getting Additional Data (Categories/Tags)

Source: https://opencontent.readme.io/docs/select2

This example demonstrates how to configure a Select2 field to retrieve a list of categories or tags from a data service. The `dataKey` specifies the type of data to fetch, and `valueField` and `textField` define the fields to use for the dropdown's value and display text, respectively.

```APIDOC
## Select2 - Getting Additional Data

### Description
Configure a Select2 field to fetch dropdown items from predefined data lists like categories or tags. The `valueField` will be saved, and both `valueField` and `textField` will be available in the template model.

### Method
POST (Implicit via DNN ServiceFramework)

### Endpoint
(Internal DNN ServiceFramework Endpoint)

### Parameters
#### Query Parameters
None

#### Request Body
```json
{
  "type": "select2",
  "dataService": {
    "action": "LookupData",
    "data": {
      "dataKey": "Categories",
      "valueField": "Id",
      "textField": "Title"
    }
  }
}
```

### Request Example
```json
{
  "type": "select2",
  "dataService": {
    "action": "LookupData",
    "data": {
      "dataKey": "Categories",
      "valueField": "Id",
      "textField": "Title"
    }
  }
}
```

### Response
#### Success Response (200)
- **field1** (type) - Description

#### Response Example
```json
[
  {
    "Id": 1,
    "Title": "Category 1"
  },
  {
    "Id": 2,
    "Title": "Category 2"
  }
]
```
```

--------------------------------

### Image Manipulation with OpenImageProcessor (Handlebars)

Source: https://opencontent.readme.io/docs/image-fields-1

Demonstrates how to use OpenImageProcessor with Handlebars to manipulate images on the fly. This includes resizing and cropping images using query string parameters. It provides examples for both the ImageX field and the legacy ImageCrop field.

```handlebars
<img src="{{Image.url}}?width=600" />
<img src="{{Image.url}}?width=600&height=250" />

For ImageX field:
<img src="{{Image.url}}?width=750&crop={{Image.crop.x}},{{Image.crop.y}},{{Image.crop.width}},{{Image.crop.height}}" alt="{{title}}" />

For ImageCrop field (legacy)
<img src="{{Image.url}}?crop={{Image.x}},{{Image.y}},{{Image.width}},{{Image.height}}&width=2000&height=400&bgcolor=fff" alt="{{Title}}">
```

--------------------------------

### Configure Main Template Options for Category Selection

Source: https://opencontent.readme.io/docs/additional-data

Configures the input options for the main template, specifying 'Category' as a 'select2' type dropdown. It uses a 'dataService' to fetch 'Categories' data, mapping 'Id' to valueField and 'Title' to textField for selection.

```json
{
	"fields": {
		"Intro": {
			"title": "Introduction",
			"type": "textarea"
		},
		"Text": {
			"title": "Text",
			"type": "ckeditor"
		},
		 "Category": {
		  "type": "select2",
		  "dataService": {
			"action": "LookupData",
			"data": {
			  "dataKey": "Categories",
			  "valueField": "Id",
			  "textField": "Title"
			}
		  }
		}
	}
}
```

--------------------------------

### OC Module Data Structure Example

Source: https://opencontent.readme.io/discuss/5f0bdb95cc18bb015902c6ea

This JSON snippet illustrates the structure of data within an OpenContent module, containing client names and their corresponding genders. This data is intended to be fetched and displayed on another page.

```json
[
  {
    "name": "Jane Smith",
    "gender": "female"
  },
  {
    "name": "Joe Someone",
    "gender": "male"
  },
  {
    "name": "Bob Jones",
    "gender": "male"
  }
]
```

--------------------------------

### Define Initial Field Schema (JSON)

Source: https://opencontent.readme.io/docs/datafield-migration

This JSON snippet defines the initial schema for a field, specifying its type and title. It serves as a starting point before migration.

```json
{
  "type": "object",
  "properties": {
    "MyField": {
      "type": "string",
      "title": "My Field"
    }
  }
}
```

--------------------------------

### Template Rendering with Handlebars (Handlebars, CSS, JavaScript)

Source: https://opencontent.readme.io/docs/architecture

Example of a Handlebars template file (template.hbs) for rendering content with tabs. It dynamically generates navigation and tab content based on 'Tabs' data and uses 'Settings.Layout' for styling. Includes placeholders for optional CSS (template.css) and JavaScript (template.js) files.

```handlebars
<div role="tabpanel">

    <!-- Nav tabs -->
    <ul class="nav nav-{{Settings.Layout}}s" role="tablist">
        {{#each Tabs}}
        <li role="presentation" {{#if @first}}class="active"{{/if}} ><a href="#tab{{@index}}" aria-controls="tab{{@index}}" role="tab" data-toggle="{{../Settings.Layout}}">{{Title}}</a></li>        
        {{/each}}
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        {{#each Tabs}}
        <div role="tabpanel" class="tab-pane {{#if @first}}active{{/if}}" id="tab{{@index}}">{{Description}}</div>
        {{/each}}
    </div>

</div>
```

```javascript

```

```css

```

--------------------------------

### Printing Razor Models

Source: https://opencontent.readme.io/docs/razor

These snippets show how to print the entire Razor model object for debugging or inspection purposes. One example prints the Open Content model, and the other prints the DNN model.

```csharp
@ObjectInfo.Print(Model)
```

```csharp
@ObjectInfo.Print(Dnn)
```

--------------------------------

### Define Additional Data Schema and Options (JSON, Text)

Source: https://opencontent.readme.io/v3.5/docs/additional-data

This snippet shows how to define the schema and options for additional data. The schema defines the structure of the data items (e.g., Id, Title), while the options define how these fields are presented in the UI. These files are crucial for creating custom data lists like categories or tags.

```json
{
    "type": "array",
	"items": {
        "type": "object",
        "properties": {
            "Id": {
                "type": "string",
                "title": "Id (internal)"
            },
            "Title": {
                "type": "string",
                "title": "Category Name"
            }
        }
    }
}

```

```text
{
    "items": {
        "fields": {
            "Id": {
                "type": "guid",
                "hidden": true
            },
            "Title": {
                "type": "text"
            }
        }
    }
}

```

--------------------------------

### Enable Additional Data in Template Manifest

Source: https://opencontent.readme.io/docs/additional-data

Enables the 'additionalDataInTemplate' flag for both 'main' and 'detail' templates within the manifest. This ensures that all defined Additional Data is accessible within the specified template contexts.

```json
"templates": {
        "list": {
            "type": "multiple",
            "title": "List",
            "main": {
              "template": "template.hbs",
             	"additionalDataInTemplate": true
            },
            "detail": {
                "template": "detail.hbs",
                "additionalDataInTemplate": true
            }
        }
}
```

--------------------------------

### Restructuring Array Definitions in options.json for Builder V2

Source: https://opencontent.readme.io/docs/migrating-existing-templates-to-builder-v2

Demonstrates the required structural change in options.json for handling arrays in Builder V2. The legacy structure used by AlpacaJS is no longer supported, and a new structure with 'items' instead of 'item' is necessary.

```json
{
   "Items": {
      "fields": {
         "item": {
            "fields": {
            ...
            }
         }
      }
   }
}
```

```json
{
   "Items": {
      "items": {
         "fields": {
         }
      }
   }
}
```

--------------------------------

### Integrate Additional Data into Main Template (JSON, Text)

Source: https://opencontent.readme.io/v3.5/docs/additional-data

This code block shows how to integrate additional data into a main template's schema and options. The schema defines the field (e.g., 'Categories') and its type, while the options configure it as a 'select2' dropdown that pulls data from the defined 'Categories' data service. This allows users to select predefined data points when editing content.

```json
{
    "type": "object",
    "properties": {
			"Title": {
				"title": "Title",
				"type": "string"
			},
			"Intro": {
				"title": "Intro",
				"type": "string"
			},
			"Text": {
				"title": "Text",
				"type": "string"
			},
			"Categories": {
			  "type": "string",
			  "title": "Category (single)"
			}
		}
}
```

```text
{
	"fields": {
		"Intro": {
			"title": "Introduction",
			"type": "textarea"
		},
		"Text": {
			"title": "Text",
			"type": "ckeditor"
		},
		 "Category": {
		  "type": "select2",
		  "dataService": {
			"action": "LookupData",
			"data": {
			  "dataKey": "Categories",
			  "valueField": "Id",
			  "textField": "Title"
			}
		  }
		}
	}
}
```

--------------------------------

### Define Main Template Schema with Additional Data Field

Source: https://opencontent.readme.io/docs/additional-data

Defines the schema for a main template, including standard fields like 'Title', 'Intro', and 'Text', and a 'Categories' field. The 'Categories' field is configured to accept a single string value, intended for selection from Additional Data.

```json
{
    "type": "object",
    "properties": {
			"Title": {
				"title": "Title",
				"type": "string"
			},
			"Intro": {
				"title": "Intro",
				"type": "string"
			},
			"Text": {
				"title": "Text",
				"type": "string"
			},
			"Categories": {
			  "type": "string",
			  "title": "Category (single)"
			}
		}
}
```

--------------------------------

### HTML Input for JPList Search with Keydelay

Source: https://opencontent.readme.io/v3.5/docs/jplist-tips

This HTML snippet demonstrates how to configure an input element for JPList textbox search. It includes attributes like 'data-event-name="keydelay"' and the 'textfilter' class to enable improved autocomplete functionality. This setup is essential for the associated JavaScript to trigger search events effectively.

```html
<input data-path=".title" class="form-control textfilter"
        type="text"
        value=""
        placeholder="Filter by Title"
        data-control-type="textbox"
        data-control-name="Title"
        data-control-action="filter"
        data-event-name="keydelay" />
```

--------------------------------

### Configure web.config for DNN 8 Upgrade

Source: https://opencontent.readme.io/docs/faq

This XML snippet shows the necessary configuration within the web.config file to resolve issues that may arise after upgrading to DNN 8. It ensures the correct version of System.Web.Helpers is referenced, preventing compatibility problems.

```xml
<dependentAssembly>
  <assemblyIdentity name="System.Web.Helpers" publicKeyToken="31bf3856ad364e35" />
  <bindingRedirect oldVersion="1.0.0.0-3.0.0.0" newVersion="3.0.0.0" />
</dependentAssembly>
```

--------------------------------

### Configure Category Options for Additional Data

Source: https://opencontent.readme.io/docs/additional-data

Configures the input fields for category data, defining 'Id' as a hidden GUID and 'Title' as a text input. This JSON file controls how users interact with category data in the Open Content interface.

```json
{
    "items": {
        "fields": {
            "Id": {
                "type": "guid",
                "hidden": true
            },
            "Title": {
                "type": "text"
            }
        }
    }
}
```

--------------------------------

### Configure SEO Meta Tags in Manifest (JSON)

Source: https://opencontent.readme.io/docs/multi-items

Sets up SEO-related meta tags within the manifest.json file for detail pages. It allows dynamic population of meta title, description, and URL slugs using Handlebars tokens.

```json
{
  // ...
    "detailMetaTitle": "{{#if Seo.MetaTitle}}{{Seo.MetaTitle}}{{else}}{{Title}}{{/if}}",
    "detailMetaDescription": "{{#if Seo.MetaDescription}}{{Seo.MetaDescription}}{{else}}{{Description}}{{/if}}",
    "detailUrl": "{{Category.Title}}-{{#if Seo.Slug}}{{Seo.Slug}}{{else}}{{Title}}{{/if}}",
    "detailMeta": "{{#if Image}}<meta property=\"og:image\" content=\"{{Image}}\" />{{/if}}<meta property=\"og:type\" content=\"article\" />",
  
  // ...
  
}
```

--------------------------------

### Multilingual Wysiwyg Configuration

Source: https://opencontent.readme.io/v3.5/docs/field-types

Specifies the schema and options for a multilingual WYSIWYG (What You See Is What You Get) editor. This provides a user-friendly interface for creating formatted content across different languages.

```json
{
  "schema type": "string",
  "options type": "mlwysihtml"
}
```

--------------------------------

### Solution for Handlebars Localization in Loops

Source: https://opencontent.readme.io/discuss/633c2eaeb427af0d482607b5

Presents the corrected Handlebars syntax to access root-level localization within an 'each' loop. This solution involves using ../Localization or @root/Localization to properly reference the localization object.

```handlebars
{{../Localization.Category}} or {{@root/Localization.Category}}
```

--------------------------------

### Use Localization in jQuery Functions (JSON)

Source: https://opencontent.readme.io/v3.5/discuss/633bdc726ee8a30016504253

Example of a German-Austrian localization JSON file used for internationalizing text in web applications. This file maps English keys to their German translations.

```json
{
  "ExpandAll":"Alle ausklappen",
  "CollapseAll":"Alle einklappen"
}
```

--------------------------------

### Configure Options for Date Pickers (JSON)

Source: https://opencontent.readme.io/docs/workflow-content-staging

This JSON snippet configures the options for date picker fields used in content staging, specifying formats, date ranges, and locale. It applies to 'publishstartdate' and 'publishenddate'.

```json
"publishstartdate": {
  "type": "date",
  "picker": {
    "format": "DD/MM/YYYY",
    "minDate": "2000-01-01",
    "maxDate": "2099-12-31",
    "locale": "nl"
  }
},
"publishenddate": {
  "type": "date",
  "picker": {
    "format": "DD/MM/YYYY",
    "minDate": "2000-01-01",
    "maxDate": "2099-12-31",
    "locale": "nl"
  }
}
```

--------------------------------

### Configure DNN Search Integration

Source: https://opencontent.readme.io/docs/manifest

Settings for integrating module content into DNN search. This includes enabling search, specifying fields for title, description, and indexed text using Handlebars templates, and applying filters.

```configuration
dnnsearch: true
dnnSearchTitle: "{{Title}}"
dnnSearchDescription: "{{Description}}"
dnnSearchText: "{{Content}}"
dnnSearchFilter: true
```

--------------------------------

### Interact with OpenContent Form using JavaScript

Source: https://opencontent.readme.io/docs/forms-1

This JavaScript snippet provides examples of interacting with an initialized OpenContent form. It demonstrates how to submit the form, modify a specific field's value, and show the form again after it has been hidden.

```javascript
// submit the form to the server
$("#alpacaForm").openContentForm().submit(itemId);
// modify a field of the form
$("#alpacaForm").openContentForm().setField("Name", "John");
// after submit the form is hidden, sso you can show it again
$("#alpacaForm").openContentForm().show();
```

--------------------------------

### Configure Initial Field Options (JSON)

Source: https://opencontent.readme.io/docs/datafield-migration

This JSON snippet configures the options for an initial field, specifying its type and associated folder. It's used before migrating to a new type.

```json
{
  "fields": {
    "MyField": {
      "type": "image2",
      "folder": "MyField"
    }
  }
}
```

--------------------------------

### Template File Parameters in OpenContent

Source: https://opencontent.readme.io/v3.5/docs/manifest

This section details the parameters available for configuring template files in OpenContent. It covers settings like specifying the template file name, loading partial templates, making schema and options available in templates, and controlling data availability.

```json
{
  "template": "myTemplate.hbs",
  "partialTemplates": "header.hbs",
  "schemaInTemplate": true,
  "optionsInTemplate": true,
  "dataInTemplate": true,
  "additionalDataInTemplate": false,
  "labelsInTemplate": false,
  "dnnsearch": false,
  "dnnSearchTitle": "{{Title}}",
  "dnnSearchDescription": "{{Description}}",
  "dnnSearchText": "{{Content}}"
}
```

--------------------------------

### Handling Reserved Keywords in Razor

Source: https://opencontent.readme.io/docs/razor

This example shows how to use Razor to iterate over a model's enum properties when the property name is a C# reserved keyword. It uses the '@keyword' syntax to prevent C# compilation errors.

```csharp
@foreach (var role in Model.Schema.properties.Roles.@enum){
     <span class="roles">@role</span>
}
```

--------------------------------

### Define Category Schema for Additional Data

Source: https://opencontent.readme.io/docs/additional-data

Defines the structure for category data, specifying 'Id' and 'Title' as string properties. This JSON schema is used to validate the format of category data within Open Content.

```json
{
    "type": "array",
	"items": {
        "type": "object",
        "properties": {
            "Id": {
                "type": "string",
                "title": "Id (internal)"
            },
            "Title": {
                "type": "string",
                "title": "Category Name"
            }
        }
    }
}
```

--------------------------------

### Select2 - Getting Items from Another OC Module

Source: https://opencontent.readme.io/docs/select2

This configuration allows a Select2 field to fetch its items from another OpenContent module. By specifying `moduleId` and `tabId`, you can create a one-way relationship, displaying items from a different module in your dropdown.

```APIDOC
## Select2 - Getting Items from Another OC Module

### Description
Fetch dropdown items from another OpenContent module by specifying its `moduleId` and `tabId`. The `valuefield` will be saved, and the entire selected item object will be available in the template model.

### Method
POST (Implicit via DNN ServiceFramework)

### Endpoint
(Internal DNN ServiceFramework Endpoint)

### Parameters
#### Query Parameters
None

#### Request Body
```json
{
  "type": "select2",
  "dataService": {
    "data": {
      "moduleId": "123",
      "tabId": "456",
      "valuefield": "Id",
      "textfield": "Name"
    },
    "action": "Lookup"
  }
}
```

### Request Example
```json
{
  "type": "select2",
  "dataService": {
    "data": {
      "moduleId": "123",
      "tabId": "456",
      "valuefield": "Id",
      "textfield": "Name"
    },
    "action": "Lookup"
  }
}
```

### Response
#### Success Response (200)
- **field1** (type) - Description

#### Response Example
```json
[
  {
    "Id": "abc",
    "Name": "Item A"
  },
  {
    "Id": "def",
    "Name": "Item B"
  }
]
```
```

--------------------------------

### Filter Array Content in 'each' Helper

Source: https://opencontent.readme.io/v3.5/discuss/5f908180cfb0af004dc95731

Demonstrates how to filter content within an 'each' loop based on a specific attribute matching a condition. This is useful for selectively displaying data. The example assumes a 'Person' array and filters by 'Person.Department'.

```handlebars
{{#each Person}}
  {{#if Person.Department '=' DepartmentName}}
    <!-- Content to display for matching persons -->
    {{this}}
  {{/if}}
{{/each}}
```

--------------------------------

### Configure Partial Template Settings

Source: https://opencontent.readme.io/docs/manifest

Options for configuring partial template files, which are reusable template components. This includes specifying the template file name and whether it should be rendered client-side.

```configuration
template: "myPartial.hbs"
clientSide: true
```

--------------------------------

### Configure Schema for Content Staging (JSON)

Source: https://opencontent.readme.io/docs/workflow-content-staging

This JSON snippet defines the schema fields required for content staging, including 'publishstartdate', 'publishenddate', and 'publishstatus'. These fields control the visibility and publication state of content items.

```json
"publishstartdate": {
  "title": "Publish Start Date",
  "required": true,
  "default": "today"
},
"publishenddate": {
  "title": "Publish End Date",
  "required": true,
  "default": "2099-12-31"
},
"publishstatus": {
  "title": "Status",
  "enum": [ "draft", "published" ],
  "required": true,
  "default": "draft"
}
```

--------------------------------

### Configure Multi-Item Template Manifest (JSON)

Source: https://opencontent.readme.io/docs/multi-items

Defines the basic structure of a manifest.json file for a multi-item template. It specifies the template type as 'multiple' and points to the main list and detail template files.

```json
{
    "editWitoutPostback": true,
    "templates": {
        "template": {
            "type": "multiple", /* single or multiple*/
            "title": "List",            
            "main": {
                "template": "template.hbs"
            },
            "detail": {
                "template": "detail.hbs"                
            }
        }
    }
}

```

--------------------------------

### Configure Server-Side Rendering Manifest (JSON)

Source: https://opencontent.readme.io/docs/multi-items

Configures the manifest.json for server-side rendering of multi-item templates. 'clientSideData' is set to false, indicating that data is processed on the server.

```text
{
    "index": false,
    "templates": {
        "template": {
            "type": "multiple", /* single or multiple*/
            //...
            "clientSideData": false,
          /....
        }
    }
}
```

--------------------------------

### Configure DNN Search Indexing in manifest.json

Source: https://opencontent.readme.io/discuss/5d35795cd0d8e6004b30a4e9

This configuration snippet shows how to enable and customize DNN Search indexing for OpenContent templates. It specifies which fields to index and how to format them. Ensure the 'dnnsearch' property is set to true to activate indexing.

```json
{
  "dnnsearch": true,
  "dnnSearchTitle": "{{Title}}",
  "dnnSearchDescription": "{{convertHtmlToText Description}}",
  "dnnSearchText": "{{Title}} {{convertHtmlToText Description}}"
}
```

--------------------------------

### Add Additional Data Definition to Manifest

Source: https://opencontent.readme.io/docs/additional-data

Integrates 'Categories' as a new Additional Data type into the Open Content manifest. This JSON snippet shows how to define the title and scope for the 'Categories' data, making it available in the module action dropdown.

```json
{
    ...
	
    "templates": {
        ...
    },
	"additionalData": {
			"Categories": { /* This should be equal to [name] */
				"title": "Article Category",
				"scope": "module" /* tabmodule, module, tab, portal */
			}
		}

}
```

--------------------------------

### Configure Client-Side Rendering Manifest (JSON)

Source: https://opencontent.readme.io/docs/multi-items

Configures the manifest.json for client-side rendering of multi-item templates. 'clientSideData' is set to true, meaning data is fetched from a web API and rendered in the client.

```text
{
    "index": true,
    "templates": {
        "template": {
            "type": "multiple", /* single or multiple*/
            //...
            "clientSideData": true,
          /....
        }
    }
}
```

--------------------------------

### Integrate External jpList Controls with Open Content Multi-item

Source: https://opencontent.readme.io/discuss_page=7&perPage=10

Explains the process of integrating external jpList controls, such as the Checkbox Dropdown Control, with the Open Content Multi-item implementation. This involves registering scripts and adding necessary HTML to the template, with potential challenges in making the filtering work.

```javascript
{{registerscript "jplist.checkbox-dropdown.min.js"}}
```

--------------------------------

### Configure Image Crop (Legacy) - JSON

Source: https://opencontent.readme.io/docs/image-fields-1

This JSON configuration defines options for the legacy 'imagecrop' type. It specifies the label, type, cropper aspect ratio, upload folder, and management URL. This setup is used for basic image cropping functionalities.

```json
 "Photo": {
            "label": "Group Photo",
            "type": "imagecrop",            
            "cropper": {
                "aspectRatio": 1               
            },
            "uploadfolder": "Files/images/GroupPhotos/",
            "uploadhidden": false,
            "manageurl": "/webmanagement/filemanager"
        },

```

--------------------------------

### JSON Field Type Migrations for Builder V2

Source: https://opencontent.readme.io/docs/migrating-existing-templates-to-builder-v2

Illustrates the transformation of field types in options.json when migrating from older OpenContent versions to Builder V2. This includes changes for select2, wysihtml/summernote, file2, folder2, user2/role2, image-related fields, icon sets, and accordions.

```json
{
  "Texts": {
    "fields": {
      "Title": {
        "type": "mltext"
      },
      "Text": {
        "type": "mlckeditor"
      }
    }
  }
}
```

```json
{
  "Texts": {
    "fields": {
      "Title": {
        "type": "text",
        "multilanguage": true
      },
      "Text": {
        "type": "ckeditor",
        "multilanguage": true
      }
    }
  }
}
```

--------------------------------

### Configure DNN Search Indexing in manifest.json

Source: https://opencontent.readme.io/v3.5/docs/dnn-search-integration

This JSON snippet demonstrates how to configure OpenContent's manifest.json to enable DNN search indexing. It includes settings for enabling the index, specifying template types, and customizing the title, description, and main text that will be passed to the DNN search crawler.

```json
{
    "index": true,	
    "templates": {
        "list": {
            "type": "multiple",
            "title": "List",            
            "main": {
                "template": "list.hbs",
                 "dnnsearch": true,
                 "dnnSearchTitle": "{{Title}}",
                 "dnnSearchDescription": "Article: {{Summary}}",
                 "dnnSearchText": "{{Text}}"
            },
            "detail": {
              "template": "detail.hbs",
            }
        }
    }
}
```

--------------------------------

### Inspect Handlebars (Server-Side) Data Model

Source: https://opencontent.readme.io/docs/data-models

This guide explains how to inspect the data model for server-side Handlebars templates. It involves enabling browser console logging in global settings and using the browser's developer console (F12) to view the JSON object during template rendering.

```text
1. Open "Edit Global Settings" of the module.
2. Switch "Logging (Browser console)" on.
3. Use your Browser Console (F12) to inspect the JSON object (look for "Render template")
```

--------------------------------

### Partial Templates Configuration in OpenContent

Source: https://opencontent.readme.io/v3.5/docs/manifest

This snippet illustrates the configuration for partial templates in OpenContent. It allows specifying the file name for a partial template and indicates whether the file should be rendered client-side, typically within a script tag.

```json
{
  "template": "myPartialTemplate.hbs",
  "clientSide": false
}
```

--------------------------------

### Configure Options with New Field Type (JSON)

Source: https://opencontent.readme.io/docs/datafield-migration

This JSON snippet configures the options for a template, including both the original field (e.g., image2) and a new field (e.g., imagex) with its specific properties. This prepares for data migration.

```json
{
  "fields": {
    "MyField": {
      "type": "image2",
      "folder": "Images"
    },
    "MyField2": {
      "type": "imagex",2
      "uploadfolder": "",
      "fileExtensions": "gif|jpg|jpeg|tiff|png",
      "fileMaxSize": 2000000,
      "showOverwrite": true,
      "overwrite": false,
      "showCropper": false
    }
  }
}
```

--------------------------------

### Construct Search Text for Array Fields in Single Item Templates

Source: https://opencontent.readme.io/docs/dnn-search-integration

This example illustrates how to construct the 'dnnSearchText' for single item templates when dealing with array field types. It shows how to iterate through an array (e.g., 'Columns') and include its sub-fields ('Title', 'Description') in the search text, alongside other text fields like 'Introduction'.

```handlebars
"dnnSearchText": "{{Introduction}} {{#each Columns}} {{Title}} {{Description}}  {{/each}}"
```

--------------------------------

### Configure Template File Settings

Source: https://opencontent.readme.io/docs/manifest

These settings control how template files (.hbs or .cshtml) are processed and what data is made available within them. Options include specifying template names, loading partials, and including schema, options, data, and labels.

```configuration
template: "myTemplate.hbs"
partialTemplates: "header.hbs, footer.hbs"
schemaInTemplate: true
optionsInTemplate: true
dataInTemplate: true
additionalDataInTemplate: true
labelsInTemplate: true
```

--------------------------------

### Define Additional Data Sources

Source: https://opencontent.readme.io/docs/manifest

This section details how to define additional data sources for modules, including specifying a title, scope, storage key, and relating to data from other modules using ModuleId and TabId.

```json
{
  "title": "Customers",
  "scope": "module",
  "storageKey": "customerData",
  "dataModuleId": 123,
  "dataTabId": 456
}
```

--------------------------------

### Use Localization in jQuery Functions (JavaScript)

Source: https://opencontent.readme.io/v3.5/discuss/633bdc726ee8a30016504253

Demonstrates how to use a jQuery plugin (dnnExpandAll) with localized text. It shows how to pass localization keys as parameters to the plugin, expecting them to be replaced with translated strings.

```javascript
  $("#DemoPanel .dnnFormExpandContent a").dnnExpandAll({
     targetArea: "#DemoPanel",
     expandText: "{{Localization.ExpandAll}}",
     collapseText: "{{Localization..CollapseAll}}"
  });
```

--------------------------------

### Razor Template with Intellisense and Basic Structure

Source: https://opencontent.readme.io/docs/razor

This snippet demonstrates the basic structure of an Open Content Razor template, including the necessary include for Intellisense support in Visual Studio. It iterates through a model's columns to render content within a responsive grid layout.

```cshtml
@inherits Satrabel.OpenContent.Components.OpenContentWebPage
<div class="row">
    @foreach(var col in Model.Columns)
  	{
  <div class="col-md-@(12 / Model.Settings.Columns) col-sm-@(24 / Model.Settings.Columns)">
        <div class="thumbnail">
            @if (!string.IsNullOrEmpty(col.Image))
          	{
            <img src="@col.Image" alt="@col.Title}}">
            }
          	@if (col.Caption)
          	{
            <div class="caption">
                @if (!string.IsNullOrEmpty(col.Title))
              	{
                <h3>@col.Title</h3>
                }
                @col.Description
            </div>
          	}
        </div>
    </div>
  	}
</div>
```

--------------------------------

### Accessing External Select2 Field Data in OpenContent

Source: https://opencontent.readme.io/discuss/635aa362e531990099e45963

This snippet demonstrates how to access and display data from an external select2 field, specifically the 'Title' field within the 'RelatedProductGroup' collection. It's intended for use within OpenContent's templating system. Ensure the 'Options.fields.RelatedProductGroup' path is correctly defined and accessible.

```handlebars
{{#each Options.fields.RelatedProductGroup}}
{{Title}}
{{/each}}
```

--------------------------------

### OpenContent: Nested {{#equal}} Inside {{#each}} - Final Non-Rendering Test

Source: https://opencontent.readme.io/discuss/5d3f6db70434220026ce367f

This is the final test case provided, demonstrating a deeply nested {{#equal}} structure within an {{#each}} loop in OpenContent. It confirms that the inner {{#equal}} helper fails to render, highlighting the core problem.

```OpenContent
{{#each Items}}
{{#equal ../Settings.Setting1 "value1"}}
I see this...
{{#equal ../Settings.Setting2 "value2"}}
... but not this one!!!
{{/equal}}
{{/equal}}
{{/each}}
```

--------------------------------

### OpenContent: {{#each}} with Separate {{#equal}} Blocks - Working

Source: https://opencontent.readme.io/discuss/5d3f6db70434220026ce367f

This code snippet shows a scenario within an {{#each}} loop in OpenContent where separate {{#equal}} blocks, each checking a different parent scope setting, do render. This suggests the issue is with nesting, not just accessing parent scope.

```OpenContent
{{#each Items}}
{{#equal ../Settings.Setting1 "value1"}}I see this...{{/equal}}
{{#equal ../Settings.Setting2 "value2"}}... and this too{{/equal}}
{{/each}}
```

--------------------------------

### Implement JavaScript for Sorting and API Update

Source: https://opencontent.readme.io/docs/sorting

This JavaScript code initializes the Sortable library on elements with the 'sortableList' class. It configures drag-and-drop behavior, including a handle, and uses the 'store' API to send the new order to the server via an AJAX POST request to the OpenContent API.

```javascript
(function ($) {
    $(document).ready(function () {
        initPage(document);
    });
    $(document).on("opencontent.change", function (event, element) {
        initPage(element);
    });
    function initPage(element) {
        $(".sortableList", element).each(function () {

            var moduleid = $(this).attr('data-moduleid');
            var sf = $.ServicesFramework(moduleid);

            var el = $(this)[0];
            Sortable.create(el, {
                handle: '.sorthandle',
                animation: 150,
                store: {
                    get: function (sortable) {
                        return [];
                    },
                    set: function (sortable) {
                        var order = sortable.toArray();
                        $.ajax({
                            type: "POST",
                            url: sf.getServiceRoot('OpenContent') + "OpenContentAPI/ReOrder",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            data: JSON.stringify(order),
                            beforeSend: sf.setModuleHeaders
                        }).done(function (data) {
                            
                        }).fail(function (xhr, result, status) {
                            console.error("Uh-oh, something broke: " + status);
                        });
                    }
                }
            });
        });
    }
}(jQuery));

```
Tokens:
Raw