Complete CRUD operations using JSOM (Classic) SharePoint

yes so we will see javascript object mode yeah actually uh during rest api we were using this underscore xp page context info so where do we get this like do we refer to some external file or is it like in built in rest api what we have sp.js file and uh [Music] foreign so by default this for this file is within sharepoint only environment only right yes but we have to when we are writing the code right [Music] so here is your type url then underscore layout so there are many js files will be there and based on your requirement you have to i mean refer that okay if it is so do we have any physical location for these files like in which library are they uh present or their file yes i mean if it is online yes it is i mean there is no physical location for online right so it's available in cloud i mean microsoft so we so is there any way that we could find a list of javascripts file if we want to know like how many javascript files are there on on the cloud so can is there any way of throwing it out but they are not showing between the 1500 yes based on our requirements maybe i'll share so [Music] that's how we'll give it so once we record then we can directly input into our content here finally i mean where you use this wave so in json also we can do four things that is trade operations uh so initially we will see an increase uh later i mean it is very easy so i'm just doing it by okay uh i had another question like in what scenarios uh should we use json and what scenarios should we use best api so is json exclusive to sharepoint or like uh is it also because i think rest api we can also use it in other environments besides sharepoint no i mean yeah as we said okay [Music] uh in the same single content then we'll go for the java so that means i can say i mean many developers whatever based on the requirement like if we have a uh if you don't want to depend on anything i mean i don't want to go far refer this j spice i mean there is a dependency right uh json json so the js file should be there so if i don't want to depend on anything directly write the queries then go for a statement directly uh json we need the camel i mean that that's what i have to uh explain it to you today and then we have a camel curve if we go for darkness generally we will write sql queries or sp and stored browser all right hello hello yes yes no no it's fine you call it carry on okay so i have to use camel query here okay but in rest api i have to use camel query for retrieving in rest api i have to use the url second one here i have to uh use the i mean dependencies.js files and here there is no dependency okay next advantage is like i mean service reference we can directly give it i mean we can the service is always available i mean apis we can use it anywhere so the second one is like interoperability support i mean programming model and wherever you go the platform like we are now moving to sharepoint online so apis will work properly suppose if this model itself they are removing so they are planning to duplicate it so scripting model so by that situation i mean this json won't work this is the old way actually on the second one when we will mainly go for json means that is batchy so for example i have 100 records okay so within the 100 records if i want to retrieve it in a single time i mean in the single request so i can request using a single request i mean i want to retrieve 100 records okay so in a single batch i can request it but here uh the problem with the rest is i mean multiple requests i have to take i mean in the json i mean maybe round trips i can call it as whenever we load the data i mean multiple nodes we have to take it in the json still i mean the code was not completed so i can say like i have to load the whatever the round trips it was happening so then only i can retrieve the data so based on the batches like i can take 10 batches in a single shot and the second shot i can take 100 records and the third time i can take 200 returns so i can request multiple batches within the batching concept can be applied in the json rest api i cannot do it i have to because i have to take a single url the end point and then i have to use is it clear maybe i mean yes maybe i can say i have 100 records okay i mean mainly these this case in in in interview they will ask so 100 round trips you have to do it but here one trick i mean in the code if you see the code then you may understand this concept okay let's move on so okay so for retrieving the data we are in this site as we have done it for rest api in the same way we are planning to do it for the camel query as i said camel query so for reading we have to use camel coil so what is camel queries collaborative application markup language so it is almost like xml format so i will show you i mean how easily we can write the queries so for camel query uh we have a tool called uh u2u ml quality builder okay this is the tool i mean we will generate the queries based on our requirement using this tool so we have to install this tool so let us go to google so there is a site called u2u.b so go here and here is the standalone edition is there so installment well i'll just give it to you in the chat url of the camera yeah so once it is downloaded just install directly hmm i'll try to install again check your uh i'm just checking what is the problem i mean i'm just downloading done just a minute i'll just try to do it in my mobile can you try from your side i mean so that you can do it anywhere yes i will try yeah okay you are getting the same issue i haven't tried it yet should i try can you please try it if it works then i'll directly take a take your screen and explain in the same system okay so i need to install the software right the standard edition url and download and just install it just take two minutes okay yeah from my side is install okay [Music] yeah install it as well yes installed okay if it works for you then can you please share your screen yes starting mode uh sharing yeah i'm just requesting the control so once it is open you just give the url of your site can you open when you're sharing or stop hello once i will bring all the maybe evening once it is installed my system then i will explain the camera quickly okay but json i can do it i mean without using the tool also i can write it there is no problem it will be very easy for you i mean if i if we know that i'll explain that once it is installed javascript i mean when we are going to display with the content of your path so we have to create html js files and then it is available css we have to do so my html i'm just saving it yes the next one j is so i'll write html in the body [Music] [Music] and why i am taking this tv just i want to append this data i mean whatever i am returning data from sharepoint list using js and finally i'll append it so next one is as we discussed so we need uh jquery reference so we need sp.js sp runtime yeah i think those three are enough to retrieve the data so i'm taking jquery cdn path and previously i have downloaded right so now i am directly giving the cdm just checking here that is there so taking the common [Music] okay the next one is this is so this will take directly layout then so finally my customizer js is my customization so if i upload that into site essence yes just uploading both like [Music] json document dot when i load the page directly then within that json folder then my okay so so four things i have taken and as of now i am directly retrieving the data so first one is jquery second is runtime and power is fourth one is my customized case same everything is same so since it is available everything is ready i'm just uploading once now i will create a page basically so i have to give my html all right so in the content add a web part medium content hdmi okay so this is working properly as my references everything is working because it is saying the test h3 is coming from my js so till now you are clear yes yes okay now i'll call one function i'm just taking one function get data list is my function here i'll write on json related code same function i am calling in the ready function so when i uh retrieve the data i mean it automatically calls for get data from list function so initially what we need to do you just need to take the context so the context is like [Music] uh he's foreign it automatically gives us so just take take the client context your power is done so i am not able to see my keyboard so this sp is my js5 so i am taking the line context from my object sp so i am taking them what exactly it gives you to get so first initially i have taken the context then my site url then i am directly taking the list name so listing called then so taking the data based on my list so my list name is for now i am taking something the list is ready then we have to use when i am trying to retrieve all my listening so within the list items i have to write the camera restart get all items so all items is i'll get everything whatever if i use within the brackets whatever the camel query if i write it here i mean in the camel query you can write the filters ordering i mean everything we can write it so for now i am taking everything like that the data is available let's do that taking all the data so here it is saying that create all items that means everything you will get it whatever it is available in the list so all the listeners so within the execute query async as we have done it for success and failure we can take successful in function one section right actual items then the same lag message so success will take one enumerator so i need the list item because i want to use it out of the function also so i'll keep it here remove the variable and initialization so that i can globally use that list items illuminator is one by one so whatever the data is available in the list it comes one by one we will iterate it in the window do next will help us to pass the next item yes within the item i have to give the column so now i got the data [Music] there will be it's fighting so whatever the loop is happening first time it is empty then title value here so one by one it will happen finally i have my id right so dollar off is let's continue so my data i mean one by one i have passed it used whatever the records are available my html dvid is there i'm just appending this into my id the data is with excel okay [Music] let us see try to upload the data again okay still the world file is executing i'm doing ctrl f5 it is working now hmm hmm this is me uh and some many times i mean this js file won't update so that's how we are displaying that operator for example if i update the data like see so the concept and just summarize it so initially we have to refer the jquery library i mean some people they will use cdn i mean previously for http i have used the i just just uploaded the jquery library inside assets i gave the power i mean just for a change i gave cdn the next one is we have to download sp.js and runtime.js third one is we have to refer my customized and whatever everything we are doing the customization here so why we have taken these just for display purpose if you don't have anything then i cannot show it anywhere so i just gave the reference div tag and then id again now coming to the js file i have taken the document.ready when we load the page i am calling this function so this is my function so just taking the context sp.context then i am taking the title i mean the list so trying to retrieve all the items using create all items showing it in order i have to load the data because uh since it is if we don't load the data into context it won't work out i mean the page should load the data then successfully when asynchronously it should work taking the enumerator and then getting numerator so that means everything comes into this all appending to my variable then finally i am appending this space on this html id appending to xft oh some people then we will do it by creating a table so td starts here um this yesterday [Music] closing the table uh [Music] then let us try this you don't want to show this condensate just go to edit page appearance in chrome type as mum yeah can you please explain once okay so uh what as i said initially so we need for json we need to refer the files common files okay okay what i'm doing here is two things sp runtime.jsp yes and the next one is i gave my customized json whatever my i'm writing here right time so in the body i have taken one duty the purpose of new tag is i have to show it here right so because we have to show it in html finally html so for display purpose in the html i have taken one new tag it's a container we can call it as container i gave the id so this finding finally i gave it in the dim json everything i am appending in to this development that's why it is showing items as common because it is not a functional scope i mean complete right so second one is the requirement is i want to display the data based on my uh what i can say based on i mean display the data you when page loads into the i mean browser that means when i load the page automatically this should show up right even for loading is document. yes simple if i have a button this part uh clear okay so this thing things are clear and uh that will go to this point yeah yeah to get data from list is my action yes okay so what i'm taking is i'm taking the client context trying to contact where exactly i mean the this is my context yes i'm in sharepoint site i am using sp line content sp is my asp.js okay written by [Music] yes see the client context this client and calling the client context so it is defined here i mean within this linear so i am taking the context so here okay i'll show you so you know what i got is i'm in the client context my site url yes [Music] these are all i mean my context related details right so the next one is i am trying to get my uh url in the web i mean where i'm in bench india yes so that's what i'm doing okay like because i need [Music] whatever the data is available in the list everything will come up okay but tomorrow maybe we can filter some data like how we will write in select query filter like where conditions will write it tomorrow okay so out of 100 i'll take only two regards so finally here i am retrieving all the items using camel query and assigning to all state then i am loading the whole list item that means all the list items i am loading into my context that means coding into my page then execution process started so in the execution process there are two things one is success and if the execution is success then it comes so my object is here the first one so first one value i got it here india that means enumerator dot get current get item of title my column name is title right understand one i mean this is my structure table structure yeah and the second one is like cleaner so in the loop while loop it completes till you get the data it comes up then ending the close and ending the table and appending this text title whatever it is there right tml structure into do json and display okay so for example tomorrow we may get one more calm so um uh here i have one more problem yes so i can call this as state yes first table it was started then my foreign so it was started with the tr firstly second and t are closed and if we want to give the headlines we can give it here foreign first one is so these are like we will give the headers take the comments how um so we have to we have to maintain some structure so you can write multiple columns in the numerator one by one and many columns you can write it form some structure and finally is it tomorrow will do it i mean based on some conditions we need any possibility to join on weekends between twelve and four i can join because i have some other class so i'm available from noon till four p.m [Music] [Music] [Music] okay so yesterday we have seen all about like or just displaying the data and we have displayed on the records which is available in the sharepoint list based on using javascript object model so today we will see a few of the records i mean we'll just create update and delete items i mean me still the new to you camel query builder is not working maybe once once i am i mean finished then we will check it out when it is not working [Music] i'm just trying otherwise i will move to the create update and delete okay everything is okay then i'll take your system i mean i'll yeah i mean after these remaining three operations i mean we can i mean move for that tool okay so uh first i'll try to create a record uh using json so for that i am entering new new file create list item dot html and in the same way i'll create a create list item dot json so we need both and for uh content interval part so initially what i'll do is i'll just take a i'll just develop the html file based on my requirement so i have a list already movie details so maybe i'll just create a new record on this four columns and we'll try for creating the record in movie details list okay so as we uh discussed i mean initially uh [Music] we have to form like doctype hd within the head we will give the references yeah my references as we said the sp.js sp.runtimesp.com.js these three are mandatory for creating the record i think the type is not required i mean latest browsers is taking by default [Music] so just copy paste it so one is runtime and second one is core and third one is sp.js and fourth one is we'll take the jquery library this time i'll try to take from site assets yesterday we have taken the yesterday in part directly download and keep it in my site [Music] 3.5.1.0 [Music] so i am taking this path and in the instead of jquery i am giving direct jquery also given and finally i need to give the my customized json not create [Music] list id is my js file i'm giving the path in html okay so everything is ready now so references i gave it now the pending is body i mean generally in the body like we will uh design the form like create a record whatever the form is there so i need a table structure so i need to one row and two tds for everything so maybe i will hope for is for button so this is my call span that means it matches the remaining columns okay first one is movie hello they are saying something no no nothing okay so third one is region and fourth is release status okay so my headers are ready and now for since it is text box budget also text box then region is drop down release status is dropped so based on these we will directly create it so movie name okay uh this movie name is titled okay okay i am giving text box type equal to text i'll give id txt movement okay and the second one is movie budget i'm just preparing the ids okay the third one is region so for this i'll take drop down id equal to ddl region within that i'll take like option value equal to something and display purpose is different so three how many values are there we'll see three up there so pfp jp e okay and the fourth one is like same problem so i'm just copying so release text first one not started in progress completed [Music] since it is just a html and just moving a bit faster okay so and last input type equal to button id equal to bdl submit and value is submit okay so my design is ready so let me upload this html and uh js is already there so when we'll see the design first if everything is okay then we'll move further okay so create list item so for the i'll create one more web part page for the condenser so adding a weapon in the median html header i don't want to show so give it applied so this is the actual design we gave it so now we will see the functional part i mean the technical like if i give movie name budget and selected value whatever i selected when i submit it automatically this should save in my sharepoint list so when i click on my button submit i mean when i click on this submit button this should save save the record in sharepoint list for that what i'm doing is on click equal to create item that's my uh function as of now so function so i'm just testing if this alert is rising then we'll start our actual code okay generally i'll do test like this otherwise i mean everything is completed then we it is very difficult to come back to the basics submit trigger function so it is triggering there is no no problem for this so now i am ready to write everything in this function so generally the process is as we previously i mean yesterday we have discussed that so we have to take the client context then then take the list then within the list then here we have to create the item so that is the process so initially i need uh i need the values so values from the form that means this html whatever we have written these values i mean end user will submit like movie name of spiderman budget 20 millions and region is jp release status is in progress so these values we should get it in submit so later we'll set the values in json but initially i should retrieve it so for that variable movie name equal to dollar of cash that means i'll get this is moving id text box id so my value i i am just getting value from the html and assigning to com name variable next is movie budget m budget equal to dollar hardware so in interviews generally how to get the value from sharepoint form they will ask you so we have to give say like i mean in the jquery dollar you have to give the id then well some people they will ask in jquery sorry javascript so maybe one like document dot get element by id off not well i mean this the format or syntax they will ask me in interviews how to retrieve and get the value in jquery how to get the value in javascript just simple document.getelementbyid the id of the text box then value so the next one is [Music] i am writing directly in jquery [Music] this ddl release status variable m release status okay so is it clear till now i mean we'll just pretend whether the values are coming up here or not yes i mean generally i'll test the things i mean my components are good mean i'll split the things so here it is get later may be set then actual json so so i'll debug it so here in the site assets i will get my json yes so take the breakpoint select my budget 25 in focus when i submit let me see spiderman then [Music] it is error edition cannot read property value of null whatever th oh sorry i gave with ash so i have to remove it so that's why i use it to do it in this way [Music] okay i'm submitting so the value is 23 not the name [Music] yeah perfect till now i got i mean i was able to get the value from the html form json so for json let me take the global values initially so the global values i can say variable client context i'll take one more thing like list item table only list so i need three things for creating the record one is my context second is my list name third one is my item so that's why i gave it globally so i need the client context right so client context equal to actually we have done the same sp dot dot client context not get underscore current that means the current context i'll get it then my list is i have prepared the object already in above all list equal to client context dot get underscore web current web dot get underscore lists all the lists then i need only specific list so my list name i'll give it here so my list name is movie details so my list i got it now the thing is i need i need the i need to create a record so item i am just taking the variable object [Music] this is the actual object we will use it for creating the record so we have to remember this list item creation information i mean this is out of the box existing function so i mean this is available in sv.js so list item and we are going to create the item in list item so list item creation information this is the function existing function i can say so if this object is ready then all list item and i need the list item equal to list dot add item item in item creation so these two are little bit separate when we compared with the uh read or whatever i mean this delete or update or anything so only two are different that is creation information sp list item creation information then within the list item i'm adding this list item into list so if i got the object of list item then i have to add this into list so which list is movie details okay so now i have to set the values to my list item all list item not set underscore item how to set the value is based on my column name here two parameters will be there first one is my column name so it is a title so my column name is title the value is so if i go my m name is my value here and is second one and then we have totally four columns are there three okay so first column second column third column i mean four columns i have to set the item so let me take from here movie budget [Music] m budget i mean this m budget is my actual value is my field i am setting the value into my field properly and the next one is region so the value is here mdj and the final one is status better you just take it from the url instead of copy here because the best one is id um [Music] so i have set the value so if finally everything is set then i have to update it let me give the break here for understanding all list items dot update this will update the values and finally we have to do two things as yesterday we have done client context load client context execute query async within that success and failure so [Music] listed are you asynchronous one is success second one is error now i have to call that success function so within the success maybe i'll give the message on just a minute and take the record added successful id equal to new success okay so the best way is oh function i mean that means when i load the form uh i will hide that div tag i mean it won't appear when i load the page okay so if i if it is success then i will show this message and the next one is i don't want to show this when everything is added properly that means tbl form i'll give the id table id and in real time we'll do in this way right so i'm trying the same so this will show and the table will hide okay then what next okay success is completed then yeah this failure maybe i'll write like insert field function insert field so maybe i'll give [Music] item okay so i think almost completed for creating the record so we have done uh in three parts one is get the value from html and html is one part and the second one is get the value from sharepoint list sorry from the form third one is client context get the list create the item and within that that item i'm adding it to the actual list then the fourth one set the items into the proper columns when assigning the values into the fields i mean these are all list columns and then this is common so update load execute query is the common things maybe if you are reading the data this won't be available but uh these two are common so i have two things one is success and value if it is success i am just showing the message if it is untable form i am hiding but it is failed i am just showing some alert is it clear i mean we'll see later i mean how to deploy all those things yeah clear from myself we'll expect some i directly wrote it so we may get some errors but we'll fix it in debugging process first i am trying to check whether that code is updated okay that's fine i am clicking here okay now i am giving the movie name spiderman budget 59 jp in progress now submitting so i am getting all the values this we have done it already so context list i'm giving the break points error outside so title value budget region status everything is clear node if it is successful yeah it is success so showing the message [Music] and hiding the table click on the edit successfully i'm trying to research [Applause] it is added properly whatever the value we give i mean it is properly added [Music] this is how i mean we [Music] will generally create the record i mean based on your like values like whatever it is there then we will based on the columns here then will design this form okay any other queries okay since we have some 15 minutes i'll go with some shorting that is delete item so delete item is very simple so i'm moving to uh the deleting the list item maybe i'll just design small things okay so what i'm thinking is based on uh movie name we can delete it are based on id also we will try to delete based on movie name or generally based on id i mean in sql server maybe if you are from the sql server if you know then every table i mean what table records there is a unique id i mean primary and foreign keys will be there yes so that means primary key means like it is unique in any table generally will create i mean as as for the basic in basic architecture so we have to prepare the relationships right for that we will create the primary primary case in the same way sharepoint has its own unique things and it was developed the unique value in every list that column is called id so maybe based on this id i mean if we delete it so that will be perfect because the second reason why i'm not choosing movie name is maybe tomorrow the movie details they'll come here and and create one more record with the movie name so if it is not unique then they may be able to do it so since id is unique so i'll go with id let us try this so what i'll do is just trying to just reuse that form okay we're all getting goodness soon okay initially i am preparing everything will come i'll say that record deleted successfully and maybe in the movie id i'll say that this is my id so i'll give the id here and later maybe this is button delete delete deleted so html is ready very simple so i'll go with js file okay so all these are all common my successes is hide my function name changed so i need only one thing that is txt movie idea so [Music] so i'm just trying to i mean just trying to reuse the create form so if you are confused then please [Music] hope till now you are clear yeah clear till now so i'm just calling this delete list item delete item yeah then i got my id from html then i'm taking the context so we need context for everything we need the list so list that this name we have list name we are getting it and the next one is like i don't need it since it is not a create record okay so i need the item so list item list start here the changes will get item by id so my id i got it in from textbox so m id is made these are all i don't need okay so i got my id in the list item then very simple all list item dot delete object that means whatever the object which is available in this id so it will directly delete it this is common execute query async success unfailing success i am showing this anyhow i don't okay fine we'll use the same then if it is failed item deletion okay so if you observe here i have taken the context then my list then my id based on the value i am taking the id based on this item item id and deleting the object if the object is deleted then clearing the i mean calling success and failure maybe i'll call this as delete tree okay is it clear clear only two things are different get by id item id delete the object if you go with uh create create a list item information then update load execute queries come let's try i mean i have copy pasted so let me see if any mistakes up there will directly do it in my debugging process taking this so maybe in this form itself [Music] so adding a month pdm content delete item items okay so i will add one more record because we need to know multiple easier then we will understand easily so we named you'll be complete submitting okay i have not successfully [Music] so now i'm trying to delete based on my my id is i'll give two to various two trying to debug now so starting from delete item so click on delete so moving one by one i got the value as 2 so record deleted success let's see i'm refreshing so item is deleted mean html so only pending is like i mean we have to think about js files because the common things are like get the current context get the list and then uh client context execute query async on the load update these are all common so based on your operation like create or whatever delete only here the between the execute testing and set the values will be changed is it clear are any doubts clear we need anything any doubts clarifications needed okay okay fine i mean i will assign the task so maybe i'll give today i'll give some task so just try to [Music] complete the task so this json i mean this these are all previous version but if you are good in json then you will be able to understand the framework i mean latest technology is very easy so please plan to practice this class as well as like i just started okay so if we in this will be when where we will use this camel queries in this place okay so basically how we will like based on our requirement initially we will prepare the query and we will write it like we will use this code and merge it with our existing concept till now do you have any queries so when when we are using it if you sometimes i mean we may see some errors but that is i mean we can fix it [Music] so let us use this one by one slowly i will use it so first i'll take only uh view fields maybe okay so i'll take this phone and then for your easy understanding i'm just taking it maybe i'll take on and taking one i'm just taking into one line okay i need this for maybe i'll just take this and use it in my code so i have a read data already code is available so what i have to do is i got the list and list list of whatever i got it then after that a variable chemical query [Music] i mean we have to create it so that we can reuse we can use that camel query okay so if you are i mean once the object is created then you can use it for camel code so later within the xml you have to use your that means my code is ready i'm just taking here paste it maybe i'll give it in double quotes since inside they are using single code even if you are if they are using single quote outside will use double quote if they are using double quote we can use single code anything is fine so okay fine writing i just wrote it in the set view xml because it is xml format and we are just taking the query into camel query object then later you just use that object here common code previously i have taken everything okay now i am taking only this you got my i mean what i have written like just stay only two things one is camel query object then camel query dot set view xml whatever you do you can query builder i just took it then passing that into get title any queries here no no maybe i'll just again i'll replace it just replacing i have to open the page [Music] um okay they have i mean previously we have written for country but here we wrote it for movie details so i'll take it for country immediately so i'll take title i mean it was not there so that's why it is showing empty state so now i'm taking these two only the fields so i just took my two fields okay just refreshing now checking whether the code is oh this is foreign hello can you hear me yes okay so if you observe here whatever the data it is available we are able to retrieve it so see the code based on title and it should not display actually it is okay now it is fine title and state now we will apply some filters for example i'll go to here filter uh state of bangalore or title maybe titli equal to india and right we will see state what is the okay column name is state and taking state is equal to bangalore okay execute it we are getting the resent so now i have to write like entire code see here how they wrote it in the see some code they grow they wrote like so you can take this copy view [Music] and just write it copy paste it and replace it okay see now i mean i just copied the code i mean just applied that value equal to angle and now i am seeing only bangalore date so it is very easy i mean what you have to do is you just select here id equal to one something execute it take some condition under our our title is equal to something like india so just check it out here output tundra take go to editor check it out in the csum code copy this entire code within the and paste it in your set view xml um whatever we have done is same only thing is we have to copy from builder so only change is just like create a camel query set the view xml and copy from this see some code i mean first take it whether viewing fields or query something check it out execute the query see the result if everything is matches just go to see some code copy just view till here and paste it over there here this will change automatically based on your requirement if this is okay then i'll move to the update item that's clear because u2u camel query uses only for reading the data and mostly we'll use it for i mean if you ask me we'll use it for this query only only for this purpose otherwise there is no use okay fine then we'll move to update item so i'm just preparing the html update list item initially i'll take everything maybe it'll update based on the id so i'll take like movie id oh remaining all are same like i mean i'll give my input id maybe i'll select move i mean updates whatever the budget names region everything i'll change and finally i'll submit it i'm just using the create one so if i come here like update right update item remaining all like we have to take id first variable mid equal to i id is available here hd movie id that is my id so these things are like i mean i need it anyhow from the drop down from the lists and everything so taking the like remaining things are all are common only thing we have to do is [Music] so we have to take the item id initially then we have to update it i mean we have to set it then update it so first i got the item id whatever the id then i'll get the list id and since it is item creation i am just removing it so here what i have to do is this name olist equal to no list item i can call second okay object list item equal to item by id so in the id i'll use this mid what i'm trying here is go to the list that means movie details and get the item by id based on this id so if i pass if i ask like movie details my id is three four five so i'll if i pass three automatically it will come the object of that three then all list items set item title movie everything is set in then update is clear then you don't need to load it here actually execute query success failure is common if you observe only difference is just getting by id set it update and execute that's it you should know the id let me try to upload it first okay taking the path and creating some web part page adding content data report [Music] just go to edit webpart and give the pump stop it okay now my id i'll take it as three three instead of spiderman say that return and install i'll make this 500 5000 so instead of ap i'll make it as u and it is completed it is in progress now now it is completed so i am just trying to submit it and go through that with my debugging process still it is showing create list mistreat is like i gave the reference still create listed i'm just replacing the file html5 okay okay no syntax errors no now i got my js file as well so let us try to give three complete so i keep it here breakpoint let's watch one second okay so i got my id value spiderman 500 eu and completed so going by id so my id is successfully returned some values so setting up the values update execute query and we will see success until yeah it is success so upload success if i go back here just refresh it spiderman home return 500 eu completed only change we have to do is just get the item by id you have to pass it somehow based on your requirement set it update it on the execute this loading is not required for this so is it clear or any doubts need any clarifications clear yeah okay fine and since we have just 10 minutes time i mean i think you didn't see this one right how to open that so just open the u2 camel query builder give the site details url click on connect to sharepoint online and give the custom credentials yeah so we play some one more thing for read operation one for example it is the country so in the get list items i'll use our operation as well title equal to india state is equal to states okay bank uh chain of state execute query i mean you got two records so go to see some code copy the code okay till now it is okay i mean i want to show dynamically again i mean these dynamic again i want to show dynamic value as well so let us see so first we will check it out whether it is and then you got all the records why didn't selected view fields so let me select title and state yeah title on state execute it okay both i i got it so take the code what i am thinking is sometimes you may get it dynamically the value so that means this india you may get it dynamically so variable country equal to what i can do is read data right so i'll give here like real country i'll take foreign so based on this selection in the drop down we will show it in div let us go here and use this id so dollar off since it is id i'll take hash dot yeah that means dynamically i received the country value so i'll take this country and instead of india i have to use plus symbol i mean for concatenation right so double quote i mean i received the value in country and based on the selection it will change now so when to trigger this is when we change the value in country i mean in the drop down list so i will use like this one dot change function [Music] i mean now i need it based on the drop down list value i mean if i change the drop down list value it will call the get data from list so now i will get the value let us see i mean in the load load i will call div right maybe please select country everything is ready again i'm just replacing the html js [Applause] [Music] okay yeah so as of now india is elected so it is coming india chain on nothing what happened okay let me go to the debug process so okay let's see the source and code was not updated so that's why it is coming just refreshing ctrl f5 yeah see now my code is updated i am selecting china okay let's debug it so india small mistake i have done we have to call this within the document. otherwise this event will not trigger okay event itself not rising so we have to invoke it within the document already it's loading yeah so china displayed yeah chain record india okay india and china yes i mean there is one mistake we will do it sri lanka china sri lanka mistake is and every time we are changing right by the time it is appending here so initially what we can do is just make this div tag in empty position let us see let me check it out here itself perfect so in the success initially it will become empty later it will just check it out in the while loop then it will append to djs so initially i am just making this div dim container empty so let's see now i'm just replacing okay so let's refresh the page chain so basically what i am trying is i mean you can dynamically give the values within the camel code you can give it here also like just give like with country you can give state and your state is bangalore park bangalore chain or state something i'll write for two bangalore china state sri lanka state state so i am taking ddl state here just use thermal code within that plus symbols ddl state in ddl state you just use this state this state here is that giving see the state value is reflected placing the html as well let's see the result mode yeah so i am selecting chain state here chain let's see whether it is updated or not code is not refreshed okay only india is coming see now i'm just selecting china state china selecting only it is coming only this if i select this india is called sri lanka sri lanka only sri lanka so this is how you can give the values i mean you can pass the values dynamically within the camel code so take the values dynamically pass it within is is it clear any doubts here okay i will anyhow this data is available within the site assets these files are available in site assets json folder you can check it out so we will see that i mean the next topic i mean we'll click it out what exactly it should so we'll move on to the next topic i mean once the json is completed i mean from json part it is completed uh let us see i mean what next two will be and i'm thinking to go for page layouts or master pages so whichever is best i mean maybe page layouts is currently they are using mostly so we'll go ahead with page layouts okay then i mean if everything is on

Channel: Onetidbit

Views: 1,798

Rating: 5 out of 5

Keywords: SharePoint, JSOM, CRUD, SPFX, Bangalore

Id: CzGySANnv1w

Length: 173min 12sec (10392 seconds)

Published: Sat Oct 03 2020