Steps to reproduce the issue:

1. Go to the cookbook sample: Inline DateTime
2. Click the 'Select time' icon to launch the time picker
3. Note: not all options are visible in the initial display
4. Select another time
5. Note: the time selected is not reflected in the bottom display of the current value

Following this doc:
http://www.oracle.com/webfolder/technetwork/jet/globalGetStarted.html

and running on OSX:
ojet create <project name> --template=navdrawer|navbar|basic|blank

I get:

-bash: project: No such file or directory
-bash: navbar: command not found
-bash: basic: command not found
-bash: blank: command not found

Hi, just getting started with 2.1.0.

I noticed that after generating an oraclejet project we get this "themes" folder that include a copy of the alta theme. This folder is set on .gitignore so it is not checked in. When this folder is not there, we cannot launch grunt build... it throws the following:

Error: ENOENT: no such file or directory, stat 'C:\some\folder\project\themes\alta\web'

Even if I want to use a custom theme, the alta common copy part always fail.

Error: ENOENT: no such file or directory, stat 'C:\some\folder\project\themes\alta\common'

It makes sense that we don't need to push this folder as it should always get the latest from bower_components/oraclejet. Perhaps there is a bug or something missing in buildCommon.js#_copyThemeToStaging ?
I tried to add the folders manually to see if the stuff would be copied but it doesn't.

Easy steps to reproduce:

1. yo oraclejet myproject
2. delete myproject/themes folder (equivalent of freshly checking out the project)
3. grunt build

Let me know if I can give a hand!

If set the table source has a column named "hasOwnProperty", it goes wrong. Looks like the 'hasOwnProperty' function is used for rows but in this case this function(From Object) is hidden.
Two ways may solve this issue: Use Object.create(null) to construct rows then use 'in' to iterate, or use Object.hasOwnProperty instead.

Please document all related Oracle JET repositories in the README.md file.

yo oraclejet <app name>
leads to creation of a project that doesn't work as expected: the index.html served by grunt points to unreachable artifacts - alta css and others

yo oraclejet <app name> --template=basic [from the OTN get started page] works fine!

Is there any built-in options to do this rather than CSS tricks?

Hey there,

we are writing a webapp in which we have a CRUD dialog that allows the user to modify some data that comes from a database webservice. Amongst others, the user can view and edit a date value via an ojInputDateTime input component. To use this component, we have to convert the date strings that the webservice returns by calling oj.IntlConverterUtils.dateToLocalIso.

So far, so good, but the problem is that after converting the date strings, the time is off by two hours. So for example, when executing the following line of code, the time is 23:33:07 instead of 21:33:07

oj.IntlConverterUtils.dateToLocalIso(new Date('2016-06-21T21:33:07.111Z'))

According to the ISO standard for dates (https://en.wikipedia.org/wiki/ISO_8601#Times) the trailing Z stands for UTC time (this is how our database represents date strings). Thus, the hour should remain 21 and not 23 if I'm not mistaken.

Long story short, this can be fixed if the trailing Z is removed manually before passing the string into dateToLocalIso. Nevertheless, I think this is a bug and should be fixed sometime in the future.

(by the way, I deliberately posted this here and not in the OTN forums, because I think this repository could use some more activity - sorry for the inconvenience ;) )

Is there a way to display column header for the ID attribute in oj-data-grid? Precisely, the top-left corner cell (whose id is "datagrid:corner") should have displayed the column header for ID attribute but remains blank. Currently, I'm using DOM API to display the column header but wonder if there's a better way to do that.

| [Missing Header]| Column Header 1 | Column Header 2 |

| Row Header 1 |

| Row Header 2 |

Some questions for the Oracle staff:

1 ) what is the license of Oracle Alta UI?
1.1 is it Open Source as well?
1.2 If yes, where's the repo?
1.3 If not, are you planning to release it?

2. are you considering Typescript support -- like,to different extents, React, Angular2, Dojo2 are doing ?

Thank you in advance

Roberto

Let me start by congratulating you with open sourcing Oracle JET.

