VueJS list of various elements - javascript

I have tried and tried searching for the specific use-case I am after but alas, came up empty.
It could be that I am searching in the wrong direction, but here is the question:
Say I have an array of objects that contain, among other parameters, a title field and an input type field. With this array I would like to create a dialog from vuetify, in which I dynamically insert the relevant input elements based on the type field. This can be input, radio, checkbox but also something more exotic like cron scheduling.
So one way would be to set a slot in the dialog on where the input fields should come, but this requires coding on the child component which will implement such dialog. I was thinking more of something like a loop over the array of objects and rendering the specific component based on the type field, Something like a switch-case system.
Is this something I can do, and whether it is smart to do ? Would like to hear others opinions about this :)

I think it can be done by creating a huge form that contains everything and not rendering unnecessary elements due to
v-if="inputType.includes('text')"
In this case, you can use text-1, text-2, text-n for rendering multiple form elements with the same types. I don't think adding is possible because even if you manage to add, how do you set the condition, v-modal, event bindings etc.

Related

How to implement addable fields with Formik and React?

I'm trying to create an addable form like this photo with the help Formik :
But what is the best practice to implement this feature ?
In this case, name and price are textbox, but product categories are different with nested concept !
With this form, user can add a product to multi categories, user can add more fields and set new categories.
Due to the arrows, user must follow steps to set a category item in the last step !
Also user can delete no needed rows ...
I've searched into StackOverflow and Google, but I didn't find any suitable solution.
Thanks
You should use FieldArray.
<FieldArray /> is a component that helps with common array/list manipulations. You pass it a name property with the path to the key within values that holds the relevant array. will then give you access to array helper methods via render props. For convenience, calling these methods will trigger validation and also manage touched for you.
So you will need a initial value that is an array and another to tell what will be the name or the input you want when adding a new field.
If you look at the example in the docs, it's exactly what you need.

How to use same JavaScript routine on multiple Text Field change?

In my APEX application I have some calculation routine implemented in Javascript. The input is taken from multiple Text Fields. I want the calculation routine to work each time any of those Text Fields has been changed. Using Dynamic actions, how can I share this Javascript function among multiple Text Field change actions? Preferably avoiding any CSS modifications.
You can select multiple page items when specifying your single dynamic action to fire on change. They are comma separated in the Item(s) field (clue is in the name).
Also, as mentioned in the comments above, you could use a CSS class to group your items. As for whether this is a bad thing, check out this question.
Best practice: class or data attribute as identifier
Personally, I feel comfortable using classes to allow for easy jQuery selectors and it is both very common and natively supported in APEX.

How to implement a Tag Bar in javascript / css

I'm trying to implement a search bar for a web page having basically the same properties of the Tag bar appearing when you ask questions on Stack overflow:
It should have the following properties:
Allow the user to directly type in it.
Pull up entries with same letters as the user is typing.
Allow to delete an entry by either deleting on keyboard or pressing on inserted elements.
I'm interested in understanding the underlying structure of such an element and how to setup listeners and functions that call each other, not simply the code. Could anyone please help me figure out the skeleton of the functions I need to implement?
Besides just using a jQuery UI plugin, the simplest way to do it would be with a text input box and a ul. You can use jQuery (or something else depending on if you are using a framework) to listen to any change in the input box.
At that point you have a choice depending on the rest of your app: The filtering can happen in the front end or the backend. Because databases tend to be fairly quick, it might make sense to filter within it if you have a very large set of data. Otherwise, you could just grab the entire list and use JS to filter it.
Either way, have a callback occur on that change that initiates the filtering and then renders the results into the ul.

Using Parse.Object type pointers with JavaScript SDK

