Personalizar una Plantilla

# Personalizar una Plantilla

Una vez que haya elegido un diseño de plantilla, será dirigido al editor de plantillas incorporado en la consola que le permite personalizar su plantilla y estilizarla según su preferencia. Para este documento de ayuda, ilustraremos la personalización de una plantilla usando la plantilla *Certificate*.

Tendrá secciones de editor respectivas para HTML, CSS y JavaScript para estilizar y personalizar su plantilla directamente en la consola, como se muestra a continuación.

<br />

### Usar LiquidJS para Personalizar sus Plantillas

Catalyst SmartBrowz soporta el uso de {{%link href="https://liquidjs.com/" %}}LiquidJS{{%/link%}} para personalizar sus plantillas. LiquidJS es un lenguaje de plantillas de código abierto popular que puede aprovechar para crear rápidamente plantillas que se adapten a sus requisitos.

El contenido, los datos JSON (datos dinámicos) que carga en su plantilla están sujetos a cambios según su requisito. Usar LiquidJS para personalizar sus plantillas le permite aprovechar los filtros nativos para manejar de manera fluida estos datos dinámicos.

Los datos dinámicos para su plantilla deberán pasarse como un payload JSON. Por ejemplo, considere que está usando la plantilla **Certificate**, entonces el payload JSON deberá verse así:

{{%code class="language-json" scroll="set-scroll" %}}{
  "name": "Michelle Mascarenhas",
  "workshop_name": "Serverless Computing",
  "event_duration": "one day",
  "event_description": "building cutting-edge cloud applications",
  "team_name": "Zylker Technologies ",
  "event_name": "Zylker Technologies Pvt. Ltd.,",
  "event_location": "Manhattan, NewYork",
  "event_date": "20th February 2025"
}{{%/code%}}

<br />

{{%note%}}{{%bold%}}Nota:{{%/bold%}} SmartBrowz actualmente soporta el runtime {{%badge%}}**v10**{{%/badge%}} de LiquidJS.{{%/note%}}

#### Sintaxis de LiquidJS

La siguiente tabla contiene la sintaxis necesaria de LiquidJS que puede aplicar a sus plantillas para personalizarlas y manejar datos JSON dinámicos.