Currently this repo is just a source drop of a "packaged" release. Please also add the build tooling (gulp. grunt, or something similar) and the automated tests you use to produce Oracle JET.

This would make it feel more like a true open source project and allows the community to take JET and extend it with unexpected (and hopefully) beautiful features.

Currently the oj.IntlConverterUtils does not provide a way to convert a Date Object to timestamp as per my use-case I have to take users input as a Date and then pass it as a Timestamp to REST API.

at title up.

Please provide a list of improvements/changes over the previous version. i.e. a changelog.md file.

I used the converter to represent percent number, i tried 2 cases with input 12.12

1. style: 'percent',
   maximumFractionDigits: 2

it will display value : 12.12%
component value will be : 0.1212

2. style: 'percent',
   roundDuringParse: true,
   maximumFractionDigits: 2

it will display value : 12%
component value will be : 0.12

I think case #2 has false behaviour, it should have display and component like case #1.
It happens in _getRoundedNumber, because the divider by 100 or 1000 is counted as maximumFractionDigits

I find that

_getRoundedNumber = function (ret, numberSettings, options) {
var precision = numberSettings['maximumFractionDigits'];
var isNegative = ret < 0;
var mode = options['roundingMode'] || 'DEFAULT';
var roundedNumber = _roundNumber(Math.abs(ret), precision, mode);
return isNegative ? -roundedNumber : roundedNumber;
};

i proposed

_getRoundedNumber = function (ret, numberSettings, options) {
var precision = numberSettings['maximumFractionDigits'];
if (numberSettings['isPercent'] === true || options['style'] ===
'percent')
precision += 2;
else if (numberSettings['isPerMill'] === true)
precision += 3;
var isNegative = ret < 0;
var mode = options['roundingMode'] || 'DEFAULT';
var roundedNumber = _roundNumber(Math.abs(ret), precision, mode);
return isNegative ? -roundedNumber : roundedNumber;
};

thank you

Hi,

It seems JET input components only perform validation on a 'blur' event (e.g. tabbing out or clicking out). In some cases, however, validation on keypress (or other key event) provides a better user experience by giving instant feedback.

It would be great if we could just pass an option to the JET component indicating the event that triggers the validation. For example, you could pass a 'validateEvent' option:

 <input 
        id="username" 
        type="text"  
        data-bind="ojComponent: {
          component: 'ojInputText', 
          value: userName, 
          validators: [{
            type: 'regExp', 
            options: {
              pattern: '[a-zA-Z0-9]{3,}', 
              messageDetail: 'Enter at least 3 letters or numbers'}}],
          validateEvent: 'keypress'}">

Thanks for your consideration

Hello!

How to reproduce:

1. When "oj-select-many" or "oj-combobox-many" has placeholder as native attribute and component attach "oj-listbox-search" because has a lot of values (30 -50)

2. Click to "oj-select-many" or "oj-select-combobox" and select nothing then click to empty area on the page

3. You can fill more then one placeholder in the "oj-select-many" or "oj-combobox-many" filed

Chrome browser:
On the Tab Bar "Add and Remove" page if you use the keyboard Delete key to delete the "Security" tab, then focus does not return to any other Tab and you need to use the mouse to give focus to one of the tabs again.
Firefox:
As above, except that deleting any tab with the Delete key causes Tab Bar focus to be completely lost until the next mouse click. (i.e. always need to set tabindex="0" on another tab, but that is not happening after Delete)

Is it possible to have the content of oraclejet.org website hosted on the gh-pages branch, using the GitHub Pages features?

Hello i didn't found any place.

oj.Core have some feature to compile/build code in runtime ?
I have this self.html with that code bellow and trying to put him,
but the component donst generate the input element inside the oj-input-text;

var divHTml = document.getElementById("divHtmlGerado");
divHTml.innerHTML = self.html

        <oj-label show-required="true">Password</oj-label>
        <oj-input-text id="ATTRIBUTE_PASSWORD" name="ATTRIBUTE_PASSWORD"  placeholder="password" ="password" data-bind="textInput: self.PASSWORD"  required="true"></oj-input-text>