I'm using parse.com with a cordova based mobile app and I ran into an issue dealing with a list page that has different type of items. For the sake of the example, imgine three types of items- text, image and event.
My solution for this problem was to create three different types of parse classes: Image, Text and Event, Each with it's own special fields, and a Message class that has a pointer data field from type Parse.Object that will contain anyone of the three type of classes.
The problem is I'm not compleley sure on how to make the data field point to an Parse.Object. There's no option for this in Data Browser and, as I understand, in the JS SDK this happens autoamtically the first time you set a value from some type for the field. (e.g If I save Image on data, it'll lock me to use only Image from here on out).
Would love to hear if anyone know how to achive this or, if enyone has different idea for making a list with differetn types of items.
Thanks
This sounds like Single table inheritance pattern here more info. My suggestion is to keep all three classes in one Parse table called Message and in Message table should have field type which will have value for concrete type of your objects. In that way you will query, filter and sort only one table. You can also easily add more objects to this table.
Keeping all objects in one table have pros and cons. Please consider well your decision.

defaultChecked; why this property even exist?

Taking JavaScript this semester. I cannot grasp how this property can be useful at all. This property gives a Boolean value of true IF the checked attribute was used in tag for the check box object...BUT if I am the one writing the program ...I should know if I wrote that into the program correct? I just do not see the logic in this property. Anybody have a better reason for the use of it?
First, to answer your question, "Don't I know?". Of course not. If you are thinking of a form that is only used to add records, I could see your point but forms are also used to update records and we have no idea what the initial value is for any given record that may need to be updated.
The next thing to understand is that the same concept applies to more than check boxes. For example the text input elements have a "defaultValue" property that parallels the logic of default checked property.
The next point, is these properties would be better understood by novices had they been named "initialxyz" rather than "defaultxyz". Novices think that they are used to identify what should be sent to the server if not populated by the user but that is not what they are at all. They are the initial value, as sent by the server to the client, before the user starts interacting with the screen.
To answer your larger question, these propertied are extremely useful in two cases. The first has already been mentioned which is the "reset" button or as I jokingly call it the "oops" button or "start over". That can occur at the record level that resets every element on the form but it can be used on a field by field basis where only the field that has focus is reset. For example, the escape key is often used for this purpose. The second use for this is to know if the form is "clean" (unchanged) or dirty (changed, in at least one small way somewhere). This is used in too commentary places that you did not think about. The first is to avoid submitting a form with no changes to the server. Why waste resources. The complementary is to pop up the "are you sure you want to lose your changes" when someone attempts to navigate away from a form with changes. You walk the form and compare the current valued to the initial value for each element. If no elements changed the form is clean and allow the user to leave without a prompt. If at least one element is different than it's initial value and take appropriate action which might be to prompt to confirm leaving or it might be to submit the form changes to the server before leaving or something that neither of us have thought of yet.
Hypothetically, you might have a form with lots of fields written in html, and you may want to have a "reset" button which resets all of the form fields back to their initial values. (I don't really know why that used to be a common form button, I've never seen a use for it...) The code to reset checkboxes would then be:
input.checked = input.defaultChecked;
which would be the same for all checkboxes, and then you wouldn't need to track the difference between default checked and no default checked ones separately.
Really though, it doesn't appear to have much use, and I've never used it before.
One scenario would be when you are creating checkboxes dynamically, on-the-fly, in your code. The creation may be dependent on a couple of parameters, some of them depending in turn on selections by the user, from the current screen/page.
You may wish to set what is the state of these newly created checkboxes by default, before the user performs any actions on them.
Exemplifying: Say you have a textbox where the user has to tell you how many new checkboxes you should create for whatever further actions. Then after the user enters the input, your javascript creates N checkboxes, accordingly. And their initial state is set according to "defaultChecked".
Just yesterday I found myself using this same attribute. It comes in very handy when trying to set certain values to default.
Have you ever signed up for something ad then found yourself receiving TONS of unwanted newsletters? or you install one thing and two more things start installing? This happens because there was an option somewhere with a checkbox that had the checked attribute to make that decision for you.
Mostly it is used to make decisions for the user. Comes in handy sooner than later!
BTW: Welcome to the sweet world of JavaScript!

Categories

Resources