sgcHTML の新機能:スプレッドシート、フォームビルダー、レポートなど

· コンポーネント
sgcHTML の新機能:スプレッドシート、フォームビルダー、レポートなど | eSeGeCe ブログ
✦  sgcHTML · 新機能

11 個の新コンポーネント。
Delphi と .NET のための 1 つの Web ツールキット。

sgcHTML に、スプレッドシート、フォームビルダー、レポートデザイナーとビューア、ファイルマネージャー、画像クロッパー、コードエディタ、クエリビルダー、ガイドツアーが加わりました。スケジューラ、グリッド、フォーム、アクセシビリティも大きく進化しています。すべてサーバー側でレンダリングされ、CDN なしで動作します。

  • Delphi
  • C++ Builder
  • Lazarus
  • .NET
  • ASP.NET Core
同じ sgcHTML スプレッドシートを共有する2つのブラウザ、合計とグラフを含むチーム予算
11新コンポーネント
13新しいライブデモ
17内蔵 UI 言語
0CDN 依存

Delphi で作る Web アプリケーションには、いつも同じ要望が寄せられます。計算ができるシート、新しいビルドなしで業務担当者が変更できるフォーム、印刷できるレポート、文書の保管場所、トリミングできる画像です。これまでは、そのどれもが JavaScript ライブラリと CDN、そしていくらかの連携コードを意味していました。

今回の sgcHTML の新機能では、これらがすべてコンポーネントになります。フォームに配置するかコードで作成し、プロパティを設定して、サーバーイベントを Pascal または C# で処理すれば、ページは Bootstrap と htmx を使ってサーバー側でレンダリングされます。.NET にも同じコンポーネントがあり、ASP.NET Core の Tag Helper を備え、同じマークアップを出力します。

1 分で全機能を紹介

新しい sgcHTML コンポーネントがブラウザ上でライブ動作する様子です。YouTube でも公開中。

2つのブラウザで開いた同じ予算シート、リアルタイムで更新
新コンポーネント

スプレッドシート

ページ内で使える数式対応のグリッドです。ユーザーは 54 個の関数(SUM や VLOOKUP から SUMIF、日付関数、PMT まで)で値や数式を入力でき、サーバーが変更のたびに計算して、変わったセルだけを返します。

  • Excel と同じように使えるキーボードとクリップボード操作(コピー&ペースト対応)
  • 行と列の挿入や削除に、すべての参照が追従
  • 数式とスタイルを保持した XLSX のインポートとエクスポート
  • ライブ同期:開いているすべてのブラウザに変更が反映
Spreadsheet1.Sheet.SetCellByName('A14', 'Total');
Spreadsheet1.Sheet.SetCellByName('B14', '=SUM(B2:B13)');
Spreadsheet1.LiveSync := True;     // every browser sees the change
Spreadsheet1.SaveToXLSX(oStream);  // formulas, styles and widths included
ツールボックス、フォームキャンバス、フィールドインスペクタを備えたフォームビルダー
新コンポーネント

フォームビルダー

ユーザー自身にフォームを設計してもらえます。フィールドを 12 カラムのキャンバスにドラッグし、ラベル、選択肢、検証ルール、入力マスクを設定し、別の回答に一致したときだけ表示されるフィールドを追加して、保存する前に実際のフォームをプレビューできます。

デザインは通常の Form の JSON 定義そのものなので、公開されたフォームでも検証、マスク、ライブ検証がそのまま使え、GetJSONSchema で収集するデータを記述できます。

FormBuilder1.Form := Form1;        // the form your users design

procedure TPages.FormBuilder1Save(Sender: TObject; const aJSON: string;
  var aAccept: Boolean; var aErrorMessage: string);
begin
  SaveDesign(aJSON);               // store the definition where you like
end;

// on the public page
Form1.LoadFromJSON(LoadDesign);
バンド、データフィールド、プロパティインスペクタを備えたレポートデザイナー
新コンポーネント

レポートエンジン、ビューア、デザイナー

外部のレポートツールなしで、PDF に直接出力できるバンド形式のレポートです。グループと小計、グラフ、バーコードと QR コード、パラメータとサブレポートに対応し、中国語、日本語、韓国語、アラビア語、ヘブライ語向けの Unicode フォントも使えます。

ビューアではプレビュー、印刷、Excel へのエクスポートができます。デザイナーでは、開発者もエンドユーザーもブラウザ上でレポートを編集でき、Delphi IDE(10.4 以降)ではダブルクリックで同じデザイナーが開きます。

