LoopOS UI v1.1.26.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
<turbo-frame id="test_turbo_id" class="">
  <div class="flex flex-row gap-2xs">
    <div class="flex flex-col items-start w-full gap-2">
      <div data-scripts-target="scripts" data-controller="scripts form-submit" class="flex justify-between w-full items-center gap-[8px]">
        <div>
        </div>
      </div>
      <turbo-frame class="w-full" id="editor_test_turbo_id">
        <div data-react-class="Editor" data-react-props="{"mode":"json","name":"settings_schema","storedValue":"\"{test: 'test'}\"","readOnly":true,"className":"json-editor"}" data-react-cache-id="Editor-0" style="width:100%"></div>
      </turbo-frame>    </div>
  </div>
</turbo-frame>

Code Editor

The Code Editor component is a specialized text editor for code within a user interface. It’s commonly used in development environments, configuration panels, or any interface where users need to edit code, scripts, or configuration files directly.

Used Components Components where is Used
Scripts Gem

Usage rules

  • ✅ Do
    • Use in environments where users need to write or modify code directly
  • ❌ Don't
    • Don’t use if users only need basic text input or settings fields
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<% 
  script = OpenStruct.new(
    id: 18,
    name: "Forward Trade-In Email template decision script",
    created_at: "2024-03-06 00:06:09.592017000 +0000",
    updated_at: "2024-03-06 00:06:09.599611000 +0000",
    input_fields: [],
    kind: "decision_block",
    isolated: false,
    description: nil,
    cron_notation: nil,
    disabled: false,
    settings_schema: {},
    favourite: false,
    last_run_date: nil
  )
  new_edit_params = params[:new_edit_params] || {
    element: script,
    form_url: "",
    submitable: true,
    show_path: "",
    edit_path: "",
    show_edit_button: true,
  }
  default_value = "{test: 'test'}"
%>
<%= render LooposUi::CodeEditor.new(
  type: "json",
  can_upload_code: false,
  loop_os_script: script,
  attribute: "settings_schema",
  turbo_id: "test_turbo_id",
  default_value: default_value.to_json,
  read_only: params[:read_only],
  upload_url: "",
  delete_url: "",
  new_edit_params: new_edit_params)
%>

No notes provided.

No params configured.

Code Editor

The Code Editor component is a specialized text editor for code within a user interface. It’s commonly used in development environments, configuration panels, or any interface where users need to edit code, scripts, or configuration files directly.

Arguments

Property Default Description
type `` Language for editor [:ruby, :json]
can_upload_code false Makes header buttons appear
loop_os_script `` LoopOs::Scripts object
download_url `` Url to download script
attribute `` Name of the attribute
title "" Title for the editor
turbo_id `` Some turbo_id (WIP: can't find usage but was passed)
default_value `` Value that goes inside the editor
read_only true Enables or disables edition
upload_url `` Url to upload
delete_url `` Url to delete
app `` App kind ["core", "manager", "hubs"]
new_edit_params `` Hash with this keys: [:element, :formurl, :submitable, :showpath, :editpath, :showedit_button] and values for those keys