Logo

    Home

    Documentation

    Use Cases

    Training

    Applications

    Release Notes

    CK Editor

    CK Editor

    • CKEditor 5
    • Setup
    • Customization
    • CLAPI
    • Samples

    CKEditor 5

    CKEditor 5 was integrated in SWAT. The new editor can be used in both a form or a panel, through the existing object types: SwatText (SimpleSwatText) for Panel and SwatRichText (SimpleSwatRichText) for the Form.

    Some setup steps will be necessary to use the new version. The old CK4 version is still available in SWAT and can be used alongside the new version.

    💡
    Current Limitations Right now, CK5 customization is limited. The editor is shipped with the classic build and a predefined toolbar, which contains the following items: 'bold', 'italic', 'link', 'undo', 'redo'.

    This will be expanded in the future to allow for customization similar to CK4.

    A list of feature parity should also be provided.

    Setup

    As mentioned above, if we want to used the new screen, we can drag and drop the existing object types in the designer: SwatText or SwatRichText. We will need to manually change two attributes in order to make this work. See below tables for each case.

    SwatText

    CK4 (default)
    CK5
    UIComponent
    form/Ittext
    CKEditor
    UIComponentAlias
    ittext
    ckEditor

    SwatRichText

    CK4 (default)
    CK5
    UIComponent
    form/Richtext
    CKRichEditor
    UIComponentAlias
    richtext
    ckRichEditor

    Customization

    For now, the following options are customizable/useable with CK5:

    SwatText
    SwatRichText
    ENABLED
    Determines if the editor is read-only or now. For the Panel, this will also change the toolbar to the read-only version (without save buttons).
    Determines if the editor is read-only or now. For the Panel, this will also change the toolbar to the read-only version (without save buttons).
    typeRange
    Same functionality with CK4.
    Same functionality with CK4.
    EventAKAfterSave
    Event called after save is triggered.
    -
    EventOnCustomStateChange
    Event called with custom state is change.
    Event called with custom state is change.
    eventOnInitialize
    Event called when editor is initialized on screen launch.
    -
    eventOnStateChanged
    Event called on blur when value in the editor is changed; this will trigger the dirty state which will alert the user if unsaved changes are present on close/record switch.
    Event called on blur when value in the editor is changed; this will trigger the dirty state which will alert the user if unsaved changes are present on close/record switch.
    BorderTitle
    Title to be displayed on the editor panel.
    -
    Mandatory
    -
    Sets the field as mandatory or not. Can also be set programmatically.
    EventAKValidate
    -
    Event triggered on blur, whenever the value in the editor is changed.
    EventEntry
    -
    Called when focusing inside the editor.
    EventLeave
    -
    Called when focusing outside the editor.
    EventOnInfoSelected
    -
    Info button which shows up next to the label.
    LABEL
    -
    Sets the field label in the form.
    HEIGHT-CHARS
    -
    The number of rows the field will have in the form. In the form, the height is always fixed, calculated based on this attribute. In the panel, the height of the editor will resize to take up the entire space.

    More info regarding custom states: :

    Also supported are the SwatDevTools and field notes, which add additional debug info:

    image

    Programatically, most of the functionality should also work for the form field:

    • enableFormField/disableFormField
    • showFormField/hideFormField
    • setFormFieldNote
    • formDisableEnableFields
    • setValue/getValue
    • getFieldNoteValue
    • getFieldIsHidden
    • getFieldIsVisible
    • getFieldIsEnabled/getFieldIsDisabled
    • setAllFormFieldsReadonly
    • enableAllFields/disableAllFields
    • getFieldIsRequired/setRequired
    • setValidationRule/deleteValidationRule
    • setFieldLabel
    • getFormData
    • getFieldsHasChanges
    • getFieldHasErrors
    • getFormFieldEnabled
    • setFieldHasChanges/getFieldHasChanges
    • setLabel

    Currently not working:

    • setAnonymisedControl

    CLAPI

    Support for CLAPI was also added, similar to the old CK4. The class supports the same methods as the old one, plus any additional inherited functionality:

    get: plainValue and screenValue

    set: screenValue

    Samples

    Two sample screens were added, where the used can change the description of application users: SampleCK5dialog and SampleCK4dialog.

    This illustrates the differences between CK4 and CK5. Keep in mind, CK5 is a new library with new features. Hence, some of the old features/options might not be available in the newer version. Also important, data produced with CK4 might not be compatible with CK5.

    image

    Back to DocumentationDocumentation

    Back to Home Page

    Logo