<table class="content-table">
	<thead>
		<tr>
			<th class="w30p">Tipo de Etiqueta</th>
			<th class="w70p">Sintaxis LiquidJS</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>{{%bold%}}Output{{%/bold%}}</td>
			<td>{{%code class="language-javascript" scroll="set-scroll" %}}{{ user.name }}{{%/code%}}</td>
		</tr>
        <tr>
            <td>{{%bold%}}Logic (Control Flow){{%/bold%}}</td>
            <td>{{%code class="language-javascript" scroll="set-scroll"%}}{% if user.role == "admin" %}
  Welcome, Admin!
{% else %}
  Welcome, User!
{% endif %}{{%/code%}}</td>
        </tr>
        <tr>
            <td>{{%bold%}}Loops (For Statement){{%/bold%}}<br />Iteración sobre un array</td>
            <td>{{%code class="language-javascript" scroll="set-scroll"%}}{% for item in items %}
  {{ item.name }}
{% endfor %}{{%/code%}}</td>
        </tr>
        <tr>
            <td>{{%bold%}}Loops (For Statement){{%/bold%}}<br />Usando Objeto Iterable</td>
            <td>{{%code class="language-javascript" scroll="set-scroll"%}}{% for item in items %}
  {{ forloop.index }}: {{ item.name }}
{% endfor %}{{%/code%}}</td>
        </tr>
        <tr>
            <td>{{%bold%}}Filters{{%/bold%}}</td>
            <td>{{%code class="language-javascript" scroll="set-scroll"%}}{{ "hello" | append: " world" }}
{{ 1000 | divided_by: 2 }}
{{ "LiquidJS" | upcase }}{{%/code%}}</td>
        </tr>
        <tr>
            <td>{{%bold%}}Date Formatting{{%/bold%}}</td>
            <td>{{%code class="language-javascript" scroll="set-scroll"%}}{{ "now" | date: "%Y-%m-%d %H:%M:%S" }}
{{ "2025-02-07" | date: "%B %d, %Y" }}{{%/code%}}</td>
        </tr>
        <tr>
            <td>{{%bold%}}Assign and Capture{{%/bold%}}<br />Asignar variables dentro de plantillas</td>
            <td>{{%code class="language-javascript" scroll="set-scroll"%}}{% assign greeting = "Hello" %}
{{ greeting }} World{{%/code%}}</td>
        </tr>
        <tr>
            <td>{{%bold%}}Assign and Capture{{%/bold%}}<br />Capturar valores multilínea</td>
            <td>{{%code class="language-javascript" scroll="set-scroll"%}}{% capture message %}
  This is a multi-line text.
{% endcapture %}
{{ message }}{{%/code%}}</td>
        </tr>
        <tr>
            <td>{{%bold%}}Comments{{%/bold%}}</td>
            <td>{{%code class="language-javascript" scroll="set-scroll"%}}{% comment %}
  This is a comment and will not be rendered.
{% endcomment %}{{%/code%}}</td>
        </tr>
        <tr>
            <td>{{%bold%}}Default Filters{{%/bold%}}<br />Mostrará el valor que establezca como predeterminado, si no se proporciona ningún valor.</td>
            <td>{{%code class="language-javascript" scroll="set-scroll"%}}&lt;p&gt;Name: {{ user.name | default: "Guest" }}&lt;/p&gt;{{%/code%}}</td>
        </tr>
        <tr>
            <td>{{%bold%}}Conditionals with {{%badge%}}unless{{%/badge%}}{{%/bold%}}<br />Funciona como lo opuesto a una sentencia {{%badge%}}if{{%/badge%}}.<br />La lógica bajo un bloque {{%badge%}}unless{{%/badge%}} solo se ejecutará si la condición es falsa.</td>
            <td>{{%code class="language-javascript" scroll="set-scroll"%}}{% unless user.role == "admin" %}
  &lt;p&gt;You are not an Admin&lt;/p&gt;
{% endunless %}{{%/code%}}</td>
        </tr>
        <tr>
            <td>{{%bold%}}Case/When Conditions{{%/bold%}}</td>
            <td>{{%code class="language-javascript" scroll="set-scroll"%}}{% case user.role %}
  {% when "admin" %}
    &lt;p&gt;Admin Page&lt;/p&gt;
  {% when "user" %}
    &lt;p&gt;User Page&lt;/p&gt;
  {% else %}
    &lt;p&gt;Unknown Role&lt;/p&gt;
{% endcase %}{{%/code%}}</td>
        </tr>
        <tr>
            <td>{{%bold%}}Raw Output{{%/bold%}}<br />Se usa para imprimir código Liquid sin renderizarlo. Generalmente, se usa con fines de documentación</td>
            <td>{{%code class="language-javascript" scroll="set-scroll"%}}{% raw %}
  This is raw Liquid syntax: {{ user.name }}
{% endraw %}{{%/code%}}</td>
        </tr>
        <tr>
            <td>{{%bold%}}Array and Object Filters{{%/bold%}}</td>
            <td>{{%code class="language-javascript" scroll="set-scroll"%}}&lt;p&gt;First Item: {{ items | first }}&lt;/p&gt;
&lt;p&gt;Item Count: {{ items | size }}&lt;/p&gt;{{%/code%}}</td>
        </tr>
        <tr>
            <td>{{%bold%}}Math Filters{{%/bold%}}<br />Para usar operadores matemáticos dentro de la plantilla</td>
            <td>{{%code class="language-javascript" scroll="set-scroll"%}}&lt;p&gt;Discounted Price: {{ price | minus: 10 }}&lt;/p&gt;
&lt;p&gt;Total Price: {{ price | times: 1.1 }}&lt;/p&gt;{{%/code%}}</td>
        </tr>
        <tr>
            <td>{{%bold%}}Rendering Partial Templates{{%/bold%}}</td>
            <td>{{%code class="language-javascript" scroll="set-scroll"%}}{% render 'header' %}{{%/code%}}</td>
        </tr>
	</tbody>