For the purposes of understanding things in JET when the official documentation doesn't provide enough context, I'd like to propose open sourcing the framework's automated tests [1] to serve as example implementations. Here's one use case: document.ready isn't supported by JET, I've heard BusyContext [2] may help, but the API page doesn't provide much information on how to use it (ie: an example). Being able to see how this function is tested would provide insights into how to use it.

Thanks for listening!

[1]. see Knockout specs as example
[2]. BusyContext

1. Go to this cookbook sample page: https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=time&demo=simple
2. Replace demo.js with the attached demo.js - demo.js.txt, then apply the change
3. Click the clock icon and try to switch between AM and PM
4. You will get the selected AM/PM displayed as ellipsis instead of the real text for example '下午', referring to the attached screenshot:

Tab item text is truncated suddenly although there are some room left within the tab bar. It's expected to provide a way to truncated smoothly.

It happens to both OJET 4.x or 5.

Steps to reproduce:

1. Open the demo page which supports editing example directly.
   http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=tabbar&demo=tboverflow

2. Remove max-width style so that it'll fit the window width.
   <div class="oj-flex oj-flex-items-pad oj-panel" style="max-width:800px;">
   change to
   <div class="oj-flex oj-flex-items-pad oj-panel">

3. Change the long label name from "Very very long label" to "Very very very very long label"

4. Add the following style to the html. It helps observe the truncation change more easily. (Optional)

    <style>
          .oj-tabbar-item.oj-tabbar-item-element {
		    -webkit-flex: 0 0 auto;
            flex: 0 0 auto;
          }
          
          .oj-tabbar-element {
            border: solid 1px red; 
          }
    </style>

Video link attached for the reproducing. https://youtu.be/2Mnu8JfzjJE

As a result, "Very very very very long label" is truncated as "Very ver..." suddenly. Can we have a way to truncated smoothly? Thanks

Hi there,

I was trying to render simple custom knockout templates over a map area, similar to this Cookbook example:

However, if the ojComponent inside the provided template is switched from ojChart to a non-data visualization component (say ojButton) or a simple:

<div data-bind='text: mytext'></div>

I get the following error:

