Refactor n19helper\examples\REACT Examples\Demo Example\workspace to use @ipr/n19factory npm package.

https://cbox.ideaportriga.lv/oleg.koleskin/n19helper/merge_requests/14

This is not problem of Nexus I think.
In our version of Siebel 16.8 when we get lics of lov as you do in Nexus

SiebelApp.S_App.GetActiveView().GetActiveApplet().GetActiveControl().GetRadioGroupPropSet().childArray.map(el => el.propArray).reduce((acc, el) => {
  acc.push({ lic: el.FieldValue, val: el.DisplayName });
  return acc;
}, []);

We get lic and val exactly same in RUS and ENU versions.

My question is: do you get in FieldValue - real lic or like us just duplicated DisplayName?

Screenshots below:

• RUS:
• ENU:

Maybe we should update to the greater version of Siebel?
Which version of Siebel do you use?

Hi Team,

We are able to place the react example on form applet.

We are trying to understand the code of both N19_reactdemo_PR.js and main.js.

we see that , the whole html rendering is happening from the main.js(layout, event triggers etc).

Is it not possible to render the same logic in N19_reactdemo_PR.js file.?

The main.js file is huge one and not at all easy to understand for the siebel developers that how it is running.

Is there anyway to simplify this..?

Regards,
Ravi Para

We (ITFB Solutions) had a bug in IE11 browser - and we fixed this bug on our side.

This was not supposed to happen at all - but I think you have not included core-js library to polyfill such a things.

So helping you to make it work without polyfill at all.

For more information check this link: babel/babel#6091

Specifications: https://developer.mozilla.org/ru/docs/Web/API/NodeList/forEach#Specifications

So I have fixed this issue in this commit: https://cbox.ideaportriga.lv/oleg.koleskin/n19helper/commit/2061f4d2c384af465395196388a992ada5c0f789

Bug report

When NB is asked to return the raw currencies, in some cases the formatted value is returned anyway. It seems it happen when the filed does not have the currency code field assigned. Check the Siebel behavior and if Siebel assumes System:Currency implement the same behavior. Also instead of calling the Siebel API function, consider taking the value from rawRecordSet.

When NB is asked to return the raw currencies, it should always return unformatted value.

Other relevant information:
Siebel version: All

Happens in the dedicated client: yes

Happens in the web client: yes

Browser version: all

Nexus version (could be found inside compiled file): <=1.4.0

UPD: Seems it will be better to return both values: formatted and not-formatted (also for numbers and dates)

Advanced Sort isn't taken into account, at least for the React demo. Siebel doesn't run anything on the presentation model for the applet being sorted for advanced sort, so this makes no trigger in change of state. In order to get it working with the React Demo (a modded version), I put a PR on the sort applet to trigger a change to a global flag to make React know the data changed.
So in BindEvents for the PR:
$(fullAppletId).find("[title='Sort Order:OK']").on("click", function(){
SiebReact.sorted = true;
});

In React component:
if(SiebReact && SiebReact.sorted){
SiebReact.sorted = false;
SiebReact.refreshList();
}

Our implementation relies heavily on advanced sort, since the users actually use that for sorting instead of clicking columns on Siebel.

Is it possible for Nexus to know the advanced sort has been triggered by a user and somehow trigger a callback since Siebel doesn't?

Bug report

What is the current behavior?
Changes are not propagate from Siebel applets to custom applets:

1. Change the summary in list applet and exit the column. The updated value is not displayed in the Angular applet unless the record is not saved.
2. Open the SR Contact Pick Applet and pick the record. The picked value is shown in the list applet, but not in the Angular applet. The updated value is displayed on the Angular applet only when the record is saved.

What is the expected behavior?
Changes should be propagated at least on blur (as in Siebel standard behavior).

Relevant logs and/or screenshots
N/A

Possible fixes

Implement the same logic in not official case demo, however it will add a lot of code, and we don't support the mix views (Siebel applet and custom applet), therefore maybe it does not make sense to fix.

Other relevant information:
Siebel version: It does not matter for this defect.

Happens in the dedicated client: It does not matter for this defect.

Happens in the web client: It does not matter for this defect.