</table>

{{%info%}}{{%bold%}}Info:{{%/bold%}} Puede obtener más información sobre LiquidJS en su documentación oficial {{%link href="https://liquidjs.com/" %}}aquí{{%/link%}}.{{%/info%}}

#### Ejemplo de Código HTML con LiquidJS

El siguiente fragmento de código sirve como ejemplo para ilustrar el uso de LiquidJS en el código HTML para personalizar su plantilla.

{{% panel_with_adjustment header="example.html" footer="button" scroll="set-scroll" class="language-xml linenumber" %}}&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Dashboard - {{ user.name }}&lt;/title&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;!-- Header --&gt;
  &lt;header&gt;
    &lt;h1&gt;Hello, {{ user.name | default: "Guest" }}&lt;/h1&gt;
    {% if user.role == "admin" %}
      &lt;p class="admin"&gt;You have administrator access.&lt;/p&gt;
    {% else %}
      &lt;p class="user"&gt;Standard user access granted.&lt;/p&gt;
    {% endif %}
  &lt;/header&gt;

&lt;!-- Items Section --&gt;
  &lt;section&gt;
    &lt;h2&gt;Your Items&lt;/h2&gt;
    &lt;ul&gt;
      {% for item in items %}
        &lt;li&gt;{{ forloop.index }}. {{ item.name }}&lt;/li&gt;
      {% endfor %}
    &lt;/ul&gt;
    &lt;p&gt; &lt;strong&gt;First Item:&lt;/strong&gt; {{ items | first | map: "name" }}&lt;/p&gt;
    &lt;p&gt; &lt;strong&gt;Total Items:&lt;/strong&gt; {{ items | size }}&lt;/p&gt;
  &lt;/section&gt;

&lt;!-- Pricing Section --&gt;
  &lt;section&gt;
    &lt;h2&gt;Price Breakdown&lt;/h2&gt;
    &lt;p&gt;Original Price: ${{ price }}&lt;/p&gt;
    &lt;p&gt;After Discount ($10 off): ${{ price | minus: 10 }}&lt;/p&gt;
    &lt;p&gt;After Tax (10%): ${{ price | times: 1.1 }}&lt;/p&gt;
    &lt;p&gt;Half Price: ${{ price | divided_by: 2 }}&lt;/p&gt;
  &lt;/section&gt;

&lt;!-- Time Section --&gt;
  &lt;section&gt;
    &lt;h2&gt;Date & Time&lt;/h2&gt;
    &lt;p&gt;Current Timestamp: {{ "now" | date: "%Y-%m-%d %H:%M:%S" }}&lt;/p&gt;
    &lt;p&gt;Next Billing Date: {{ "2025-02-07" | date: "%B %d, %Y" }}&lt;/p&gt;
  &lt;/section&gt;

&lt;!-- Custom Message --&gt;
  &lt;section&gt;
    &lt;h2&gt;Message&lt;/h2&gt;
    {% assign greeting = "Hello" %}
    &lt;p&gt;{{ greeting }} {{ user.name }}!&lt;/p&gt;

{% if custom_message %}
  &lt;div class="custom-message"&gt;
    {{ custom_message }}
  &lt;/div&gt;
{% else %}
  &lt;div class="custom-message"&gt;
    No custom message provided.
  &lt;/div&gt;
{% endif %}
  &lt;/section&gt;

&lt;!-- User Role Case --&gt;
  &lt;section&gt;
    &lt;h2&gt;Role Based Content&lt;/h2&gt;
    {% case user.role %}
      {% when "admin" %}
        &lt;p&gt;You are on the &lt;strong&gt;Admin Dashboard&lt;/strong&gt;.&lt;/p&gt;
      {% when "user" %}
        &lt;p&gt;You are on the &lt;strong&gt;User Dashboard&lt;/strong&gt;.&lt;/p&gt;
      {% else %}
        &lt;p class="alert"&gt;Unknown role. Please contact support.&lt;/p&gt;
    {% endcase %}

