Problems with WebCore in Delphi 13 - no live preview, no sync, strange runtime form

WEB TMS WEB Core
1

Hello!

I have a few problems using WebCore with Delphi 13. Here are:

1.There is no “Sync controls” in the pop-up menu

2. Live preview doesn’t do anything. The TMS Live Preview EXE is started, but the path is wrong - it’s missing more than half of the path

The full path is: “C:\Users\[username]\ownCloud - skupno@oblak.company.si\1603 - Informatika\Razvoj\Promet\Marinaio\Dev\Client.Web”.

image
image484×432 13.4 KB

3.The result page in runtime is kinda strange - it has the duplicated controls in DFM and in the HTML Here’s a photo:

image
image923×785 26.7 KB

I would kindly ask for help.

DFM:

object frmCheck: TfrmCheck
  Left = 0
  Top = 0
  ActiveControl = edtFind
  Caption = 'test'
  ClientHeight = 768
  ClientWidth = 644
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -21
  Font.Name = 'Segoe UI'
  Font.Style = []
  OnClose = WebFormClose
  OnCreate = btnFindClick
  OnShow = FormShow
  DesignSize = (
    644
    768)
  TextHeight = 30
  object lblOpombeT: TWebLabel
    Left = 8
    Top = 372
    Width = 61
    Height = 21
    Caption = 'Opombe'
    Color = clBtnFace
    ElementClassName = 'fs-5'
    ElementFont = efCSS
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -16
    Font.Name = 'Segoe UI'
    Font.Style = []
    HeightPercent = 100.000000000000000000
    ParentFont = False
    WidthPercent = 100.000000000000000000
  end
  object lblPogodbaOdT: TWebLabel
    Left = 8
    Top = 285
    Width = 111
    Height = 21
    Caption = 'Datum pog.e od'
    Color = clBtnFace
    ElementClassName = 'fs-5'
    ElementFont = efCSS
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -16
    Font.Name = 'Segoe UI'
    Font.Style = []
    HeightPercent = 100.000000000000000000
    ParentFont = False
    WidthPercent = 100.000000000000000000
  end
  object lblPogodbaStT: TWebLabel
    Left = 8
    Top = 213
    Width = 79
    Height = 21
    Caption = #352't pogodbe'
    Color = clBtnFace
    ElementClassName = 'fs-5'
    ElementFont = efCSS
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -16
    Font.Name = 'Segoe UI'
    Font.Style = []
    HeightPercent = 100.000000000000000000
    ParentFont = False
    WidthPercent = 100.000000000000000000
  end
  object lblSirinaT: TWebLabel
    Left = 152
    Top = 142
    Width = 40
    Height = 21
    Caption = #352'irina'
    Color = clBtnFace
    ElementClassName = 'fs-5'
    ElementFont = efCSS
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -16
    Font.Name = 'Segoe UI'
    Font.Style = []
    HeightPercent = 100.000000000000000000
    ParentFont = False
    WidthPercent = 100.000000000000000000
  end
  object lblDolzinaT: TWebLabel
    Left = 8
    Top = 142
    Width = 52
    Height = 21
    Caption = 'Dol'#382'ina'
    Color = clBtnFace
    ElementClassName = 'fs-5'
    ElementFont = efCSS
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -16
    Font.Name = 'Segoe UI'
    Font.Style = []
    HeightPercent = 100.000000000000000000
    ParentFont = False
    WidthPercent = 100.000000000000000000
  end
  object lblDolzina: TWebDBLabel
    Left = 8
    Top = 169
    Width = 138
    Height = 38
    AutoSize = False
    Caption = 'test'
    Color = clBtnFace
    ElementClassName = 'h1'
    ElementFont = efCSS
    HeightPercent = 100.000000000000000000
    WidthPercent = 100.000000000000000000
    DataField = 'Dolzina'
    DataSource = srcView
  end
  object lblSirina: TWebDBLabel
    Left = 152
    Top = 169
    Width = 138
    Height = 38
    AutoSize = False
    Caption = 'test'
    Color = clBtnFace
    ElementClassName = 'h1'
    ElementFont = efCSS
    HeightPercent = 100.000000000000000000
    WidthPercent = 100.000000000000000000
    DataField = 'Sirina'
    DataSource = srcView
  end
  object lblPogodbaSt: TWebDBLabel
    Left = 8
    Top = 240
    Width = 425
    Height = 39
    Anchors = [akLeft, akTop, akRight]
    AutoSize = False
    Caption = 'test'
    Color = clBtnFace
    ElementClassName = 'h1'
    ElementFont = efCSS
    HeightPercent = 100.000000000000000000
    WidthPercent = 100.000000000000000000
    DataField = 'PogodbaSt'
    DataSource = srcView
  end
  object lblPogodbaOd: TWebDBLabel
    Left = 8
    Top = 312
    Width = 180
    Height = 54
    AutoSize = False
    Caption = 'test'
    Color = clBtnFace
    ElementClassName = 'h1'
    ElementFont = efCSS
    HeightPercent = 100.000000000000000000
    WidthPercent = 100.000000000000000000
    DataField = 'PogodbaOd'
    DataSource = srcView
  end
  object lblPogodbaDo: TWebDBLabel
    Left = 456
    Top = 312
    Width = 180
    Height = 54
    Anchors = [akTop, akRight]
    AutoSize = False
    Caption = 'test'
    Color = clBtnFace
    ElementClassName = 'h1'
    ElementFont = efCSS
    HeightPercent = 100.000000000000000000
    WidthPercent = 100.000000000000000000
    DataField = 'PogodbaDo'
    DataSource = srcView
  end
  object lblOpombe: TWebDBLabel
    Left = 8
    Top = 399
    Width = 621
    Height = 370
    Anchors = [akLeft, akTop, akRight, akBottom]
    AutoSize = False
    Caption = 'test'
    Color = clBtnFace
    ElementClassName = 'h1'
    ElementFont = efCSS
    HeightPercent = 100.000000000000000000
    WordWrap = True
    WidthPercent = 100.000000000000000000
    DataField = 'Opombe'
    DataSource = srcView
  end
  object lblPogodbaDoT: TWebLabel
    Left = 449
    Top = 285
    Width = 103
    Height = 21
    Anchors = [akTop, akRight]
    Caption = 'Datum pog. do'
    Color = clBtnFace
    ElementClassName = 'fs-5'
    ElementFont = efCSS
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -16
    Font.Name = 'Segoe UI'
    Font.Style = []
    HeightPercent = 100.000000000000000000
    ParentFont = False
    WidthPercent = 100.000000000000000000
  end
  object lblPrivezT: TWebLabel
    Left = 449
    Top = 213
    Width = 64
    Height = 21
    Anchors = [akTop, akRight]
    Caption = 'Privez '#353't.:'
    Color = clBtnFace
    ElementClassName = 'fs-5'
    ElementFont = efCSS
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -16
    Font.Name = 'Segoe UI'
    Font.Style = []
    HeightPercent = 100.000000000000000000
    ParentFont = False
    WidthPercent = 100.000000000000000000
  end
  object lblPrivez: TWebDBLabel
    Left = 456
    Top = 240
    Width = 180
    Height = 39
    Anchors = [akTop, akRight]
    AutoSize = False
    Caption = 'test'
    Color = clBtnFace
    ElementClassName = 'h1'
    ElementFont = efCSS
    HeightPercent = 100.000000000000000000
    WidthPercent = 100.000000000000000000
    DataField = 'Privez.ZapSt'
    DataSource = srcView
  end
  object lblNoData: TWebLabel
    Left = 264
    Top = 326
    Width = 98
    Height = 21
    Alignment = taCenter
    Caption = 'Privez je prost'
    Color = clBtnFace
    ElementClassName = 'h2'
    ElementFont = efCSS
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -16
    Font.Name = 'Segoe UI'
    Font.Style = []
    HeightPercent = 100.000000000000000000
    Layout = tlCenter
    ParentFont = False
    Transparent = False
    Visible = False
    WidthPercent = 100.000000000000000000
  end
  object lblLastnik: TWebDBLabel
    Left = 8
    Top = 98
    Width = 621
    Height = 38
    Anchors = [akLeft, akTop, akRight]
    AutoSize = False
    Caption = 'test'
    Color = clBtnFace
    ElementClassName = 'h1'
    ElementID = 'lblLastnik'
    ElementFont = efCSS
    HeightPercent = 100.000000000000000000
    WidthPercent = 100.000000000000000000
    DataField = 'PriimekIme'
    DataSource = srcView
  end
  object lblLastnikT: TWebLabel
    Left = 8
    Top = 71
    Width = 49
    Height = 21
    Caption = 'Lastnik'
    Color = clBtnFace
    ElementClassName = 'fs-5'
    ElementFont = efCSS
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -16
    Font.Name = 'Segoe UI'
    Font.Style = []
    HeightPercent = 100.000000000000000000
    ParentFont = False
    WidthPercent = 100.000000000000000000
  end
  object WebPanel2: TWebPanel
    Left = 0
    Top = 0
    Width = 644
    Height = 65
    Align = alTop
    BorderStyle = bsNone
    ChildOrder = 14
    Color = clWhite
    Padding.Left = 5
    Padding.Top = 5
    Padding.Right = 5
    Padding.Bottom = 5
    TabOrder = 0
    object edtFind: TWebEdit
      Left = 5
      Top = 5
      Width = 482
      Height = 55
      Margins.Left = 10
      Margins.Right = 10
      Align = alClient
      CharCase = wecUpperCase
      ChildOrder = 5
      ElementClassName = 'h1'
      ElementFont = efCSS
      HeightPercent = 100.000000000000000000
      WidthPercent = 100.000000000000000000
    end
    object btnFind: TWebButton
      AlignWithMargins = True
      Left = 497
      Top = 8
      Width = 61
      Height = 49
      Margins.Left = 10
      Margins.Right = 0
      Align = alRight
      Caption = '<i class="material-icons" style="font-size:40px;">search</i>'
      ChildOrder = 1
      ElementClassName = 'btn btn-success'
      ElementFont = efCSS
      HeightPercent = 100.000000000000000000
      WidthPercent = 100.000000000000000000
      OnClick = btnFindClick
    end
    object btnPristanisce: TWebButton
      AlignWithMargins = True
      Left = 568
      Top = 8
      Width = 61
      Height = 49
      Margins.Left = 10
      Margins.Right = 10
      Align = alRight
      Caption = '<i class="material-icons" style="font-size:40px;">anchor</i>'
      ChildOrder = 1
      ElementClassName = 'btn btn-primary'
      ElementFont = efCSS
      HeightPercent = 100.000000000000000000
      WidthPercent = 100.000000000000000000
      OnClick = btnPristanisceClick
    end
  end
  object tmrStart: TWebTimer
    Enabled = False
    Interval = 100
    OnTimer = tmrStartTimer
    Left = 56
    Top = 416
  end
  object srcView: TDataSource
    DataSet = wdsView
    Left = 56
    Top = 536
  end
  object wdsView: TXDataWebDataSet
    AfterOpen = wdsViewAfterOpen
    EntitySetName = 'Privez'
    Connection = modMain.connServer
    SubpropsDepth = 1
    Left = 56
    Top = 480
    object wdsViewPristanisce: TXDataWebEntityField
      FieldName = 'Pristanisce'
    end
    object wdsViewPristanisceId: TIntegerField
      FieldName = 'Pristanisce.Id'
    end
    object wdsViewPristanisceNaziv: TStringField
      FieldName = 'Pristanisce.Naziv'
      Size = 30
    end
    object wdsViewPristaniscePaOddelek: TStringField
      FieldName = 'Pristanisce.PaOddelek'
      Size = 30
    end
    object wdsViewPristanisceExtraDolzinaCenaBrezDDV: TFloatField
      FieldName = 'Pristanisce.ExtraDolzinaCenaBrezDDV'
    end
    object wdsViewTipPriveza: TXDataWebEntityField
      FieldName = 'TipPriveza'
    end
    object wdsViewTipPrivezaId: TIntegerField
      FieldName = 'TipPriveza.Id'
    end
    object wdsViewTipPrivezaNaziv: TStringField
      FieldName = 'TipPriveza.Naziv'
      Size = 30
    end
    object wdsViewOpombeList: TXDataWebDatasetField
      FieldName = 'OpombeList'
      ReadOnly = True
    end
    object wdsViewId: TIntegerField
      FieldName = 'Id'
      Required = True
    end
    object wdsViewZapSt: TIntegerField
      FieldName = 'ZapSt'
    end
    object wdsViewRegSt: TStringField
      FieldName = 'RegSt'
      Size = 25
    end
    object wdsViewRegStCista: TStringField
      FieldName = 'RegStCista'
      Size = 25
    end
    object wdsViewDelezLastnistva: TStringField
      FieldName = 'DelezLastnistva'
    end
    object wdsViewDolzina: TFloatField
      FieldName = 'Dolzina'
    end
    object wdsViewSirina: TFloatField
      FieldName = 'Sirina'
    end
    object wdsViewGlobina: TFloatField
      FieldName = 'Globina'
    end
    object wdsViewPantheonId: TStringField
      FieldName = 'PantheonId'
      Size = 200
    end
    object wdsViewPriimekIme: TStringField
      FieldName = 'PriimekIme'
      Size = 200
    end
    object wdsViewPogodbaSt: TStringField
      FieldName = 'PogodbaSt'
      Size = 50
    end
    object wdsViewPogodbaOd: TDateTimeField
      FieldName = 'PogodbaOd'
    end
    object wdsViewPogodbaDo: TDateTimeField
      FieldName = 'PogodbaDo'
    end
    object wdsViewZadnjiAneks: TDateTimeField
      FieldName = 'ZadnjiAneks'
    end
    object wdsViewOpombe: TStringField
      FieldName = 'Opombe'
      Size = 250
    end
    object wdsViewObracun: TBooleanField
      FieldName = 'Obracun'
      Required = True
    end
    object wdsViewActive: TBooleanField
      FieldName = 'Active'
    end
    object wdsViewadTimeChg: TDateTimeField
      FieldName = 'adTimeChg'
    end
    object wdsViewadTimeIns: TDateTimeField
      FieldName = 'adTimeIns'
    end
    object wdsViewanUserChg2: TStringField
      FieldName = 'anUserChg'
      Size = 25
    end
    object wdsViewPrivez: TXDataWebEntityField
      FieldName = 'Privez'
    end
    object wdsViewPrivezPristanisce: TXDataWebEntityField
      FieldName = 'Privez.Pristanisce'
    end
    object wdsViewPrivezId: TIntegerField
      FieldName = 'Privez.Id'
    end
    object wdsViewPrivezZapSt: TIntegerField
      FieldName = 'Privez.ZapSt'
    end
    object wdsViewanUserIns: TStringField
      FieldName = 'anUserIns'
      Size = 25
    end
  end
