Input

The silk:Input tag generate an input component use to show and edit data columns.

This can be contained in a silk:Form component to edit a series for columns in a record, or be used alone.

Tag Use

Used standalone:

<silk:Input
  id=""
  type=""
  name=""
  form=""
  label=""
  description=""
  width=""
  height="200px"
  scrollHeight=""
  block="false"
  placeholder=""
  maxLength=""
  dataSource=""
  valueColumn=""
  labelColumn=""
  linkedColumns=""
  required="false"
  editable="true"
  visible="true"
  scope="1"
  mask=""
  value=""
  mode="false"
  cssClass=""
  extraProperties=""
  htmlConfigFile="/ckeditor-conf/bar-simple.js"
  target=""
  prompt=""
  promptValue=""
  template=""
  filePreview="false"
  fileDownload="false"
  filePreviewLabel="Preview"
  fileDownloadLabel="Download"
  fileUploadLabel="Drag and drop file here, or click to select file."
  filePreviewClass="btn-primary"
  fileDownloadClass="btn-primary"
  filePreviewIcon="fas fa-file"
  fileDownloadIcon="fas fa-file-download"
  uploadURL=""
  fileTypeList=""
  fileSizeLimit=""
  renderIf=""
  targetPage=""
  timer=""
  toggleList=""
/>

Properties

*Required property.

id*

If used with a silk:Form the unique identifier is the name of the data column to be view or edited. Default Value: Empty.

type*

The input type: text, textarea, code, html, date, time, datetime, select, numeric, integer, decimal, checkbox, button, options, radio, password, file, email, hidden. Default Value: Empty.

name

The "name" of the input if used under a regular form HTML tag. Default Value: Empty.

form

The silk:Form the input will operate with. Default Value: Empty.

label

The text used as input's label. Default Value: Empty.

description

The input's description only show at editing mode. Default Value: Empty.

width

The width of the component in pixels or percentage. Default Value: Empty.

height

THe height of the component in case of the types: textarea, code, and html. Default Value: 200px.

scrollHeight

The height limit of the component in read mode before the content needs scrolling. Default Value: Empty.

block

If the component is the end of a block. Next Inputs will start in a new line. A "block" is activate when using the width property. Default Value: false.

placeholder

The input's place holder or helping text showed inside the input if supported. Default Value: Empty.

maxLength

The number of characters the input will allow. Default Value: Empty.

dataSource

The silk:DataProvider id which will provide the label and value list for inputs "select", "options", and "radio". Default Value: Empty.

valueColumn

The name of the column from the DataSource which will be used as the item's value. Only necessary if different than the inputs's id if used under the silk:Form. To use in select, options,and radio. Default Value: Empty.

labelColumn

The name of the column from the DataSource which will be used as the item's label. Default Value: Empty.

linkedColumns

Indicates the dataProvider's columns which will be updated in the dataSource. To use in select, options,and radio. Default Value: Empty.

required

The logic value or JavaScript expression to determine if the component should be required before data submission. Default Value: false.

editable

The logic value or JavaScript expression to determine if the component should be editable. Default Value: true.

visible

The logic value or JavaScript expression to determine if the component should be visible. Default Value: true.

scope

The component end target. The values can be. 0 : Force send even if not changed. 1 : If changed go to DataProvider and DB (default). 2 : If changed go to DataProvider only. 3 : Stay only in the input/Form. Default Value: 1.

mask

The input's entry mask or character filter. Mask values can be found here. Default Value: Empty.

value

To set the input value at initialization time. Default Value: Empty.

mode

To set the input mode at initialization time. If true it starts in data entry mode. If false it starts as view mode. Only valid if operating alone. The silk:Form overwrites this setting. Default Value: false.

cssClass

The extra CSS classes to use with the input element. Default Value: Empty.

extraProperties

To add extra HTML properties to the input not available using the silk:Input properties. Default Value: Empty.

htmlConfigFile

The JavaScript file containing the custom configuration for CKEditor. To be used with type "html". Default Value: /ckeditor-conf/bar-simple.js.

target

To indicate the HTML element in which inputs will be renderer to. Not necessary if used with silk:Form. Default Value: Empty.

prompt

Adds an extra options to the select usually use to request a value selection. Default Value: Empty.

promptValue

The value return by the select "prompt" if the user selects it. Default Value: Empty.

template

A HTML schema defining the component read view. Contains data columns encapsulated in {} and also HTML elements. Default Value: Empty.

filePreview

If the component will show a button to preview an uploaded file. To use with type file. Default Value: false.

fileDownload

If the component will show a button to download an uploaded file. To use with type file. Default Value: false.

filePreviewLabel

The label of the preview button. To use with type file. Default Value: Preview.

fileDownloadLabel

The label of the download button. To use with type file. Default Value: Download.

fileUploadLabel

The label of the download button. To use with type file. Default Value: Drag and drop file here, or click to select file..

filePreviewClass

The preview button Bootstrap class. To use with type file. Default Value: btn-primary.

fileDownloadClass

The download button Bootstrap class. To use with type file. Default Value: btn-primary.

filePreviewIcon

The preview button Font Awesome icon class. To use with type file. Default Value: fas fa-file.

fileDownloadIcon

The download button Font Awesome icon class. To use with type file. Default Value: fas fa-file-download.

uploadURL

The URL of the service uploading the file. To use with type file. Default Value: Empty.

fileTypeList

String containing the comma separated list of accepted file extension to be uploaded. To use with type file. Default Value: Empty.

fileSizeLimit

The number of MB allowed to be uploaded. To use with type file. Default Value: Empty.

renderIf

The logic expression to determine if the input will be rendered in the server side. The explanation on how to use the logic statement is found in Server Code Logic documentation. Default Value: Empty.

targetPage

The silk:Page's identifier which will be selected/show when the input is clicked when type is 'button'. Default Value: Empty.

timer

Sets data entry timer which will trigger the "timer" event. Default Value: Empty.

toggleList

The list of comma separated elements which will be toggle together with the component. The value "parent" toggles the immediate parent element. The value "grandpa" toggles the grandparent element. Default Value: Empty.