{% unless user.role == "admin" %}
      &lt;p class="alert"&gt;You are not an admin.&lt;/p&gt;
    {% endunless %}
  &lt;/section&gt;

&lt;!-- Raw Display --&gt;
  &lt;section&gt;
    &lt;h2&gt;Liquid Syntax Example&lt;/h2&gt;
    {% raw %}
      To print user name: {{ user.name }}
    {% endraw %}
  &lt;/section&gt;

&lt;/body&gt;
&lt;/html&gt;
{{% /panel_with_adjustment %}}

### Plantillas en Modo Borrador

Puede personalizar el código HTML, CSS y JavaScript según sus requisitos. Puede usar la sección JSON Data para pasar datos de entrada personalizados a la plantilla.

<br />

Para renderizar los cambios que realice en el editor, puede hacer clic en el botón **Save as Draft**.

<br />

Esto le permitirá ver los cambios que realice en su plantilla sin afectar la versión publicada.

<br />

Siempre puede ver la versión publicada de la plantilla haciendo clic en el botón **View Published Version**.

<br />

Una vez que haya completado las ediciones requeridas, puede renderizarlas en vivo haciendo clic en el botón **Save & Publish**.

<br />

Esta acción **eliminará la versión en vivo actual** y renderizará su borrador como la versión en vivo de la plantilla.

### Descartar Borradores

Si no está satisfecho con sus ediciones y desea eliminar todos los cambios en su borrador, es decir, restaurar su plantilla a su última versión publicada, simplemente puede descartar el borrador.

Para descartar un borrador:

1. Haga clic en el botón **Discard Draft**.
    <br />

2. Haga clic en **Confirm** para descartar el borrador.
    <br />

El borrador será eliminado. El código y las configuraciones que renderizan su plantilla a la última versión en vivo serán restaurados en el editor.

### Personalizar la Orientación y el Diseño de la Plantilla

Usando la sección **Settings**, puede proteger con contraseña su documento visual, estilizar el diseño y la orientación del documento y también decidir su formato de salida.
<br />

En esta sección, use las diversas selecciones desplegables para personalizar las siguientes características de su plantilla:

#### Formato de Salida

Puede generar salidas para su plantilla en los siguientes formatos:

* PDF
* HTML (Rendered): El formato de salida **HTML (Rendered)** descarga la plantilla como código HTML. Todo el estilo, las configuraciones y la plantilla en sí serán descargables como código HTML.
* PNG, JPEG. 
<br />

#### Tamaño de Papel

SmartBrowz Templates le proporciona todas las opciones de tamaño de papel **ISO 216** incluyendo una opción *Custom* para diseñar el diseño de papel de su plantilla

<br />

#### Orientación

SmartBrowz Templates le proporciona la opción de elegir la orientación de su plantilla. Tiene la opción de generar su plantilla en orientación **Landscape** o **Portrait**.

<br />

#### Gráficos de Fondo

SmartBrowz Templates le proporciona la opción de **Enable** o **Disable** los gráficos de fondo para su plantilla.

<br />

#### Opciones de Estilo Avanzadas

Puede cambiar aún más la orientación de los márgenes de su plantilla, haciendo clic en **Show Advanced Styling Options**.
<br />

{{%note%}}{{%bold%}}Nota:{{%/bold%}}

* Al configurar el {{%italics%}}Header{{%/italics%}} y el {{%italics%}}Footer{{%/italics%}} de su documento, puede proporcionar valores en el campo de entrada, o puede codificar su personalización en HTML seleccionando la opción {{%bold%}}HTML Code{{%/bold%}}.

* Al ingresar valores para el {{%italics%}}Header{{%/italics%}} y el {{%italics%}}Footer{{%/italics%}}, asegúrese de proporcionar 10px o más para ver el cambio en la sección de vista previa.{{%/note%}}

### PDFs Protegidos con Contraseña

*Templates* le permite proteger con contraseña los documentos que se generan usando una plantilla. Puede establecer manualmente la contraseña para su plantilla, o puede codificar una lógica que instruya a Catalyst para establecer una contraseña dinámicamente.

