I have added Vuelidate to my Quasar 2 application with a very simple required validation on an input field. The validation itself works fine but here's my problem:
The component's fetches some data from an API in its onMounted function. This data is used to initially populate the form. For the time loading, however, the input field is evaluated as invalid. Only once data have arrived, the input field becomes valid.
Is it possible to start the validation only once the API call has finished?
Please see the following example on Codesandbox which "simulates" the loading process by adding a timeout of 5 seconds:
https://codesandbox.io/s/condescending-fast-h7ld0c?file=/src/pages/Index.vue
I changed the v-model attribute to use that of Vuelidate and, additionally, use the $error property instead of $invalid.
<q-input
v-model="v$.title.$model"
:error="v$.title.$error"
/>
This seems to work, that is, the field is initially validated until the data have been fetched. If the user then clears the field, it becomes invalid.
https://codesandbox.io/s/prod-forest-7u0916?file=/src/pages/Index.vue
Related
I've started looking into using HTMX recently and I've ran accross a problem that I can't figure out. Essentially I have a select element which I use to make an http POST whenever the user makes a selection. In order to make that post however, I need to provide a token which is stored in the input about the select. Is there a way for me to reference in HTMX syntax the input from above using it's name "csrfmiddlewaretoken"?
So I figured out what my trouble was. In order for me to expand the payload of the hx-post request, what I needed to do was include the HTML elements that I wanted the contents of in the hx-post request. To do that you can use the hx-include attribute on the request emiting element, which references other elements by name and takes their value in the payload as a {name: value} pair.
<select name="sample_select" hx-post="link" hx-include="[name='csrfmiddlewaretoken']" hx-trigger="changed">...
The example select above would issue an HTTP Post request when the value of the select element would be changed. The request payload would then be
{
sample_select: selected_value;
csrfmiddlewaretoken: value
}
Keep in mind that if you have multiple elements on the same page with the same name, when you reference the name in the hx-include attribute then the HTMX library will take all the values from all the elements in the payload. I have not found a way to reference a specific element, or the closest one yet but if you know of a way please share.
I'm building a PowerApps app on Azure SQL
The requirement
I have a form which has "Save" and "Confirm" buttons.
Both buttons should save the form data. The Commit button should also set database column "Confirm" to 1
I've read at length about how I can programatically override the update value of a hidden control for this. But I'm not satisfied with the level of complexity (maintenance) required to get this working, i.e.
Populate a variable with the current db value
In the button code set the variable value
In the form field, set the update property to the variable
What I'm Trying
So I'm trying a different approach: SubmitForm then Patch. Even though this requires an extra database call, I'd like to understand if this will work. This is the code for OnSelect in the commit button:
// Save the record
SubmitForm(frmEdit);
// Update confirmed to 1
Patch('[dbo].[Comments]',cRecord,{Confirmed:1});
Some Complexities
Note that my record is a variable, cRecord. In short I want this app to be able to upsert based on URL parameters.
This is my App.OnStart which captures URL values, inserts a record if required. Regardless, the result of this event is that cRecord is set to the record to be edited.
// Cache employees and store lookups (as they are in a different db)
Concurrent(Collect(cEmployees, Filter('[dbo].[SalesPerson]', Status = "A")),Collect(cStores, '[dbo].[Store]'));
// Check for parameters in the URL. If found, set to Edit/Add mode
Set(bURLRecord,If((!IsBlank(Param("PersonId")) && !IsBlank(Param("Date"))),true,false));
// If URL Parameters were passed, create the record if it doesn't exist
If(bURLRecord,
Set(pPersonId,Value(Param("PersonId")));
Set(pDate,DateValue(Param("Date")));
// Try and find the record
Set(cRecord,LookUp('[dbo].[Comments]',SalesPersonId=pPersonId && TransactionDate = pDate));
If(IsBlank(cRecord),
// If the record doesn't exist, create it with Patch and capture the resulting record
Set(cRecord,Patch('[dbo].[Comments]',Defaults('[dbo].[Comments]'),{SalesPersonId:pPersonId,TransactionDate:pDate}))
);
// Navigate to the data entry screen. This screen uses cRecord as its item
Navigate(scrEdit);
)
frmEdit.Item is set to cRecord. As an aside I also have a gallery that sets this variable value when clicked so we can also navigate here from a gallery.
The navigating using new and existing URL parameters works. Navigating from the gallery works.
The problem
When I press the Commit button against a record which has Confirmed=0 I get this popup error:
The data returned by the service is invalid
When I run this code against a record which already has Confirmed=1 I don't get an error
If I run the PowerApps monitor it doesn't show any errors but it does show some counts being run after the update. I can paste it here if required.
I also tried wrapping the Path in a Set in case it's result was confusing the button event but it didn't make a difference.
What I want
So can anyone offer me any of the following info:
How can I get more info about "The data returned by the service is invalid"?
How can I get this to run without erroring?
Is there a simpler way to do the initial upsert? I was hoping a function called Patch could upsert in one call but it seems it can't
With regards to the setting field beforehand approach, I'm happy to try this again but I had some issues implementing it - understanding which control where to edit.
Any assistance appreciated.
Edit
As per recommendations in the answer, I moved the patch code into OnSuccess
If(Confirmed=1,Patch('[dbo].[CoachingComments]',cRecord,{Confirmed:1}));
But now I get the same error there. Worse I cleared out OnSucces and just put SubmitForm(frmEdit); into the OnSelect event and it is saving data but still saying
The data returned by the service was invalid
First things first,
Refactoring has multiple steps,
I can t type all out at once...
The submitform and patch issue:
Never use the submitforn with extra conplexity
Submitform is only the trigger to send the form out,
The form handler will work with your data...
If you hsven t filled out the form correctly, u don t want to trigger your patch action...
So:
On your form, you have an OnSucces property,
Place your patch code there...
Change your cRecord in your patch statement:
YourForm.LastSubmit
Has anyone any good patterns for RSA Archer validation which prevents a user from saving the record when a given date specified is in the future (or past)?
Currently I am catching this using calculated fields after the data has been saved, in a data exceptions report. But ideally I would like to catch this early prior to the user saving the record.
I would suggest that you use custom object in this case.
So remove the basic onclick attribute of the SAVE and APPLY button.
In your custom object, check if the entered date matches the system date (or the time-zone you need). Set a flag. Based on the flag value, you can call the actual function call of the SAVE or APPLY button.
Hope that helps!
Alex,Tanveer is correct. You have to use a Custom Object with embedded JavaScript code to implement described functionality.
You will need to create a function that will validate the value entered by the end user and either accept it or make user correct himself.
Now, you have two options how to do it:
1. You can attach your validation function to the Save and Apply buttons as Tanveer described. I have shared a similar code in the following question before. You can review it here: LINK
2. You can attach your validation function to the element you plan to validate directly. So when user is done with given input element and input element loses focus your function will be called. Here is a sample code with jQuery:
$('#elementid').blur(function() {
// validate entered value here
// if required show a pop-up message
WarningAlert(msg, title);
});
Good luck!
I have a question about gtm.
so currently I have created a script that can create all the data I need into datalayer this is how the data layer looks like (from page source code):
<script>
dataLayer = [{"visitorLoginState":"Logged out","visitorType":"NOT LOGGED IN","visitorLifetimeValue":0,"visitorExistingCustomer":"No"}];
</script>
but all this is generated from my store, but they key would be to be able to use these variables through GTM.
so inside GTM UI i created a custom html tag and added:
<script>
dataLayer.push({'event': 'visitorLoginState'});
</script>
I also created a custom macro->data layer variable with the name of "visitorLoginState" hoping that it would show "NO" instead of visitorLoginState in the response. but it just showing "visitorLoginState"
I am new to GTM too and getting to grips with it all.
From what I can see it looks like you are using macros and the dataLayer incorrectly.
You are running a script to add another row called event to the datalayer whilst already declaring what you want in the data layer. So initially the output in the source would be along the lines of:
visitorLoginState: Logged Out
visitortype: Not Logged In
ETC...
With the script you have added in GTM it would go to:
visitorLoginState: Logged Out
visitortype: Not Logged In
event: visitorLoginState
ETC
What you want to do is actually create a macro called visitorLoginState with the Type of Data Layer Variable, using the Data Layer Variable Name of visitorLoginState (and so forth).
From there you can create a Rule in GTM which will activate something based on what is returned in the data layer.
So your Rule could be:
visitorLoginState equals Logged out.
You could then have your script in the tags part of GTM which would say something like:
<script>
dataLayer.push({'event': 'No'});
</script>
Using: Oracle ApEx 3.0.1
I have a SQL report region that contains a hidden page item as part of the "where clause". My problem is, based on a value entered by the user, I need to assign this value entered to my hidden item, so that it can be used within the where condition of my SQL but this would need to be done without actually submitting the form.
At the moment, I can set the value via an on-demand process but my SQL is still not returning any values as the hidden page item within the query is not set (as page has not been submitted).
I am not sure how to do this and whether in actual fact, this is possible to do, without having submitted the page.
Since you are on Apex 3, you don't have dynamic actions, but that doesn't hinder so much.
I've set up an example on apex.oracle.com. To get in the workspace, use workspace 'tompetrusbe' + apex_demo / demo.
There is a dynamic action there, which can do the work too, but i've disabled it.
What you need to make it work:
an ajax callback process, with the following line:
apex_util.set_session_state('P2_PAR_ENAME', apex_application.g_x01);
Give your report region a static id, i called mine 'report_emp'. This so i can easily retrieve it.
In the javascript region of the page, you then need to call the app process, and then refresh the region. Also bind the event which needs to trigger this action. I've done it here through the onchange event of the parameter textfield.
function refresh_report(oTrgEl){
//alert('refresh: ' + $v(oTrgEl));
//calling the application process which sets the session state of P2_PAR_ENAME
var oGet = new htmldb_Get(null, &APP_ID., 'APPLICATION_PROCESS=set_session_state', &APP_PAGE_ID.);
oGet.addParam("x01", $v(oTrgEl));
oGet.get(); //the app process just sets something, it returns nothing
//refresh the report region
$("#report_emp").trigger("apexrefresh");
};
function bind_events(){
//call this onload
$("#P2_PAR_ENAME").change(function(){refresh_report(this);});
};
In the query of the report i use where ename like '%'||UPPER(:P2_PAR_ENAME)||'%'.
When you type (for example) 'bl' in, and tab out (to trigger the onchange), the region will refresh and will be filtered.
You'll just need to adapt to your solution :)