Report1.LoadFromGrid(Grid1, 'Customers');   // print a grid in one call
Report1.SaveToStream(oStream);              // the PDF
フォルダツリー、ファイル一覧、写真プレビューを備えたファイルマネージャー
新コンポーネント

ファイルマネージャー

1 つのコンポーネントで文書ポータルが完成します。フォルダツリー、詳細表示とサムネイル表示、画像・PDF・テキストのプレビュー、進行状況付きのドラッグ&ドロップアップロード、名前の変更、移動、コピー、検索まで、マウスでもキーボードでも操作できます。

デフォルトで安全です。ユーザーごとの権限設定、サーバーでのすべてのパス検証、有効期限付きの署名付きリンクによるファイル配信を備えています。

ドキュメントモードで撮影した領収書をまっすぐに補正している画像クロッパー
新コンポーネント

画像クロッパー

ライブラリなしでプロフィール写真やスキャン文書を扱えます。フォトモードではトリミング、ズーム、回転、傾き補正ができ、アバター用の円形も選べます。ドキュメントモードでは 4 つの角をドラッグして、レシートやページの遠近を補正できます。

画像はファイル、クリップボード、カメラから取り込め、サーバーは受け付ける前にすべての画像を検査します。

管理コンソールで SQL クエリを実行しているコードエディタ
新コンポーネント

コードエディタ

CodeMirror 6 をライブラリに組み込んでいます。SQL ではテーブル名やカラム名を補完し、JSON はブラウザとサーバーの両方で検証します。JavaScript、HTML、CSS、XML、Markdown、Python、Pascal にも対応し、折りたたみ、検索、ページに連動するテーマも備えています。

AND と OR のルールグループを備えたクエリビルダー
新コンポーネント

クエリビルダー

グリッドの列に対するフィルタルールを、AND と OR のグループで組み立てます。ユーザーは自然な言葉で質問することもでき、目に見えて編集できるルールとして結果が返ります。コードが受け取るのはパラメータ化された WHERE 句で、ユーザーや AI が書いたテキストが渡されることはありません。

vWhere := QueryBuilder1.GetSQLWhere(oParams);   // ':qb1' style parameters only
ダッシュボードの検索ボックスにスポットライトを当てたガイドツアーのステップ
新コンポーネント

ツールチップとプロダクトツアー

ツールチップは任意の要素に付けられます。ガイドツアーでは、初回体験の各ステップにスポットライトを当て、戻る、次へ、スキップのボタンとキーボード操作に対応し、ユーザーが完了またはスキップしたときにサーバーイベントが発生します。

そのほかの機能も強化されました

スケジューラとカレンダーリソース、繰り返しイベント、タイムラインビュー、ドラッグによる移動とサイズ変更、ユーザー間のライブ同期。
Grid範囲選択、Excel とのコピー&ペースト、行メニュー、CSV・TSV・XLSX のインポート。
FileUpload進行状況表示付きの分割・再開可能なアップロード、サイズ制限、サムネイル。
RichEditorツールバーのプリセット、画像、メンション、サーバー側の HTML サニタイザー。
ダイアグラムとマップ自動レイアウトと組織図モードを備えた編集可能なダイアグラム、マップのクラスタリング、GeoJSON。
フォームの検証とマスクブラウザとサーバーの両方でチェックされるルール、ライブ検証、入力マスク。
DatePickerプリセット、無効日、週番号に対応したポップアップカレンダー。
サーバーイベントTabs、Select、Rating、TreeView、Calendar、Scheduler、Stepper、Modal、Toast がコード内でイベントを発生させます。
アクセシビリティすべてのコンポーネントで ARIA とキーボード操作に対応し、WCAG 2.2 A および AA のアクセシビリティ適合レポートも用意しています。

オンラインで試す

すべての機能にライブデモを用意しています。ダウンロード不要で、今すぐ開けます。

Delphi と .NET、同じ結果

すべてのコンポーネントは Delphi、C++ Builder、Lazarus で利用でき、.NET では <sgc-spreadsheet>、<sgc-form-builder>、<sgc-report-viewer> などの ASP.NET Core Tag Helper として使えます。どちらも同じマークアップを出力し、コンポーネントは右から左へ書く言語を含む 17 言語に対応します。スクリプトとスタイルシートはすべてライブラリに組み込まれているため、ページが CDN に依存することはありません。

sgcHTML で次の Web アプリを作ろう

Delphi と .NET に対応した、サーバー側でレンダリングするコンポーネントツールキット。ユーザーが期待するコンポーネントがそろっています。