I want to set a dynamic (random) value as defaultValue for textInput in simpleform. I did the code like below
<TextInput
source="ctr.uid"
label="UID"
defaultValue={() =>
Math.random()
.toString(36)
.substring(2, 5) + new Date().getTime().toString(36)} />
I can able to see the random values but when user clicks on save the entire form is reset to empty fields. How to fix this issue?
Related
I am trying to set a interactive grid column value (which is a date) based on a page item (which is also a date). I have already tried defaulting and using dynamic action set value (jquery seletor) to set item value to the interactive grid column but it does not work how I want it to work.
I have a page item called "P_DEF_DATE" and I want to set a date column in the interactive grid to this value but I want when I change the value in the page item and I click add row on the interactive grid, it must always use whatever value I have in the page item. For example:
P_DEF_DATE = 12-JAN-2021
when I click on add row in the interactive grid, my date column must equal to P_DEF_DATE and i add a few rows based on that date but then i change the date of P_DEF_DATE to:
P_DEF_DATE = 28-JAN-2021
now I want when I click on add row in the interactive grid, I it must show this new date from the page item in the date column in the interactive grid, keeping in mind the page does not refresh and I have rows with the date 12-JAN-2021.
Thank you in advance!
I implemented same few days ago. Following is what I did.
Create Dynamic Action on Row Initialization Event, set Region to your IG
Set True Action to Execute JavaScript Code
Use code
var model = this.data.model,
rec = this.data.record,
meta = model.getRecordMetadata(this.data.recordId);
if ( meta.inserted ) {
model.setValue(rec,"COLUMN_NAME", $v("P_DEF_DATE"));
}
Replace JOB with your column name and P_DEF_DATE with you Item name
More details Here
Also, out of curiosity, why there is no number like P1, P2 in your item name ??
I have a need to specify different value and display values in an option row (PushRow and MultipleSelectorRow). By display values I mean the values that are displayed in the option selection view controller (not the concatenated list of selected values displayed in the form).
I know this can be done by using a custom class that conforms to Hashable and setting the options property of the row to an array of such class instances.
$0.options = [
MyStruct(value: "1", displayValue: "one"),
MyStruct(value: "2", displayValue: "two"),
MyStruct(value: "3", displayValue: "three")]
However this results in the value of the so configured row being of type MyStruct when getting the form values using form.values as opposed to the actual value I'm interested in being MyStruct.value. This creates the needless complexity of having to map the form values accordingly.
I was wondering if there is a more desirable approach to achieve this? I.e. the values of the row remain a simple data type (say String or Int) but the displayed values in the option selection view controller can be customised.
i have to date input fields which i defined like this:
const MyDatePicker = ({ input, meta: { touched, error } }) => (
<div>
<DatePicker
{...input} dateFormat="DD-MM-YYYY"
selected={input.value ? moment(input.value, 'DD-MM-YYYY') : null}
/>
{touched && error && <span>{error}</span>}
</div>
);
I use redux form for this. I want to add a validation with the following functionality. When the date in the "Date To Field" is lesser than the date in the "Date From" field a message will be shown that the date to field must me greater that the date from field. As you can see my date format is for example: 06-03-2017. The more "challenging" part is that in another component the date From and date To must have a time space of year. If the time space is more than a year a message should be appeared the the time space must be of a year at max
The synchronous validation function in Redux Form is given all of the form values. It seems like it would be pretty easy to say:
if(values.to.before(values.from) {
errors.from = 'Must be before'
}
Alternatively, if you are doing "field-level" validation, the second parameter to the validate function is all the values of the form.
I have a checkbox on a tabular form. I need to be able to hide it if the submit date is not filled in and show it when a date is there. Once the checkbox has been clicked, I need to update another field based on the checkbox being clicked or when I hit the update button. is this possible on a Oracle Apex tabular form in version 4.2?
You can create dynamic actions on tabular form fields, but you need to know some Javascript / jQuery / DOM stuff as it can't be done declaratively as it can with page items.
As an example, I created a simple tabular form on the EMP table:
Using the browser's Inspect Element tool I can see that the HTML for the Ename field on row 3 looks like this:
<input type="text" name="f03" size="12" maxlength="2000" value="Ben Dev"
class="u-TF-item u-TF-item--text " id="f03_0003" autocomplete="off">
The relevant bits to note are the name "f03" and the ID "f03_0003". For all tabular form fields, the name indicates the column, and is the same for all fields in that column. The ID is made up of the name plus a string to represent the row - in this case "_0003" to represent row 3.
Similarly, the Hiredate fields are all named "f004" and have IDs like "f04_0003".
Armed with this information we can write a dynamic action. For example, let's say that whenever Ename is empty then Hiredate should be hidden, otherwise shown. In pseudo-code:
whenever an element with name "f03" is changed, the element with name "f04" on the same row should be hidden or shown.
So we can create a synamic action with a When condition like this:
Event = Change
Selection type = jQuery selector
jQuery selector = input[name="f03"]
i.e. whenever an input whose name is "f03" is changed, fire this action.
The action performed will have to be "Execute Javascript code", and the code could be:
// Get the ID of this item e.g. f03_0004
var this_id = $(this.triggeringElement).attr('id');
// Derive the ID of the corresponding Hiredate item e.g. f04_0004
var that_id = 'f04'+this_id.substr(3);
if ($(this.triggeringElement).val() == "") {
// Ename is empty so hide Hiredate
$('#'+that_id).closest('span').hide();
} else {
// Ename is not empty so show Hiredate
$('#'+that_id).closest('span').show();
}
Because Hiredate is a date picker, I needed to hide/show both the field itself and its date picker icon. I chose to do this by hiding/showing the span that contains them both. This code could have been written in many different ways.
You could apply similar techniques to achieve your aims, but as you can see it isn't trivially easy.
I want to clear the toolbar of my grid, but not to the default value of the column. I want to empty all fields.
When I use the
$("#Jqgrid")[0].clearToolbar();
method the toolbar gets the initial default values..
You can choose one from the following two ways.
1) You can temporary change the defaultValue of the searchoptions to "" before call of clearToolbar. You can use setColProp method for example to change column properties (see en example here).
2) Set the value of the the toolbar element manually to "" or to any other value which you want. There are simple way how the ids of the input or select elements of the toolbar are constructed. Let us you have column with the name 'col1' (the corresponding column of colModel has name: 'col1'). Then the id of the element in the filter toolbar will be gs_col1. So you can use
$("#gs_col1").val("");
to clear the field. In more general case if the colname is the variable which hold the value from colModel[i].name you can use
$("#gs_" + $.jgrid.jqID(colname)).val("");