Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    REACT show ButtonItem error

    Hello dear developers
    , I decided to try using the smartclient in react and immediately ran into one problem...

    Version SNAPSHOT_v13.1d_2024-01-23

    In a very simple example, the code of which I give below, the ButtonItem is not displayed on the screen, although its object is created in HTML

    Click image for larger version Name: Zwischenablage-1.jpg Views: 0 Size: 4.0 KB ID: 271654
    Code:
    import React, { Component } from 'react';
import CONSTANT from "shared-lib/src/CONSTANT";
import EvolutionServer from "shared-lib/src/server/EvolutionServer";
//import EvolutionDataLoader from "shared-lib/src/server/EvolutionDataLoader";
import LoadingPanel from "shared-lib/src/components/LoadingPanel";
import MessagesPanel from "shared-lib/src/components/MessagesPanel";
import 'smartclient-lgpl/release';
import { ButtonItem,  DynamicForm, TextItem} from 'smartclient-lgpl/react';
class App extends Component {
  static initData = [
    CONSTANT.APPLICATION,
    CONSTANT.ACTIONS,
    CONSTANT.STRINGS,
    CONSTANT.RIGHTS,
    CONSTANT.USER
  ];
    constructor(param) {
    super(param);
    this.state = {
      inited: false,
      loading: true,
      selectedFile: null
    }
    EvolutionServer.init();
    EvolutionServer.initApplication(App.initData, this.onApplicationLoaded.bind(this));
  }
  onApplicationLoaded(error) {
    if (!error) {
      this.setState({
        inited: true,
        loading: false
      });
    }
  }
  onButtonItemClick = function(form, item) {
    return window.isc.say('Hello ' + form.getValue('you') + '!')
  };
  render() {
    if (this.state.inited) {
      return (
        <>
        <DynamicForm numCols="3" autoFocus="true">
              <items>
                  <TextItem defaultValue="my friend" name="you" title="Enter your name" wrapTitle="false" selectOnFocus="true"/>
                  <ButtonItem icon={CONSTANT.BUTTONS_ICONS + "info1.png"} title="Hello" width="80" startRow="false" click={this.onButtonItemClick}/>
              </items>
          </DynamicForm>
          <LoadingPanel show={this.state.loading} />
          <MessagesPanel show={false}/>
        </>
      )
    } else {
      return (
        <LoadingPanel show={this.state.loading} />
      );
    }
  }
}
export default App;
    in HTML, I found a button object with rather strange properties

    Click image for larger version Name: Zwischenablage-2.jpg Views: 0 Size: 89.3 KB ID: 271655
    Last edited by Hirn; 10 Feb 2024, 23:01.
    Tags: None
    #2
    This should be resolved in the latest SC 13.1 patch build, dated 2024-02-14. To update your app, make sure your isc-config.json looks something like this:
    Code:
    {
    "location": ".",
    "runtime": "both",
    "branch": "13.1",
    "date": "2024-02-10",
    "skins": "Tahoe",
    "latest": true
}
    so that you're configured to pick up the latest version of branch 13.1. Then switch to the node_modules/smartclient-lgpl directory under your app, and run
    Code:
    npm run update
    To download and install the latest runtime.

    Note: You don't appear to be loading a skin. You can do that by adding an import like this:
    Code:
    import 'smartclient-lgpl/skins/Tahoe';
    after the release framework is imported.
    Last edited by Isomorphic; 14 Feb 2024, 11:37.

    Comment

      #3
      Thanks for the reply.
      About the styles... I have more than 20 projects in which I use my own style, and in order not to copy them to each project, I use downloads from a shared folder

      index.html
      Code:
      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>new user</title>
    <link rel="stylesheet" href="../../shared/css/project_react.css" type="text/css">
    <script type="text/javascript" src="../../shared/isomorphic/skins/standard/load_skin.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

      Comment

      Previous template Next
      Working...
      X