Browser version: It does not matter for this defect.

Nexus version (could be found inside compiled file): It does not matter for this defect.

Defect reproduced in Demo Example: Angular

Create Siebel configuration for N19 React SIS Account Entry Applet for interdependent fields showcase:

Fund Eligible field should update Status field

• toggle Status field as required
• change Status field values (if possible)

Required for the N19 React example.

Hello,
We are trying Angular exemple and have an error:

TypeError: t.GetWeekStartDay is not a function
at e.value (N19Helper.js?scb=8.1.1.11_SIA[23030]_RUS:formatted:2319)
at e.t (N19Helper.js?scb=8.1.1.11_SIA[23030]_RUS:formatted:2262)
at new e (N19Helper.js?scb=8.1.1.11_SIA[23030]_RUS:formatted:3394)
at Object.createExample (main.ts:19)
at SRFormPR.SiebelAppFacade.SRFormPR.SRFormPR.ShowUI (SRFormPR.js?scb=8.1.1.11_SIA[23030]_RUS:28)
at k.SiebelAppFacade.Component.k.Show (component.js?_scb=:38)
at a.c (componentmgr.js?_scb=:38)
at a.SiebelAppFacade.ComponentMgr.a.Show (componentmgr.js?_scb=:38)
at p.SiebelApp.S_App.View.p.Initialize (view.js?_scb=:38)
at ar.SiebelApp.S_App.ar.OnLoadViewContent (applicationcontext.js?_scb=:39)

There is no method GetWeekStartDay() in SiebelApp.S_App.LocaleObject. How can we avoid this?

Thank you.
Alexey Yefremov

To avoid the "full add" issue with Contact Assoc Applet when LabelFind had a HTML Type text.

Maybe: 1) check if field exist 2) check if set value could be read

Also document that it should be used with caution.

UPD: if list applet, always check only list columns??

Test the official example in 19.1. If you need more details on environment, ask @jurijs.radionovs

https://192.168.2.209/siebel/app/callcenter/enu
SADMIN/sieb1234

Need to modify the Nexus code to handle gracefully the Siebel Tree Applets.

From observations:

1. No controls OR methods returned by applet OR pm methods
2. record set returned
3. Usual navigation methods do not work
4. applet.GetBusComp() returns null, as result getCurrentRecordModel fails trying to calculate state.

Bug report

What is the current behavior?

I created a project using create-react-app and added the @ipr/n19factory dependency. When I try to start, it hits a runtime error referencing SiebelAppFacade:

×
ReferenceError: SiebelAppFacade is not defined
push../node_modules/@ipr/n19factory/dist/index.js.parcelRequire.16D2../n19baseApplet
node_modules/@ipr/n19factory/dist/index.js:1561
1558 | }]), n;
1559 | }();
1560 |

