--- title: Writing transformations --- > Agent instructions: > **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown. > > - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version. > - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt). Transformations are a crucial part of the process used to display pages and other data in Kentico. A transformation is a code template that determines how listing web parts and controls render content. Data sources provide a collection of items containing raw data, and transformations convert the data into appropriately formatted page output code (HTML). The functionality of transformations is very similar to that of item templates used by standard ASP.NET list controls, such as the Repeater. The main difference is that the system stores transformations as virtual objects in the database, and you can easily reuse transformations for different components. Transformations are categorized under the objects whose data they display. You can manage transformations for: - [Page types](https://docs.kentico.com/k12sp/developing-websites/defining-website-content-structure/creating-and-configuring-page-types.md) (**Page types -> Edit a page type -> Transformations**) - [Container page types](https://docs.kentico.com/k12sp/developing-websites/defining-website-content-structure/creating-and-configuring-page-types/creating-container-page-types.md) do not represent actual objects on the website, but only serve as containers for transformations. Use container page types to store transformations that you want to share among multiple page types. - [Custom tables](https://docs.kentico.com/k12sp/developing-websites/defining-website-content-structure/managing-custom-tables.md) (**Custom tables -> Edit a table -> Transformations**) To assign transformations to listing web parts or controls, use the available **Transformation** properties. Transformations are supported by all data listing web parts, as well as by [listing controls](https://docs.kentico.com/k12sp/developing-websites/kentico-controls/cms-controls.md) that are designed to work with Kentico pages. The full name that identifies transformations is in format _**.**_.  > **Note:** Note that transformation names can not contain the dot '.' character. Including dots in transformation names could cause unwanted system behavior. The Kentico sample sites include many transformations for all built-in page types. ## Transformation types You can use several different approaches when writing the code of transformations. The following transformation types are available: | Transformation type | Description | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ASCX | The code of the transformation supports ASCX markup, i.e. the same syntax that you would use to edit standard web forms or user controls. This includes:
Embedded controls (user controls or [server controls](https://docs.kentico.com/k12sp/developing-websites/kentico-controls.md), see the [Writing transformations](#transformation-example))
Inline code (Kentico API, standard ASP.NET data binding expressions, special methods designed for use in transformations)
To access the fields of the transformed page or custom table, use data binding expressions in format: __**Note:** **Notes**
For security reasons, only users who have the **Edit ASCX** code [permission](https://docs.kentico.com/k12sp/managing-users/configuring-permissions/configuring-design-permissions.md) for the **Design** module may edit the code of ASCX transformations. This permission can only be assigned by users with the Global administrator [privilege level](https://docs.kentico.com/k12sp/managing-users/user-management.md).
ASCX transformations need to be compiled, so you cannot create or edit them on [precompiled ](https://docs.kentico.com/k12sp/deploying-websites/publishing-projects-from-visual-studio.md) applications.
ASCX transformations do NOT support [macro expressions](https://docs.kentico.com/k12sp/macro-expressions.md).
We do NOT recommend using web parts within the code of transformations. This could lead to poor performance and certain web parts may not work correctly within transformations due to their life cycle. | | Text/XML | The system processes the code of _Text/XML_ transformations as basic HTML. ASCX markup (controls or inline code) does not work. You can use Kentico [macro expressions](https://docs.kentico.com/k12sp/macro-expressions.md) and methods to insert dynamic values into the content.
To access the fields of the transformed page, custom table item or object, use expressions in format: _{% ColumnName %}_**Tip:** **Tip**: If a field of the transformed data object contains characters that conflict with the [macro syntax](https://docs.kentico.com/k12sp/macro-expressions/macro-syntax.md) (for example when using an XML data source), use the _DataItem_ macro object and indexing to access the field value.
For example: _{% DataItem\["column-name"] %}_
Text transformations have the following advantages:
No compilation required. You can create and edit text transformations even in environments where compilation of virtual objects is not possible, for example on [precompiled](https://docs.kentico.com/k12sp/deploying-websites/publishing-projects-from-visual-studio.md) websites.
Text transformations do not allow users to execute inline code, so they cannot be used to compromise the security of the website. | | HTML | Work the same way as **Text/XML** transformations, but you edit the content through the [WYSIWYG editor](https://docs.kentico.com/k12sp/configuring-kentico/configuring-the-environment-for-content-editors/configuring-the-editor.md). The editor shows the rendered output of the transformation's HTML code. | | XSLT | Use XSL elements to render the data. The code must be in valid XML format.
When creating XSLT transformations for displaying pages, set the **match** attribute of the **** element to _**Table**_.
` ... ` | | jQuery | Provide a way to define the jQuery templates used by:
The [Chat](https://docs.kentico.com/k12sp/community-features/chat.md) application
Integrated [Strands recommendations](https://docs.kentico.com/k12sp/integrating-3rd-party-systems/strands-recommender-integration.md) | ## Transformation example The following is the code of the **CorporateSite.Transformations.ProductList** ASCX transformation, which displays lists of products on the sample Corporate Site: ```xml title="ASCX transformation code" <%@ Register Src="~/CMSModules/Ecommerce/Controls/ProductOptions/ShoppingCartItemSelector.ascx" TagName="CartItemSelector" TagPrefix="uc1" %>
##editbuttons##
<%# EvalText(" />
<%# EvalText("SKUName", true) %>
<%# GetSKUFormattedPrice() %>
``` When assigned to a listing web part or control that has products (SKUs) in its data source, the output HTML code of individual products contains values returned by the methods and data binding expressions, like in the following example (part of the code is omitted to save space): ```xml title="HTML output"
Apple iPhone 4 with inscription
Apple iPhone 4 with inscription
$759.99
...
``` The final output of the product on the website then looks like this: ![A product displayed on a page](https://docs.kentico.com/docsassets/k12sp/writing-transformations/image2013-3-29+13-7-7.png "A product displayed on a page") ## Adding CSS styles to transformations You can define the CSS classes used in transformation code either in the [stylesheets of the website](https://docs.kentico.com/k12sp/developing-websites/designing-websites-using-css.md) or individual pages, or add them directly to the transformation object (we only recommend this approach for testing purposes). To add styles to transformations: 1. Edit the transformation on the **General** tab. 2. Click **Add CSS styles** below the code editor. The **CSS styles** field appears, where you can add any required CSS classes. 3. Click **Save**. If the styles require any additional files (such as images), you can add them on the **Theme** tab. For more information about page component CSS styles, see [Adding CSS to page components](https://docs.kentico.com/k12sp/developing-websites/designing-websites-using-css/adding-css-to-page-components.md).