end

HTML:

<!doctype html>
<html lang="sl">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Check</title>

  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Material Icons (kot v DFM captionu gumbov) -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <style>
    /* DFM ima veliko "h1" prikazov; na telefonu so lahko preveliki -> nežno znižanje */
    .db-h1 { font-size: clamp(1.25rem, 4.5vw, 2rem); font-weight: 600; line-height: 1.15; }
    .db-block { white-space: pre-wrap; } /* za Opombe (WordWrap=True) */
    .topbar { background: #fff; } /* WebPanel2 Color=clWhite */
  </style>
</head>

<body class="bg-light">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <div class="container-fluid p-0">

    <!-- WebPanel2 (alTop) -->
    <header class="topbar sticky-top border-bottom">
      <div class="p-2">
        <div class="d-flex gap-2 align-items-stretch">
          <!-- edtFind: TWebEdit, CharCase=UpperCase, ElementClassName='h1' -->
          <input
            id="edtFind"
            class="form-control form-control-lg db-h1 text-uppercase"
            type="text"
            placeholder="Vnesi iskalni niz…"
            autocomplete="off"
          />

          <!-- btnFind: ElementClassName='btn btn-success', Caption material icon search -->
          <button id="btnFind" class="btn btn-success d-flex align-items-center justify-content-center px-3" type="button" aria-label="Išči">
            <span class="material-icons" style="font-size:40px;">search</span>
          </button>

          <!-- btnPristanisce: ElementClassName='btn btn-primary', Caption material icon anchor -->
          <button id="btnPristanisce" class="btn btn-primary d-flex align-items-center justify-content-center px-3" type="button" aria-label="Pristanišče">
            <span class="material-icons" style="font-size:40px;">anchor</span>
          </button>
        </div>
      </div>
    </header>

    <!-- Glavna vsebina -->
    <main class="container py-3">

      <div class="card shadow-sm">
        <div class="card-body">

          <!-- Lastnik -->
          <div class="mb-3">
            <div id="lblLastnikT" class="fs-5">Lastnik</div>
            <div id="lblLastnik" class="db-h1">—</div>
          </div>

          <!-- Dolžina / Širina (na telefonu 2 stolpca šele od sm dalje) -->
          <div class="row g-3 mb-3">
            <div class="col-6 col-sm-4 col-md-3">
              <div id="lblDolzinaT" class="fs-5">Dolžina</div>
              <div id="lblDolzina" class="db-h1">—</div>
            </div>

            <div class="col-6 col-sm-4 col-md-3">
              <div id="lblSirinaT" class="fs-5">Širina</div>
              <div id="lblSirina" class="db-h1">—</div>
            </div>
          </div>

          <!-- Št pogodbe + Privez št. -->
          <div class="row g-3 mb-3">
            <div class="col-12 col-md-7">
              <div id="lblPogodbaStT" class="fs-5">Št pogodbe</div>
              <div id="lblPogodbaSt" class="db-h1">—</div>
            </div>

            <div class="col-12 col-md-5">
              <div id="lblPrivezT" class="fs-5">Privez št.:</div>
              <div id="lblPrivez" class="db-h1">—</div>
            </div>
          </div>

          <!-- Datum od / do -->
          <div class="row g-3 align-items-start mb-3">
            <div class="col-12 col-md-6">
              <div id="lblPogodbaOdT" class="fs-5">Datum pog.e od</div>
              <div id="lblPogodbaOd" class="db-h1">—</div>
            </div>

            <div class="col-12 col-md-6">
              <div id="lblPogodbaDoT" class="fs-5">Datum pog. do</div>
              <div id="lblPogodbaDo" class="db-h1">—</div>
            </div>
          </div>

          <!-- lblNoData: Visible=False v DFM -->
          <div id="lblNoData" class="alert alert-info text-center h2 d-none mb-3" role="alert">
            Privez je prost
          </div>

          <!-- Opombe -->
          <div class="mt-2">
            <div id="lblOpombeT" class="fs-5">Opombe</div>
            <!-- lblOpombe: TWebDBLabel, WordWrap=True, Anchors all sides -->
            <div id="lblOpombe" class="db-h1 db-block border rounded p-3 bg-white" style="min-height: 180px;">
              —
            </div>
          </div>

        </div>
      </div>

    </main>
  </div>
</body>
</html>
2

I have retested this here but I could not see an issue with “Control Sync” and Live Preview.
The menu “Control Sync” is in the form’s context menu from the classic form designer. Are you sure you use the classic form designer?
For the Live Preview issue, is this issue specific to your project or is this issue also happening when you open any of the included demo projects and try to live preview these forms?