Provides access to
SmartClient Evaluation's client-side UI components
documented
here.
Currently, using this module requires an environment, such as
React or
Angular, that defines "window" as a
global with real browser document and navigator objects.
Installation
When installing a module in npm v7, console output is suppressed, and interactive output
is not allowed. So by default, we now install without prompting wherever a default
response is available. Please be patient as it may take a minute or more, depending on
your connection and hardware, to finish, with no console updates to indicate progress.
Install module and SmartClient runtime(s):
npm install smartclient-eval [flags]
Update/reconfigure SmartClient runtime(s) (must be run from module directory):
npm run reconfig [flags]
where the supported flags are:
--location=<directory> where to install the SmartClient runtime(s);
default is to place runtime root (isomorphic)
in the dependent module directory
--branch=<number> desired branch (e.g. 11.1); default is release
branch
--date=<date>|latest desired build date, in format YYYY-MM-DD,
or 'latest'; default is 'latest'
--runtime=release|debug|both
which runtime(s) to install; default is 'both'
--reference[=<boolean>] whether to keep the framework reference directory;
default is to not install it to save disk space
--skins=Tahoe|all|none which skins (if any) to install;
default is to only install Tahoe
--prompt[=<boolean>] wait for input instead of assuming the default
response to all queries during install; default
is to not prompt during install or update in
npm versions 7 and above as it's not supported
After installation, command-line configuration is persisted, so command-line
arguments only need to be supplied when updating if the desired configuration
has changed.
Note that since 'npm update' no longer runs a module's update script if the
version hasn't changed, you must use the command above, run from the module
directory, to update the runtime(s) if the module has already been installed.
(The smartclient-eval module is versioned separately from nightly SDK builds.)
Command-line Examples
New install, selecting a specific branch and date:
npm install smartclient-eval --branch=11.1 --date=2018-12-30
Update to latest nighlty build (run from module directory):
npm run reconfig --date=latest
Update to SmartClient 13.0 branch, installing all skins:
npm run reconfig --branch=13.0 --skins=all
npm v7
The install script for a module is no longer allowed to write output in npm v7, which means
that we can no longer interactively query for decisions or show zip download progress. So,
to still have a complete install process, the module now proceeds automatically, without
waiting, wherever a default response is available for what was formerly an interactive query.
Please be patient as the zip download and installation of framework, skins, and other assets
may take more than a minute, during which no additional output indicating progress will be
printed.
If you want to avoid unexpected hidden downloads or existing directories getting replaced, you
can explicitly specify "--prompt", and in npm v7+, though it cannot actually prompt you, that
will cause the minimal impact response to be assumed, rather than an automatic answer of "yes"
to every question. So, for example, downloads will be skipped as well as removing files. You
can then change to the module directory and do an "npm run reconfig ..." for full interaction.
"Uninstall" is no longer a lifecycle event in npm v7, so a module's uninstall script declared
in package.json no longer gets called during uninstallation. The recommended workaround is
to run "npm run uninstall" from the module directory (in node_modules) before uninstalling.
Importing
If you are building a new Angular, React or similar application, and plan to use SmartClient
pervasively throughout, you can just add an import declaration to your main.ts
or App.tsx
to make the framework available. However, if you are adding SmartClient to an existing
application, and you only plan to use SmartClient for specific components like grids, or for
Reify screens,
consider using
background download
instead of importing SmartClient directly (importing causes SmartClient to load immediately on
all pages).
To directly import the release or debug framework, respectively, in your application, you can
write:
import 'smartclient-eval/release';
or
import 'smartclient-eval/debug';
To import a skin as well, such as "Tahoe", you can add:
import 'smartclient-eval/skins/Tahoe';
If you want to refer to SmartClient APIs through your own constant, you can
always insert a declaration such as:
const ISC: typeof isc = window['isc'];
after importing the framework.
Importing skins in Angular
In Angular, if you directly import the skin, you may need to also manually add the path to the
skin_styles.css
file for your skin to the src/styles.css
file (or equivalent) for your app, in
addition to importing the skin as described above.
For example, if you've installed the SmartClient runtime in the default location,
and are importing Tahoe, you'd add the following to src/style.css
in your app:
@import '../isomorphic/skins/Tahoe/skin_styles.css';
Note that if you are using the
FileLoader
to load a skin, it must be installed under src/assets
(for example copied from
isomorphic/skins) to work properly.
TypeScript
To provide typescript support, the installation process should automatically
augment your tsconfig.json
file to include SmartClient's typescript file.
Alternatively, you can copy the typescript declaration file, smartclient.d.ts
,
from the installed resources under the isomorphic
directory to your app's
source directory, and then import it from your app like:
import 'smartclient.d.ts';
Note that SmartClient's TypeScript support is intended for IDE auto-completion and inline
documentation, not for transpilation. So, if you run into compile errors, you can always
remove any reference to our TypeScript file from your own TS file and application, remove
smartclient.d.ts
from under src/assets
(if present), and instead make TypeScript active for
your IDE only. For further details, see the TypeScript support documentation for
our framework or your IDE.