{{%note%}}{{%bold%}}Nota:{{%/bold%}} Para proteger con contraseña su documento visual, el {{%italics%}}Output Format{{%/italics%}} de su documento debe ser PDF.{{%/note%}}

Para proteger PDFs con contraseña, haga clic en el toggle **Set Password for PDF**:
<br />

1. Hay dos formas en las que puede establecer una contraseña para su PDF:

* De forma predeterminada, la opción **Set Password Manually** estará seleccionada. Elegir esta opción le permite establecer la contraseña para su PDF en la sección *Playground* del componente {{%link href="/es/smartbrowz/help/pdfnscreenshot/introduction/" %}}PDF & Screenshot{{%/link%}}.
        <br />

{{%note%}}{{%bold%}}Nota:{{%/bold%}} También puede establecer manualmente la contraseña para su PDF usando esta {{%link href="/es/api/code-reference/smartbrowz/generate-pdfnscreenshottemplate/#PDF%26ScreenshotwithTemplateasInput" %}}API{{%/link%}} pasando su contraseña para el documento como un par clave-valor JSON "{{%bold%}}password{{%/bold%}}" dentro del JSON "{{%badge%}}pdf_options{{%/badge%}}".{{%/note%}}

* Haga clic en la opción **Set Password Dynamically** para codificar una lógica personalizada que asegure que cada vez que se genere un PDF a partir de la plantilla, basándose en la lógica que codificó, se establecerá una contraseña para el documento automáticamente.
        <br />
Para esta documentación de ayuda, hemos implementado el fragmento de código que se muestra a continuación:
{{% panel_with_adjustment header="Sample Logic" footer="button" class="language-javascript linenumber" scroll="set-scroll" %}}module.exports = (jsonData) => {
    // Extraer las primeras cuatro letras de client.name
    const clientName = jsonData.client.data[0].name.trim(); // Eliminar espacios al inicio/final
    const firstNameLetters = clientName.substring(0, 4);
    // Extraer los últimos cuatro dígitos de client.phn
    const clientPhone = jsonData.client.data[0].phn.trim(); // Eliminar espacios al inicio/final
    const lastFourDigits = clientPhone.slice(-4);
    const password = ${firstNameLetters}${lastFourDigits};
    //así la contraseña será "Amel2782"

return password;
};
{{% /panel_with_adjustment %}}

El valor para la entrada {{%badge%}}jsonData{{%/badge%}} se muestra a continuación:
{{% panel_with_adjustment header="jsonData" footer="button" class="language-json linenumber" scroll="set-scroll" %}}{
    "address": {
        "name": "107 Traction Street,Green Ville",
        "postal": "South carolina-600028"
    },
    "client": {
        "data": [
            {
                "name": "Amelia Burrows",
                "phn": "+1-212-6782782",
                "start": "Monday,Feburary,28,2019",
                "end": "Monday,March,28,2019"
            }
        ]
    }
}
{{% /panel_with_adjustment %}}

El documento PDF generado a partir de esta plantilla tendrá un patrón de contraseña que es una combinación de su nombre y los últimos dígitos de su número de teléfono.

2. Haga clic en **Save & Publish**, para aplicar la protección con contraseña a su plantilla.

{{%note%}}{{%bold%}}Nota:{{%/bold%}} Si hace clic en {{%bold%}}Save as Draft{{%/bold%}}, entonces la protección con contraseña no se aplicará a la versión en vivo de la plantilla.{{%/note%}}

Una vez que haya completado todas las personalizaciones de su plantilla, puede acceder a esta plantilla en cualquier momento desde el componente *Templates*.

<br />

Tendrá secciones de editor respectivas para HTML, CSS y JavaScript para estilizar y personalizar su plantilla directamente en la consola, como se muestra a continuación.

Usar LiquidJS para Personalizar sus Plantillas

Catalyst SmartBrowz soporta el uso de LiquidJS para personalizar sus plantillas. LiquidJS es un lenguaje de plantillas de código abierto popular que puede aprovechar para crear rápidamente plantillas que se adapten a sus requisitos.

