Skip to content

Html

Class: Code16\Sharp\Form\Fields\SharpFormHtmlField

This field is read-only, and is meant to display some dynamic information in the form.

Configuration

setInlineTemplate

Write the template as a string, using placeholders for data like this: where "var" is some key to data sent to the front

Example:

php
SharpFormHtmlField::make('panel')
    ->setInlineTemplate('This product is offline since <strong>{{date}}</strong>')
SharpFormHtmlField::make('panel')
    ->setInlineTemplate('This product is offline since <strong>{{date}}</strong>')

Like other fields, this example would mean that your transformed data has an object named panel containing a date attribute. Here more than elsewhere you may need to use a custom transformer, like this is this piece of code:

php
function find($id): array
    {
        return $this
            ->setCustomTransformer('panel', function($product) {
                return [
                    'date' => $product->deprecated_at->isoFormat()
                ];
            })
            ->transform(
                Product::findOrFail($id)
            );
    }
function find($id): array
    {
        return $this
            ->setCustomTransformer('panel', function($product) {
                return [
                    'date' => $product->deprecated_at->isoFormat()
                ];
            })
            ->transform(
                Product::findOrFail($id)
            );
    }

setTemplatePath

Use this if you need more control: give the path of a full template, in its own file.

The template will be interpreted by Vue.js, meaning you can add data placeholders, DOM structure but also directives, and anything that Vue will parse. For instance:

vue
<div v-if="show">result is {{value}}</div>
<div v-else>result is unknown</div>
<div v-if="show">result is {{value}}</div>
<div v-else>result is unknown</div>

Formatter

  • toFront: sent as provided.
  • fromFront: returns null (read-only).

Released under the MIT License.