# How to display links in form?

Imagine you have a movie directory where you track various attributes such as title, year of production, IMDB link, ranking, etc. You want to include a link to the IMDB page for each movie. For example, "The Shawshank Redemption" would link to <https://www.imdb.com/title/tt0111161>.

Here are several methods to achieve this:

## Method 1: Displaying a link in rich-text field[​](#method-1-displaying-a-link-in-rich-text-field "Direct link to Method 1: Displaying a link in rich-text field")

1. **Create a rich text field**: in `fields/index.ts` - with 1-row visibility for compactness.

fields/index.ts

```
{
    caption: 'Link to movie',
    name: 'c_rich_text_link',
    options: {
        text_min_visible_rows: 1,
    },
    textType: 'richtext',
    type: 'text',
},
{
    caption: 'IMDB id',
    name: 'c_imdb_id',
    type: 'text',
},
```

2. **Add to layout**: place the field on the layout as read-only (`mode="plain"`)

views/layouts/default.tsx

```
<section caption="Movie details">
    <column>
        <field name="c_rich_text_link" mode="plain" widthFactor="2" />
        ...
    </column>
</section>
```

3. **Generate the link**: when saving the record, create the link using the IMDB id stored in `c_imdb_id` in `actions/logic/index.ts`

actions/logic/index.ts

```
const url = `https://www.imdb.com/title/${c_imdb_id}`
entity.c_rich_text_link = `<a href="${url}">${url}</a>`
```

4. **Result**: the link will appear as shown below:
   <!-- -->
   ![Record form showing a clickable IMDB link rendered inside a read-only rich-text field](/assets/images/link-as-rich-text-f0174b3b917f728a1a383291020f4b27.png)

## Method 2: Using a linked field[​](#method-2-using-a-linked-field "Direct link to Method 2: Using a linked field")

1. **Configure the IMDB ID field**: instead of adding a new field, enhance the existing IMDB id field with 2 additional options:

fields/index.ts

```
{
    caption: 'IMDB id',
    name: 'c_imdb_id',
    options: {
        formatting_external_url_base: 'https://www.imdb.com/title/',
        formatting_icon: 'fas fa-up-right-from-square',
    },
    type: 'text',
},
```

2. **Result**: when the field is populated, it will render as a clickable link:

   ![Record form showing the IMDB id field with a clickable external link icon next to the value](/assets/images/linked-field-d476b787179dab4bbe2e06c1e75e5fec.png)

## Method 3: Rendering a link in a custom-layout[​](#method-3-rendering-a-link-in-a-custom-layout "Direct link to Method 3: Rendering a link in a custom-layout")

1. **Create a custom layout**: in a new file `custom_layout_imdb.tsx` in the `views/layouts` folder:

views/layouts/custom\_layout\_imdb.tsx

```
/** @jsx entity */
import { entity } from '#typings';
export default (
	<layout>
		<div style="padding:10px;margin:10px 5px;border:2px solid #ccc;border-radius: 5px;">
			<div ngBindHtml="ui.movieLink"></div>
			<div>
				Rank: <b>9.3</b>/10
			</div>
		</div>
	</layout>
);
```

2. **Integrate into default layout**: insert this to the `default.tsx` layout:

views/layouts/default.tsx

```
<section caption="Movie details">
    <column>
        <field name="c_imdb_id" />
        <custom-layout name="custom_layout_imdb" />
    </column>
</section>
```

3. **Initialize the link**: in `views/logic/index.ts` - initialize `movieLink` variable:

views/logic/index.ts

```
export default {
	onReady,
} satisfies ViewLogic<typeof entity>;

function onReady() {
	const url = `https://www.imdb.com/title/${entity.c_imdb_id}`;
	ComindView.ui.movieLink = `IMDB: <a href="${url}">${url}</a>`;
}
```

4. **Result**: The custom layout will be rendered as follows:
   <!-- -->
   ![Record form showing a custom layout section with a styled IMDB link and rating display](/assets/images/link-in-custom-layout-f3148abf822ac751b17d76d2f91ed97a.png)

## Related[​](#related "Direct link to Related")

* [Form layouts](/developer-guide/building-blocks/form-layouts.md) - the JSX-to-XML factory, layout elements, and custom layouts reference
* [View logic](/developer-guide/building-blocks/view-logic.md) - `onReady` and other lifecycle hooks used to set `ComindView.ui` properties
* [Fields and field options](/developer-guide/building-blocks/fields-and-field-options.md) - field options like `formatting_external_url_base` and `formatting_icon`