Los datos dinámicos para su plantilla deberán pasarse como un payload JSON. Por ejemplo, considere que está usando la plantilla Certificate, entonces el payload JSON deberá verse así:

copy

         {
  "name": "Michelle Mascarenhas",
  "workshop_name": "Serverless Computing",
  "event_duration": "one day",
  "event_description": "building cutting-edge cloud applications",
  "team_name": "Zylker Technologies ",
  "event_name": "Zylker Technologies Pvt. Ltd.,",
  "event_location": "Manhattan, NewYork",
  "event_date": "20th February 2025"
}
    

Nota: SmartBrowz actualmente soporta el runtime v10 de LiquidJS.

Sintaxis de LiquidJS

La siguiente tabla contiene la sintaxis necesaria de LiquidJS que puede aplicar a sus plantillas para personalizarlas y manejar datos JSON dinámicos.

Tipo de Etiqueta	Sintaxis LiquidJS
Output	copy `{{ user.name }}`
Logic (Control Flow)	copy `{% if user.role == "admin" %} Welcome, Admin! {% else %} Welcome, User! {% endif %}`
Loops (For Statement) Iteración sobre un array	copy `{% for item in items %} {{ item.name }} {% endfor %}`
Loops (For Statement) Usando Objeto Iterable	copy `{% for item in items %} {{ forloop.index }}: {{ item.name }} {% endfor %}`
Filters	copy `{{ "hello" \| append: " world" }} {{ 1000 \| divided_by: 2 }} {{ "LiquidJS" \| upcase }}`
Date Formatting	copy `{{ "now" \| date: "%Y-%m-%d %H:%M:%S" }} {{ "2025-02-07" \| date: "%B %d, %Y" }}`
Assign and Capture Asignar variables dentro de plantillas	copy `{% assign greeting = "Hello" %} {{ greeting }} World`
Assign and Capture Capturar valores multilínea	copy `{% capture message %} This is a multi-line text. {% endcapture %} {{ message }}`
Comments	copy `{% comment %} This is a comment and will not be rendered. {% endcomment %}`
Default Filters Mostrará el valor que establezca como predeterminado, si no se proporciona ningún valor.	copy `<p>Name: {{ user.name \| default: "Guest" }}</p>`
Conditionals with unless Funciona como lo opuesto a una sentencia if. La lógica bajo un bloque unless solo se ejecutará si la condición es falsa.	copy `{% unless user.role == "admin" %} <p>You are not an Admin</p> {% endunless %}`
Case/When Conditions	copy `{% case user.role %} {% when "admin" %} <p>Admin Page</p> {% when "user" %} <p>User Page</p> {% else %} <p>Unknown Role</p> {% endcase %}`
Raw Output Se usa para imprimir código Liquid sin renderizarlo. Generalmente, se usa con fines de documentación	copy `{% raw %} This is raw Liquid syntax: {{ user.name }} {% endraw %}`
Array and Object Filters	copy `<p>First Item: {{ items \| first }}</p> <p>Item Count: {{ items \| size }}</p>`
Math Filters Para usar operadores matemáticos dentro de la plantilla	copy `<p>Discounted Price: {{ price \| minus: 10 }}</p> <p>Total Price: {{ price \| times: 1.1 }}</p>`
Rendering Partial Templates	copy `{% render 'header' %}`

Info: Puede obtener más información sobre LiquidJS en su documentación oficial aquí.

Ejemplo de Código HTML con LiquidJS

El siguiente fragmento de código sirve como ejemplo para ilustrar el uso de LiquidJS en el código HTML para personalizar su plantilla.