1561 | exports.default = f, SiebelAppFacade.N19Helper = f;
| ^ 1562 | }, {
1563 | "./n19baseApplet": "52AF",
1564 | "./n19popupController": "wk9m"

If the current behavior is a bug, please provide the configuration and the steps to reproduce.

Create a react app with create-react-app, yarn add @ipr/n19factory. Try to use it in a js file and see the error. The index.js component I have been making is similar to the demo but I put the Physical Renderer as a View PR rather than applet.

So the beginning of my index.js file looks like this:

import n19Factory from "@ipr/n19factory";
import ReactDOM from "react-dom";
import React from "react";
import { MuiThemeProvider } from "@material-ui/core/styles";
import App from "./App";
import theme from "./style/theme";

const mountComponent = (id, viewName, appletNames) => {
// N19 initialization
//n19Factory(appletMap);
// Or initialize dinamically from PR
if(n19Factory){
n19Factory(appletNames);
n19Factory.viewName = viewName;
}
ReactDOM.render(
, document.getElementById(id));
};

What is the expected behavior?
A reference error to not be in the n19helper.

Possible fixes
If n19Helper had a check or someway to not throw the reference error. I understand adding n19helper to the SiebelAppFacade, it's just no project initially will like a reference error. It would be awesome if it could work with create-react-app initially so there is a choice to use the NexusBridge library directly instead of the exact demo setup.

// eslint-disable-next-line right before the SiebelAppFacade would be helpful. I think this would fix the runtime error?

Other relevant information:
Siebel version: 19.6

Happens in the dedicated client: N/A

Happens in the web client: N/A

Browser version: Latest Chrome

Nexus version (could be found inside compiled file): "@ipr/n19factory": "^0.8.0"

Defect reproduced in Demo Example: No, probably because of the ejecting create-react-app. I've been trying to find what tweak you made to make it stop having an error. We'd like to keep create-react-app instead of ejecting it just to get the project running.

Bug report

Calling n19.prevRecord on selected record with position 0 gives following error:

Error in v-on handler: "Error: incorrect index given for positionOnRow - -1"

Do not close popup applet automatically, if it's opened by the app explicitly.

Let's try to comment the line below and test if all the examples still work:

return this.closePopupApplet()

As agreed with @artjoms.puzirjovs, Nexus should optionally return not formatted numbers and currencies.

Nexus local object will include currency/number grouping/decimal separators.

Nexus settings accepts returnRawNumbers and returnRawCurrencies. When these values are true, the getControlsRecordSet and getCurrentRecordModel should return not formatted number and currency values.

getCurrentRecordModel returns currencyCode and currencyCodeField attributes.getControls returns currencyCodeField attribute.

Test if the setControlValue method will work correctly, it seems no changes will be required there.

Questions/Assumptions:

• Do we need to include the currency code field in getControlsRecordSet? No, if needed, it needs to be added on the applet web template.
• Do we need to allow changing the currency in the currency field? Siebel doesn't allow that, so we are too. The update should be done thru currency code field.

Assumption: raw record set always contains the currencyCodeField.

Bug report

User can't select value for fields Status and Account Class in Search Mode

If the current behavior is a bug, please provide the the configuration and the steps to reproduce.

• Login and navigate to React Demo Screen
• Click Search Button on Form Applet
• Try to select values for fields Status, Account Class. Fields stays with value "None". When User select value for field Account Class (in Search Mode), changes value in field Account Type

What is the expected behavior?

• User can select values from picklists.

Relevant logs and/or screenshots

Other relevant information:
Siebel version: 16.13
Happens in the dedicated client: yes
Happens in the web client: yes
Browser version: Chrome, Firefox, Opera
Defect reproduced in Demo Example: React Demo

Developer Experience (DX) must have static type checking, shared development environment, faster build times, hot module replacement, etc.

Prototype:
https://cbox.ideaportriga.lv/andrejs.agejevs/n19factory/tree/master/examples/react-app

Features:

• Static typing with Typescript compiler
• Code style guide with ESLint linter
• Publish packages from Lerna monorepo
• Share packages with Yarn workspaces
• Replace Webpack with Rollup bundler
• Support HMR with React Hot Loader

Open question is about the testing approaches:

• User acceptance testing with Puppeteer headless
• React components testing with Jest snapshots

• In query mode do not display the required
• In query mode change the button caption from Run to Run Query
• If no records found in the top applet, the bottom applet still could display the records

The n19factory prototype with development environment setup:
https://cbox.ideaportriga.lv/andrejs.agejevs/n19factory

The n19helper entrypoint should be here:
https://cbox.ideaportriga.lv/andrejs.agejevs/n19factory/blob/master/packages/n19factory/src/index.js

I noticed the represented code in the View PR section of the Creating a Nexus19 instance wiki page is differentiating from the last version of the ServiceRequestDetailViewPR.js file.

And the description in that section is outdated.

I'm wondering why not to use forEach method of Array when statements like continue and breakare not needed.

I recommend to use forEach for Arrays.

If you agree - let's refactore the code and assign TODO label to this issue.

Bug report

TESTED in Siebel Web Client 19.1 with SAMPLE_XE database

What is the current behavior?

User can't select any value from fields with picklists, enter value in Account Name field and edit field "Fund Eligible".

If the current behavior is a bug, please provide the the configuration and the steps to reproduce.

1. Make all steps from Quick Start Guide: Nexus19 + Vue.js example
2. Navigate on N19 Vue Screen
3. Click button "Query" or use Alt+Q
4. Try to select or write any value in fields

What is the expected behavior?
Applet works properly in Query mode and user can select/enter value(s) for search.

Relevant logs and/or screenshots

Other relevant information:
Siebel version: 19.1
Happens in the web client: YES
Browser version: Chrome 72
Defect reproduced in Demo Example: VUE.JS example

Hi Team,

We are trying to implement the react example. we followed all the steps.

when view is loading, we are getting the error "window.SiebelAppFacade.N19Helper is not a constructor" from "main.js".

Can you help us on this.

Regards,
Ravi Para

Scenario found @27.08 by EK when Attachment Flag on the activity is not updated when a new attachment is added. Even after RefreshRecord the VUEX was not updated.
SWE_PROP_BC_NOTI_NEW_RECORD_DATA_WS
SWE_PROP_BC_NOTI_NEW_RECORD_DATA

These notifications are not respected in NB.

Consider GetStringFromDateTime

Bug report

What is the current behavior?

If the current behavior is a bug, please provide the the configuration and the steps to reproduce.
After finishing the setup of Vue.js example (https://cbox.ideaportriga.lv/oleg.koleskin/n19helper/blob/master/examples/VUE.JS%20Examples/Demo%20Example/readme.md) if I open a dropdown on the applet - it's opened far away from the field

What is the expected behavior?
dropdown opened right below the field

Relevant logs and/or screenshots

Other relevant information:
Siebel version: IP16 with Patchset 5
Happens in the dedicated client: Dedicated
Browser version: Chrome 71
Nexus version: 1.1.0

Current it is just calls the method and returns undefined, the promise should be resolved when a view is loaded and data is available.

Reasons:

• N19 instance created on React app mount once and does not require to be passed thru context from the root component
• N19 instance must be imported from the factory module containing singleton instances mapped each per view applets
• Applet component is too opinionated about the state shape and its re-usability can limit the form implementations
• Applet component and its re-usability can be replaced with newer APIs, e.g. functional components & React hooks

The latest version of Nexus Bridge breaks the React apps by using the global object window, e.g.
const arr = Object.values(window.SiebelAppFacade.NB);

Bug report

What is the current behavior?
If User navigate on Applet second time, buttons Search, Save, GotoNext are not working

If the current behavior is a bug, please provide the the configuration and the steps to reproduce.

1. Login and navigate to React View, Check that it is possible to Save, Search record
2. Go to other View
3. Go to React View again and try to Search, Save, or go to next record

What is the expected behavior?
User is able to search, Save record

Relevant logs and/or screenshots

Other relevant information:
Siebel version:16.13; 19.1
Happens in the dedicated client: yes
Happens in the web client: yes
Browser version: Chrome
Defect reproduced in Demo Example: React Demo Example

Use the properties for popupPM instead

Add the additional function into global.js

window.unloadCss = function(href) {
  const link = document.querySelector(`link[href='${href}']`);

  if (link) {
    link.parentNode.removeChild(link);
  }
};

P.S. Also would be great to remove the broken links as well:

loadCss('files/custom/normalize.css');
loadCss('files/custom/fixes.css');

--
Source code:

// Load frameworks to include in AMD based web apps
/*require.config({
    paths: {
        'text': '3rdParty/text'
    }
});*/

require.config({
	paths: {
		text: '3rdParty/text',
		Vue: '3rdParty/vue',
		React: '3rdParty/react',
		ReactDOM: '3rdParty/react-dom',
		MaterialUI: '3rdParty/material-ui'
	},
	shim: {
		Vue: {
			exports: 'Vue'
		},
		React: {
			exports: 'React'
		},
		ReactDOM: {
			exports: 'ReactDOM',
			deps: ['React']
		},
		MaterialUI: {
			exports: 'material-ui',
			deps: ['React', 'ReactDOM']
		}
	}
});
window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true;
/**
 * Get template file as text
 * @param {String} url - path/to/template/file (without SIEBEL_BUILD predix)
 */
getTemplate = getRequest = async url => {
	url = `${SIEBEL_BUILD}${url}`;

	return (await fetch(url)).text();
};

/** Load stylesheet
 * @param {String} cssPath - path/to/file or web url
 */
loadCss = cssPath => {
	if (!cssPath) return;

	if (window.version && cssPath.indexOf('?') < 0) cssPath += '?v' + window.version;

	function pathExists(styleSheet) {
		return styleSheet && styleSheet.href && styleSheet.href.indexOf(cssPath) > -1;
	}

	if ([...document.styleSheets].some(pathExists)) return;

	const link = document.createElement('link');
	link.rel = 'stylesheet';
	link.href = cssPath;
	link.type = 'text/css';

	document.getElementsByTagName('head')[0].appendChild(link);
};

loadCss('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
loadCss('https://fonts.googleapis.com/icon?family=Material+Icons');
loadCss('files/custom/normalize.css');
loadCss('files/custom/fixes.css');

/**
 * Get initials from a full name string
 * @param {String} str
 */
getInitials = str => {
	if (!str) return '';

	let initials = str.match(/\b\w/g) || [];
	return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase();
};

positionOnRow should give clear indication if positioning happened (true/false/thrown error):

1. if not a list applet, throw an error
2. if cannot execute method, throw an error
3. if incorrect index, throw an error
4. if already positioned and skipIfAlreadyPositioned return true
5. after calling the method, get the index and if an index is not correct, throw an error. The positioning sometimes could not happen if the applet has an activate control (combo), so if it is a temporary solution to validate if it is going to happen.

I need to run callback which will send some information to the Business Service from the react application.

Is that possible?

I didn't find any event that I can bind to in Oracle docs.

I'm thinking to get that callback from window.SiebReact.mountComponent and run my BS on EndLife-cycle syncronously.

Any ideas?

If it will be useful for others we can add it to the docs.

Bug report

Error in Second React Example.
Can't repeat it in Siebel 16

What is the current behavior?
Applet doesn't open if User try to open it from Site Map in second time.

If the current behavior is a bug, please provide the the configuration and the steps to reproduce.

1. Login and go to React View -- All is ok
2. Navigate to Site Map and try to open React View --- applet doesn't open correctly

If User login and at first time try to open React View from Site Map - all works good, in second time - error.

What is the expected behavior?
User can open React View without errors

Relevant logs and/or screenshots

Other relevant information:
Siebel version: 19.1
Happens in the web client: yes
Browser version: Chrome
Defect reproduced in Demo Example: React Example(second)

The method should implement the mapping between field type and static / dynamic LOVs.

To avoid duplicate subscriptions, subscribe can have optional parameter "name" that will act as identifier for subscribed function (or perhaps use named function? ). So whenever subscribe is called with name it will Upsert a function.

Might consider also adding method that will inform if current named function is already registered

As agreed with @artjoms.puzirjovs add isLOV control's attribute for getControls/getCurrentRecordModel. The true value indicates that the control is static or dynamic picklist, and it makes sense to call the getLOV method for this control.

1. applet.GetControls() > pm.Get('GetControls')

2. applet.GetControl(name) > pm.ExecuteMethod('GetControl', name)

3. applet.GetListOfColumns > pm.Get('GetListOfColumns')

4. applet.InvokeMethod

5. applet.SetActiveControl

6. applet.GetBusComp

7. Update the mapping

We have a flaw with setting controls for not immediate post changes fields in "Explicitly calling the method to get the updated Siebel Presentation Model" flow. If the application sets the value of such field and straightforward recheck the model, the model returns the old value. The value will be updated in the model only when the next communication to the server happens (e.g., the control based on the immediate post change field is updated, the available values for dynamic LOV are requested, etc.). So the application should check the isPostChanges control's attribute, and don't re-consume the model if not isPostChanges control is updated.

However maybe we need to handle in in Nexus, it is a reason why I am creating this issue. Let's discuss it here.

We can consider using the applet.GetControlValueByName(controlName)/applet.GetControlValueFromUI(control) methods inside the GetCurrentRecordModel method.

It seems the subscribe flow (pubSub) is not affected by it.

cc: @artjoms.puzirjovs, @andrejs.agejevs, @eduards.kovrigo