Skip to content

Commit

Permalink
docs: Fix usage of passing info to a div and not the body (#5577)
Browse files Browse the repository at this point in the history
# Description
<!-- Please include a summary of the changes and the related issue.
Please also include relevant motivation and context. List any
dependencies that are required for this change. -->

NA
**Type of change**
<!-- Please delete options that are not relevant. Remember to title the
PR according to the type of change -->

- Documentation update

**How Has This Been Tested**
<!-- Please add some reference about how your feature has been tested.
-->

**Checklist**
<!-- Please go over the list and make sure you've taken everything into
account -->

- I added relevant documentation
  • Loading branch information
davidberenstein1957 authored Oct 7, 2024
1 parent 1e54a48 commit 037fbd1
Showing 1 changed file with 15 additions and 5 deletions.
20 changes: 15 additions & 5 deletions argilla/docs/how_to_guides/custom_fields.md
Original file line number Diff line number Diff line change
Expand Up @@ -178,8 +178,18 @@ When `advanced_mode=True`, you can use the `template` argument to pass a full HT
Let's reproduce example from the [Without advanced mode](#without-advanced-mode) section but this time we will insert the [handlebars syntax engine](https://handlebarsjs.com/) into the template ourselves.

```python
render_template = """
template = """
<div id="content"></div>
<script id="template" type="text/x-handlebars-template">
<style>
#container {
display: flex;
gap: 10px;
}
.column {
flex: 1;
}
</style>
<div id="container">
<div class="column">
<h3>Original</h3>
Expand All @@ -199,13 +209,13 @@ script = """
const template = document.getElementById("template").innerHTML;
const compiledTemplate = Handlebars.compile(template);
const html = compiledTemplate({ record });
document.body.innerHTML = html;
document.getElementById("content").innerHTML = html;
</script>
""" # (2)
```

1. This is a JavaScript template script. We set `id` to `template` to use it later in our JavaScript code and `type` to `text/x-handlebars-template` to indicate that this is a Handlebars template.
2. This is a JavaScript template script. We load the Handlebars library and then use it to compile the template and render the record.
1. This is a JavaScript template script. We set `id` to `template` to use it later in our JavaScript code and `type` to `text/x-handlebars-template` to indicate that this is a Handlebars template. Note that we also added a `div` with `id` to `content` to render the template into.
2. This is a JavaScript template script. We load the Handlebars library and then use it to compile the template and render the record. Eventually, we render the result into the `div` with `id` to `content`.

We can now pass these templates to the `CustomField` class, ensuring that the `advanced_mode` is set to `True`.

Expand All @@ -214,7 +224,7 @@ import argilla as rg

custom_field = rg.CustomField(
name="image",
template=render_template + script,
template=template + script,
advanced_mode=True
)
```
Expand Down

0 comments on commit 037fbd1

Please sign in to comment.