example.html
copy

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dashboard - {{ user.name }}</title>
</head>
<body>
<!– Header –>
<header>
<h1>Hello, {{ user.name | default: “Guest” }}</h1>
{% if user.role == “admin” %}
<p class=“admin”>You have administrator access.</p>
{% else %}
<p class=“user”>Standard user access granted.</p>
{% endif %}
</header>
<!– Items Section –>
<section>
<h2>Your Items</h2>
<ul>
{% for item in items %}
<li>{{ forloop.index }}. {{ item.name }}</li>
{% endfor %}
</ul>
<p> <strong>First Item:</strong> {{ items | first | map: “name” }}</p>
<p> <strong>Total Items:</strong> {{ items | size }}</p>
</section>
<!– Pricing Section –>
<section>
<h2>Price Breakdown</h2>
<p>Original Price: ${{ price }}</p>
<p>After Discount ($10 off): ${{ price | minus: 10 }}</p>
<p>After Tax (10%): ${{ price | times: 1.1 }}</p>
<p>Half Price: ${{ price | divided_by: 2 }}</p>
</section>
<!– Time Section –>
<section>
<h2>Date & Time</h2>
<p>Current Timestamp: {{ “now” | date: “%Y-%m-%d %H:%M:%S” }}</p>
<p>Next Billing Date: {{ “2025-02-07” | date: “%B %d, %Y” }}</p>
</section>
<!– Custom Message –>
<section>
<h2>Message</h2>
{% assign greeting = “Hello” %}
<p>{{ greeting }} {{ user.name }}!</p>
{% if custom_message %}
<div class=“custom-message”>
{{ custom_message }}
</div>
{% else %}
<div class=“custom-message”>
No custom message provided.
</div>
{% endif %}
</section>
<!– User Role Case –>
<section>
<h2>Role Based Content</h2>
{% case user.role %}
{% when “admin” %}
<p>You are on the <strong>Admin Dashboard</strong>.</p>
{% when “user” %}
<p>You are on the <strong>User Dashboard</strong>.</p>
{% else %}
<p class=“alert”>Unknown role. Please contact support.</p>
{% endcase %}
{% unless user.role == "admin" %}
  &lt;p class="alert"&gt;You are not an admin.&lt;/p&gt;
{% endunless %}

</section>
<!– Raw Display –>
<section>
<h2>Liquid Syntax Example</h2>
{% raw %}
To print user name: {{ user.name }}
{% endraw %}
</section>
</body>
</html>

Plantillas en Modo Borrador

Puede personalizar el código HTML, CSS y JavaScript según sus requisitos. Puede usar la sección JSON Data para pasar datos de entrada personalizados a la plantilla.

Para renderizar los cambios que realice en el editor, puede hacer clic en el botón Save as Draft.

Esto le permitirá ver los cambios que realice en su plantilla sin afectar la versión publicada.

Siempre puede ver la versión publicada de la plantilla haciendo clic en el botón View Published Version.

Una vez que haya completado las ediciones requeridas, puede renderizarlas en vivo haciendo clic en el botón Save & Publish.

Esta acción eliminará la versión en vivo actual y renderizará su borrador como la versión en vivo de la plantilla.

Descartar Borradores

Si no está satisfecho con sus ediciones y desea eliminar todos los cambios en su borrador, es decir, restaurar su plantilla a su última versión publicada, simplemente puede descartar el borrador.

Para descartar un borrador:

Haga clic en el botón Discard Draft.
Haga clic en Confirm para descartar el borrador.

El borrador será eliminado. El código y las configuraciones que renderizan su plantilla a la última versión en vivo serán restaurados en el editor.

Personalizar la Orientación y el Diseño de la Plantilla

Usando la sección Settings, puede proteger con contraseña su documento visual, estilizar el diseño y la orientación del documento y también decidir su formato de salida.

En esta sección, use las diversas selecciones desplegables para personalizar las siguientes características de su plantilla:

Formato de Salida

Puede generar salidas para su plantilla en los siguientes formatos:

PDF
HTML (Rendered): El formato de salida HTML (Rendered) descarga la plantilla como código HTML. Todo el estilo, las configuraciones y la plantilla en sí serán descargables como código HTML.
PNG, JPEG.

Tamaño de Papel

SmartBrowz Templates le proporciona todas las opciones de tamaño de papel ISO 216 incluyendo una opción Custom para diseñar el diseño de papel de su plantilla

Orientación

SmartBrowz Templates le proporciona la opción de elegir la orientación de su plantilla. Tiene la opción de generar su plantilla en orientación Landscape o Portrait.