Message: oj.Components.getWidgetConstructor(...) is not a function
    at _GetDvtComponent (http://localhost:8000/js/libs/oj/v2.1.0/debug/ojdvt-base.js:1231:61)
    at ._GetDvtComponent (http://localhost:8000/js/libs/jquery/jqueryui-amd-1.12.0/widget.js:132:25)
    at templateHandlerFunc (http://localhost:8000/js/libs/oj/v2.1.0/debug/ojthematicmap.js:563:28)
    at DvtThematicMapJsonParser.ParseDataLayers (http://localhost:8000/js/libs/oj/v2.1.0/debug/internal-deps/dvt/DvtThematicMap.js:7521:23)
    at DvtThematicMapJsonParser._parseAreaLayers (http://localhost:8000/js/libs/oj/v2.1.0/debug/internal-deps/dvt/DvtThematicMap.js:7349:12)
    at DvtThematicMapJsonParser.parse (http://localhost:8000/js/libs/oj/v2.1.0/debug/internal-deps/dvt/DvtThematicMap.js:7246:8)
    at dvt.ThematicMap.SetOptions (http://localhost:8000/js/libs/oj/v2.1.0/debug/internal-deps/dvt/DvtThematicMap.js:402:10)
    at dvt.PanZoomComponent.render (http://localhost:8000/js/libs/oj/v2.1.0/debug/internal-deps/dvt/DvtPanZoomCanvas.js:3483:12)
    at _renderComponent (http://localhost:8000/js/libs/oj/v2.1.0/debug/ojdvt-base.js:1505:21)
    at ._renderComponent (http://localhost:8000/js/libs/jquery/jqueryui-amd-1.12.0/widget.js:132:25)

Ideally, any sort of knockout component would be able to be rendered, not just oracle jet DVT components. The knockout template also seems limited to only a single DVT component. Is there a workaround for this? Or is it just a limitation of the map component?

Thanks

When running example given at http://www.oracle.com/pls/topic/lookup?ctx=jet800&id=homepage

I have getting this error in web browser.

Screenshot attached.
https://paste.pics/49824031876975ba08a4883ff8c24a2e
https://paste.pics/0a5ba696d1922a96cb0b1fa564359e1e

In ojtable.js
1.The this._DISABLED is undefined in function _isTableSortable, shouldn't it be this._OPTION_DISABLED?
2. sortable="none" now will be treate as enable of sort, it's a backward compatibility breaking

The samples folder has at the moment 3 ZIP files. These should be kept extracted in GitHub, and instead the ZIPs should be part of a release cycle.

Below code throw an error.
ResponsiveKnockoutUtils.createMediaQueryObservable(ResponsiveUtils.getFrameworkQuery(ResponsiveUtils.FRAMEWORK_QUERY_KEY.XL_ONLY))

Hello!
I need the ability to use the router in the application as a "wild card.
I have the router settings in a separate module and i wouldn't like to divide structure for child routes in each of its viewModel.
In my application, it is necessary to configure all the routes from one module, but at the moment I'm a little stumped.

This example does not work, because the rule 'list' always overrides the template, but only if i remove it then the 'list/order/{orderId}' route will work.

http://url.com/list/order/1111 -> load viewModels/list.js instead of viewModels/list/order.js . Why ?

I will be grateful any helps

@ Oracle JET 4.2.0

// router.js
define([], () => {

    return {
		
		'list': {
                    id: 'list',
                    label: 'Order list',
                    value: 'list'
               }
		'list/order/{orderId}': {
                    id: 'list/order',
                    label: 'View Order', // title postfix
                    value: 'list/order' // viewModel location
               }
       }
})

// application.js
define(['ojs/ojcore', 'router'], (oj, router) => {

        /**
         * ApplicationViewModel root view model
         */
        class ApplicationViewModel {
		
		constructor() {
                    oj.Router.defaults['baseUrl'] = document.getElementsByTagName('base')[0].getAttribute('href')
                    oj.Router.defaults['urlAdapter'] = new oj.Router.urlPathAdapter()
                    this.router = oj.Router.rootInstance.configure(router)
	        }
	}
}

I would like to create the possibility of a hierarchy without building child routes from modules.

All other JET components use this mixin for component focus:

@mixin oj-browser-focus-outline-approximation($outlineColor)
{
  outline: dotted 1px $outlineColor;       // used on most browsers
  outline: -webkit-focus-ring-color auto;  // used on chrome
}

(File: utilities/_oj.utilities.focus.scss)

However, the Navigation List is not consistent with this pattern:

/*Focus ring around  focused list item*/
.oj-navigationlist .oj-navigationlist-item.oj-focus-highlight {
    outline: dotted 1px $navigationListItemOutlineColorFocus; // Using dotted line for all browsers
    outline-offset: -1px;
}

(File: common/widgets/_oj.common.navigationlist.scss)

In order to maintain consistency, the Navigation List should be changed to follow the pattern of the other components.

I would like to know the reason.

If you can release the entire source open with UPL, why not welcome PRs?

Community is one of the biggest strengths of any JS framework.
Why is there not an active github community behind Ojet. Why is it not being encouraged?

Simple router documentation in JET Cookbook says if you refresh the browser [1, 2], the proper state is restored in the page so the URL is bookmarkable. On browser refresh I get redirected to http://www.oracle.com/us/Error/index.html.

[1]. http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=router&demo=simple
[2]. http://www.oracle.com/webfolder/technetwork/jet/demo/demo-router-simple.html?demoTheme=none&baseTheme=alta&formfactor=desktop

My Installation of NPM and other tools works fine and when i issue the command to create a project as below

yo oraclejet samplejet2 --template=navdrawer

command prompt will throw me the error
"bower UNABLE_TO_GET_ISSUER_CERT_LOCALLY Request to https://bower.herokuapp
com/packages/oraclejet failed: unable to get local issuer certificate
Error oraclejet samplejet2 --template=navdrawer gistry uri https://registry.n'

then once it finishes the command there will be no libs folder inside the js folder of my samplejet2 project

can one one help here how to solve this issue.

Regards
Rajesh

In oj-3.2, ojinputdatetimepicker, timepicker tap handler function miscalculate the wheelTop position.

It should calculate relative to the window, but right now it calculate relative to the document. If you happen to scroll in the document, the wheelTop position is inaccurate

Line 6639:
Right now we have

var wheelTop = $wheel.offset().top;

Should be something like:

var wheelTop = $wheel[0].getBoundingClientRect().top;

I had built a custom module based on oj3 which now I have migrated to oj5 and I am trying to consume this in another module (also using oj5). However, when I try to load the page, it gives below error:-
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry at Object../node_modules/@oracle/oraclejet/dist/js/libs/oj/debug/ojcomponentcore.js.oj.CustomElementBridge.register

On looking further, I found that a certain 'oj-surrogate' is being registered in ojpopupcore.js (line: 1988) like this:-
oj.CustomElementBridge.register('oj-surrogate', {'metadata' : oj.CustomElementBridge.getMetadata('oj-surrogate')});
which is throwing this exception.

I am not sure if it is because of overlapping libraries between the built bundles of the component and the consumer.
Note:- This issue did not occur in previous version of OJ. It only came up after upgrading to OJ5.

I have ColorModel (oj.Model). In it I added a validate(attributes, saveOptions) method.

In my viewModel, I save my ColorModel like this :

ColorModel.save(
                    {
                        'RGB': self.RGB()
                    },
                    {
                        patch: true,
                        wait: true
                    }
);

The date is sent to the backend properly.
But if I look into the validate method, the attributes is an empty object but I have my saveOptions.

Now, if I change my viewModel to save the ColorModel like this :

ColorModel.set({ 'RGB': self.RGB() });
ColorModel.save(
                   {},
                    {
                        patch: true,
                        wait: true
                    }
);

The validate method is called with the attributes and the data is saved properly.

I think if we pass data to the save() method it should be sent to the attributes of the validate() method.

will oracle jet continue to exist?

sry, but i think about using oracle jet for a project and heard about people got let go in the cloud sector

I see an inconsistency between the dependencies defined in the bower json and the ones needed by oj. In the bower.json you see jqueryui but then a jqueryui-amd is needed, which isn't included in jet nor available in bower (in the oj generator is part of the src, which doesn't folow the 3rd party
deps idea of bower).

And it's bringing a lot of conflicts to our paths resolutions, as require tries to reuse paths if found.

"jquery-ui": "../../../bower_components/jquery-ui/jquery-ui",
"jqueryui-amd": "../../../bower_components/jquery-ui/ui"

requirejs resolves the "jquery-ui" in the 2nd path as the one in the 1st,
messing the paths resolution. And we need to support these usages:

require('jquery-ui') -> load jqueryui
require('jqueryui-amd/sortable')

If bower is not officially supported I would mention it in the documentation here.
(issue #24348023 for Oracle's)

Thanks

Hi there,

we encountered a bug on our ListView items, which have a slide-to-reveal button associated with them: Whenever you swipe two times on the same item, the button disappears (and cannot be clicked anymore), but the item is still indented as if the button was still there. Swiping a third time makes the button appear again.

This behavior can be reproduced on the Swipe To Reveal Cookbook Example by doing a swipe to the right, two times consecutively on the same element:

First swipe:

Second swipe:

the oj/ojscomponentcore minified version available in the min folder has not been minified correctly. the file is missing entries to the oj.domUtils functionality.

After installing ojet with npm command "npm -g install @oracle/oraclejet", on call ojet command i got this:
'ojet' is not recognized as an internal or external command,
operable program or batch file.

Hi,

I am using Voiceover in Mac to navigate to the controls. When the focus is on ojSelect component, it says press Control-Option-Space to display the list. But it is not working as expected. It works when I press Down Arrow key. This can be tested in http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=select&demo=single. Voiceover can be activated by Command+F5. Please check the attachment.

Would be great to do this:

    <input id="input" data-bind="ojInputText: {
            value: 'text',
            required: isRequired, 
            help: {definition: helpDef(), source:helpSource()}}">

instead of

    <input id="input" data-bind="ojComponent: {
            component: 'ojInputText', 
            value:'text',
            required: isRequired, 
            help: {definition: helpDef(), source:helpSource()}}">

and

<oj-tree id="tree" style="float:left;width: 180px;height: auto;" params="selectionMode: 'multiple', data: { data: getJson }" />

instead of

<div id="tree" style="float:left;width: 180px;height: auto;"
               data-bind="ojComponent:
               {
                 component: 'ojTree',
                 selectionMode: 'multiple',
                 data:{data: getJson}
               }">
</div>

This looks like a bug, steps:

1. Open the cookbook sample: A vanilla Jet InputDateTime demo
2. The initial date/time selection is 01/01/13 12:00 AM
3. Click the ’Select Date Time’ icon to launch the Date Time picker
4. In the popup, click and select a different day, for example, 1/18/13
5. Click any place out of the popup to let the popup lose the focus
6. The date & time displayed in the input is not changed, say, it’s still 01/01/13 12:00 AM
7. Click the ’Select Date Time’ icon to launch the Date Time picker again
8. In the popup, the selected day and time is same as the one in step 4
9. Click the ‘Cancel’ button
10. Now the display in the input field is changed to 01/18/13 12:00 AM, while the text displayed in ‘Current component value’ is kept as previous '2013-01-01T00:00:00’

Uncaught ReferenceError: Set is not defined js/libs/webcomponents/custom-elements.min.js:2
Uncaught ReferenceError: customElements is not defined ojcomponentcore.js:7498
Facing issue in 4.4.3 version of android

Application is working fine for the latest version of Android.

Please check attached image and let me know if need more information.

Hi ,

We have developed a JET application and some times am getting below error in console and not loading the scree. if i clear the cache then it will start working.

Connecting to PORT_NAME_SYMANTEC_PKI_CLIENT_CONTENT_TO_BACKGROUND...
bridge.js:1 Connected: Objectdisconnect: ƒ disconnect()name: (...)onDisconnect: {addListener: ƒ, removeListener: ƒ, hasListener: ƒ, hasListeners: ƒ, dispatch: ƒ}onMessage: {addListener: ƒ, removeListener: ƒ, hasListener: ƒ, hasListeners: ƒ, dispatch: ƒ}postMessage: ƒ postMessage()sender: (...)get name: ƒ ()set name: ƒ ()get sender: ƒ ()set sender: ƒ ()proto: Object
bridge.js:1 Done.
detection.js:1 +content/detection.js
detection.js:1 -content/detection.js
error.html:1 Failed to load resource: the server responded with a status of 404 ()

Thank you,

Regards,
Brahma

Hi,

grunt build and grunt serve are giving below error

$ grunt serve
Running "serve" task

Running "oraclejet-serve:undefined" (oraclejet-serve) task
Oracle JET Grunt plugin
Processing Grunt command...
JET Warning: Missing platform. Default to web.
Oracle JET Tooling
Fatal error: Error: ENOENT: no such file or directory, open 'C:\Users\del_Astle\MyApp\node_modules\oraclejet\package.json'

Besides

npm -g install yo 
npm -g install grunt 
npm -g install generator-oraclejet

You also need to install bower and grunt-cli in order to run
yo oraclejet <project name> --template=basic
successfully.

This is untold in the README.md or get started page(http://www.oracle.com/webfolder/technetwork/jet/globalGetStarted.html)

system: OS X Yosemite 10.10.5
node version: 5.0.0
npm version: 3.3.10

While selecting a date from Calendar popup in ojInputDate element, on clicking on next and previous arrows to navigate to next/previous months, after few quick and frequent clicks it will start skipping few months on each click.

oj-bind-for-each not found to parent element , this template print values
<script type="text/html" id="row_template">

 <script type="text/html" id="row_template">
    <tr>
         <oj-bind-for-each data='[{"type":"Apple"},{"type":"Orange"}]'>
          <template>
            <td><p><oj-bind-text value='[[$current.data.type]]'></oj-bind-text></p></td>
          </template>
          </oj-bind-for-each>
     <tr>
    </script>