Gráficos de Fondo

SmartBrowz Templates le proporciona la opción de Enable o Disable los gráficos de fondo para su plantilla.

Opciones de Estilo Avanzadas

Puede cambiar aún más la orientación de los márgenes de su plantilla, haciendo clic en Show Advanced Styling Options.

Nota:

Al configurar el Header y el Footer de su documento, puede proporcionar valores en el campo de entrada, o puede codificar su personalización en HTML seleccionando la opción HTML Code.
Al ingresar valores para el Header y el Footer, asegúrese de proporcionar 10px o más para ver el cambio en la sección de vista previa.

PDFs Protegidos con Contraseña

Templates le permite proteger con contraseña los documentos que se generan usando una plantilla. Puede establecer manualmente la contraseña para su plantilla, o puede codificar una lógica que instruya a Catalyst para establecer una contraseña dinámicamente.

Nota: Para proteger con contraseña su documento visual, el Output Format de su documento debe ser PDF.

Para proteger PDFs con contraseña, haga clic en el toggle Set Password for PDF:

Hay dos formas en las que puede establecer una contraseña para su PDF:
- De forma predeterminada, la opción Set Password Manually estará seleccionada. Elegir esta opción le permite establecer la contraseña para su PDF en la sección Playground del componente PDF & Screenshot.
Nota: También puede establecer manualmente la contraseña para su PDF usando esta API pasando su contraseña para el documento como un par clave-valor JSON "password" dentro del JSON "pdf_options".
- Haga clic en la opción Set Password Dynamically para codificar una lógica personalizada que asegure que cada vez que se genere un PDF a partir de la plantilla, basándose en la lógica que codificó, se establecerá una contraseña para el documento automáticamente.
  Para esta documentación de ayuda, hemos implementado el fragmento de código que se muestra a continuación:

Sample Logic
copy

module.exports = (jsonData) => {
    // Extraer las primeras cuatro letras de client.name
    const clientName = jsonData.client.data[0].name.trim(); // Eliminar espacios al inicio/final
    const firstNameLetters = clientName.substring(0, 4);
    // Extraer los últimos cuatro dígitos de client.phn
    const clientPhone = jsonData.client.data[0].phn.trim(); // Eliminar espacios al inicio/final
    const lastFourDigits = clientPhone.slice(-4);
    const password = ${firstNameLetters}${lastFourDigits};
    //así la contraseña será "Amel2782"
 return password;

};

El valor para la entrada jsonData se muestra a continuación:

jsonData
copy
{
    "address": {
        "name": "107 Traction Street,Green Ville",
        "postal": "South carolina-600028"
    },
    "client": {
        "data": [
            {
                "name": "Amelia Burrows",
                "phn": "+1-212-6782782",
                "start": "Monday,Feburary,28,2019",
                "end": "Monday,March,28,2019"
            }
        ]
    }
}
View more

El documento PDF generado a partir de esta plantilla tendrá un patrón de contraseña que es una combinación de su nombre y los últimos dígitos de su número de teléfono.

Haga clic en Save & Publish, para aplicar la protección con contraseña a su plantilla.

Nota: Si hace clic en Save as Draft, entonces la protección con contraseña no se aplicará a la versión en vivo de la plantilla.

Una vez que haya completado todas las personalizaciones de su plantilla, puede acceder a esta plantilla en cualquier momento desde el componente Templates.

Última actualización 2026-03-30 13:40:30 +0530 IST

Yes

Thank you for your feedback!

Send your feedback to us

Skip

Submit

PILA DE FUNCIONES

Personalizar una Plantilla

Usar LiquidJS para Personalizar sus Plantillas

Sintaxis de LiquidJS

Ejemplo de Código HTML con LiquidJS

Plantillas en Modo Borrador

Descartar Borradores

Personalizar la Orientación y el Diseño de la Plantilla

Formato de Salida

Tamaño de Papel

Orientación

Gráficos de Fondo

Opciones de Estilo Avanzadas

PDFs Protegidos con Contraseña