I'm still pretty new to JavaScript, so I could use a little assistance with this requirement.
I have two HTML webresource buttons setup at the top of a form (new_dayPagePreviousButton and new_dayPageNextButton), and between them is a calendar field (new_daypagedate). We have subgrids on the page configured to return results depending on the date chosen in the calendar field.
The requirement is to have a single day added or subtracted from the calendar field whenever a user clicks the Previous Day or Next Day button.
I am assuming that field new_daypagedate is having Data Type Date and Time of Dynamics CRM and new_dayPagePreviousButton and new_dayPageNextButton are just HTML buttons, and you want that when a user clicks on any of buttons there should be a change in Calendar field of CRM.
As you mentioned that you have created web resource so I am assuming that you have added two buttons and on click event of buttons it should react on new_daypagedate field.
Here I have created a web resource for you, please try to apply below javascript in your instance,
function AddDays(arg) {
var d=window.parent.Xrm.Page.data.entity.attributes.get("new_daypagedate").getValue();
d.setDate(d.getDate() + arg);
window.parent.Xrm.Page.data.entity.attributes.get("new_daypagedate").setValue(d);
}
Optional HTML,
<button type="button" id="new_dayPagePreviousButton" onclick="AddDays(-1)">Previous Day</button><br/>
<button type="button" id="new_dayPageNextButton" onclick="AddDays(1)">Next Day</button>
Please note, you need to call a javascript function using onClick event of a respective button.
SIDE NOTE: As you are using Dynamics CRM, you need to access your CRM
field using Xrm.Page attribute, you cannot directly access any field
or HTML tag just by using the id of that field, which you can see in
above Javascript.
After some additional research, I modified one of the button's HTMLs to include the JScript you had given in your first post Sagar. It now reads as follows;
<html><head>
<script type="text/jscript">
function AddDays(arg) {
var
d=window.parent.Xrm.Page.data.entity.attributes.get("new_daypagedate").getValue();
d.setDate(d.getDate() + arg);
window.parent.Xrm.Page.data.entity.attributes.get("new_daypagedate").setValue(d);
}
</script>
<meta><style type="text/css">P { margin: 0; }</style><meta><style type="text/css">P {
margin: 0; }</style></head><body onfocusout="parent.setEmailRange();"
style="overflow-wrap: break-word;">
<button type="button" id="new_dayPageNextButton" onclick="AddDays(1)">Next
Day</button>
</body></html>
After publishing, the button successfully changes the date! However once the date is changed, the subgrids below do not refresh to reflect the new date. This is a separate issue so I'll post a separate question for it.
Sagar, thanks for walking me through this. You've been immensely informative.
Related
I have a task where I need to automate the booking.com page, and one of the tasks is to select check-in and check-out dates. How I can do this? I automated , that I can open calendar, but I don't know how to select dates.
Here is my code
Cucumber step
And user selects dates from "2020-06-16" to "2020-06-26"
BookingStep
When('user selects dates from {string} to {string}',()=>{
BookingPage.checkInOut.click();
browser.debug(); });
Booking page
class BookingPage{
get whereAreYouGoingTextBox(){return $('#ss')};
get checkInOut(){return $('div.xp__dates-inner')}; }export default new BookingPage();
Note: My answer is a solution for the ability to set a value in the date field, and only interact with the cancel link on the date picker object.
I battled this for a while and came up with a solution that works for me, I hope it works for you also.
First when I inspect the datepicker object, it generates a random XPATH/CSS Selector. As a result if you inspect & copy the selector and try to use it in your next test, it will fail since the xpath/selector is randomly generated. I got around this issue by identifying a unique css ID that lived above the datepicker element, and used that as my starting point. Then I looked at the html path from that point to the datepicker input tag, and I appended that path. This solved the first problem of not being able to set a value in the date picker text field. Here is an example using xpath:
//*[#id="filtersSideBar"] - This is the unique ID found above the datepicker
/div[2]/div/input - This is the path to the date picker from the unique ID
$('//*[#id="filtersSideBar"]/div[2]/div/input').waitForClickable(3000);
$('//*[#id="filtersSideBar"]/div[2]/div/input').setValue('2020-01-01');
Now that you have a date inside the date picker field, you have to close the datepicker object. I had to use Javascript to accomplish this. First open the datepicker object, then inspect the 'Cancel' link element. Copy the CSS Selector ID. Lets say it ends up being #cancelLink
Now you run this code:
browser.execute(() => document.querySelector('#cancelLink').click());
Which will then close the datepicker object so that you can proceed with your testing.
Here is my actual code:
class DataSearchSortAndDateRangePage {
get startDate() { return $('//
[#id="filtersSideBar"]/div[2]/div/div[2]/div[1]/div/input'); }
setStartDate(date) {
this.startDate.waitForClickable( { timeout: browser.config.timeOutValue } );
this.startDate.setValue(date);
browser.execute(() => document.querySelector('body > div.md-datepicker-dialog.md-theme-default > div.md-datepicker-body > div.md-dialog-actions.md-datepicker-body-footer > button > div > div').click());
}
}
export default new DataSearchSortAndDateRangePage();
I hope this helps out =)
I have a web page that when a user enter a date this automatically saved in database. Also I have a datepicker icon to select the date. But when I update or i press a add button to add a new entry(or delete icon in order to delete a specific entry) all datepickers icon vanish. I refresh the page in order to datepicker icon appears again. I think that ajax call ignores javascript date picker
HTML code:
echo "<td class='main'><input disabled id='".$row['a_id']."' class='apousies_edit datepicker' tabindex='$tabindex_counter' onclick='update_record(event,this,"apousies","$key","id","".$row['a_id']."")' value='$val'></td>";
$tabindex_counter++;
echo "<button class='button4' onclick='new_record_adeia("$id");showDatePicker(tabindex)' value='Προσθήκη Άδειας'/><img src='add.png' width='40' height='40'></button>";
Ajax call:
function new_record_adeia(id) {
loadXMLDoc("/prosopiko/add_rec_adeia.php?id="+encodeURIComponent(id),function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById('apousies_edit').innerHTML=xmlhttp.responseText;
})
}
The code that i use in order to add a date:
session_start();
include "classes.php";
$functions=new classes;
$id_proswpiko=trim($_REQUEST["id"]);
$now=date('Y-m-d');
$res=$functions->query("INSERT INTO apousies(id_proswpiko,id_logos,start_date,diarkeia,id_status_adeia) VALUES ('$id_proswpiko',1,'$now','4','1')");
$functions->create_apousies_screen($id_proswpiko);
Jacascript code to show the datepicker I get it from this:
https://github.com/chrishulbert/datepicker/blob/master/datepicker.js
Update a date:
session_start();
include "classes.php";
$functions= new classes;
$table=trim($_REQUEST["table"]);
$field=trim($_REQUEST["field"]);
$val=trim($_REQUEST["val"]);
$check_field=trim($_REQUEST["check_field"]);
$check_var=trim($_REQUEST["check_var"]);
$sql="UPDATE $table SET $field='$val' WHERE $check_field='$check_var'";
$result=$functions->query($sql);
What is going wrong and my datepicker dont work?
datepicker icon vanish after update date or add date
The icon vanish because the datepicker library setups the date pickers when the form loads (specifically when the DOMContentLoaded event fires). Then, you make an ajax call that replaces the HTML, that includes the date picker icons, with an updated list of items.
Since at that point the library already did its job, the new html controls won't get the datepicker icon (neither any functionality related to that library).
IMHO you have two alternatives:
Modify the library, in order to add an setupPicker method that you can manually call after replacing the HTML with the ajax result.
Use a different library, that already provides that functionality.
I'd go for the second option, since that library is 9yo, and the document.getElementsByTagName("*") (see the source code at the end) looks very bad for performance.
I searched a lot but maybe because I am quite new here i couldn't fine a result that's works for my challenge.
Project view
What's is going on:
I have made page where users could click on a date-picker, after the user selected a date or a date range and they click on the submit button "Verzenden"the table that is positioned under the selection area shows all data from that specific date or date range that is available in the database.
In this table the user is able to adjust some data from a specific table row.
After clicking on the submit "Ok" button the changes the user made is pushed to the database.
Now my challenge:
After the user has changed some data from a row an they click on submit button "Ok" i want to achieve that the user is getting back to it's last date selection that he made before adjusting some data in a row table. What is the best way to handle this ?? I hope someone could help me, thanks already for participating and reading.
The term you're looking for is "pre-populating a form". You can pre-populate the form with PHP by generating HTML that has the value written directly in the HTML
<input type="text" value="<?php echo htmlspecialchars($someValue, UTF8, ENT_BOTH);?>">
Your homework probably wants you to save the input into the user's SESSION, and then check the SESSION every time you render the page. If a previous value is in the session, then pre-populate the form (i.e. render the HTML with the hard-coded values).
Try this:
<form autocomplete="on">...</form>
the "autocomplete" attribute allows you to save your selection that you've submit after reload the site.
If you don't want this feature take effect for some special tag,you should write your code like this:
<form autocomplete="on">
...
<input type="date" autocomplete="off" /> // this tag won't save the choice
</form>
check this fiddle : https://jsfiddle.net/9nfz311z/
html part:
<input type="date" name="test"/>
js part :
var dateInput = document.querySelector('input[name="test"]');
var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)}
// on change save in localStorage the value
dateInput.addEventListener('change', function(e) {
localStorage.setItem(dateInput.name, dateInput.value);
});
// on dom ready if localStorage has date value apply it to the input
DOMReady(setDateValue);
function setDateValue() {
var date = localStorage.getItem(dateInput.name);
if (date) {
dateInput.value = date;
}
}
I have created a Tasks List in SharePoint. When I try to add a new Task, it opens a form with few visible fields like TaskName, StartDate, DueDate, Description, AssignedTo. When I click on 'ShowMore', then it is showing all the remaining fields like %complete, TaskStatus, Priority, Comments, ExpectedDueDate.
Issue: I want all the fields to be visible from the start without clicking on 'ShowMore', because some people might get confused with this option and may skip filling these fields. Can someone please kindly suggest how to achieve this. Any help is greatly appreciated. Thank you!
Unfortunately there is no such setting that allows to configure fields visibility in tasks form AFIK.
But task form could be customized in order to display all the fields as demonstrated below.
Since it is a SharePoint 2013 environment, the following approach is suggested:
Create rendering template to display all the fields in New & Edit forms
Update Task web part in New & Edit forms pages
Template file
The following example demonstrates how to display all the fields of Task form:
(function () {
function preTaskFormRenderer(renderCtx) {
rlfiShowMore();
}
function registerRenderer()
{
var ctxForm = {};
ctxForm.Templates = {};
ctxForm.OnPreRender = preTaskFormRenderer;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxForm);
}
ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');
})();
How to apply changes
Upload the specified script (lets name it TaskForm.js) into SharePoint Site Assets library
Open New Form page in edit mode and go to Tasks web part properties
Specify JS Link property located under Miscellaneous group: ~sitecollection/SiteAssets/TaskForm.js (see pic. 1)
Save changes and repeat steps 2-4 for Edit form
I prefer other methods to the JavaScript workaround to really solve the problem:
1. You can change the list form assigned to the local Task content type, for example via PowerShell:
$web = Get-SPWeb http://YourSharePointSite
$list = $web.Lists["Tasks"]
$ct = $list.ContentTypes[0]
$ct.DisplayFormTemplateName = "ListForm"
$ct.NewFormTemplateName = "ListForm"
$ct.EditFormTemplateName = "ListForm"
$ct.Update()
You can set the list form assigned to the ListFormWebPart via SharePoint Designer
Create your own control template and add the ShowExpanded="true" attribute to the TaskListFieldIterator control
Pass the Expanded=1 in the request query string like NewForm.aspx?Expanded=1
Change the default column order of the local Task content type
All of these have the effect of displaying all the fields without the "Show More" button. You can read more about these methods here:
http://pholpar.wordpress.com/2014/11/01/no-more-show-more-in-tasks-lists/
Is there a way to set the calendar extender, or a method I can call so it always displays the month containing the selected date when the target textbox is clicked? I have found the method to set the selected date, but this does not automatically bring the month of the selected date into view.
You can handle the onClientShown event:
<cc1:calendarextender ID="Calendarextender1"
OnClientShown="clientShown" ...
For example:
<script type="text/javascript">
function clientShown(sender, args) {
var extender= $find('Calendarextender1');
sender.set_visibleDate(extender._selectedDate);
// the following is just to show you some other interesting methods
//sender.set_todaysDate(extender._selectedDate);
//sender.set_selectedDate(extender._selectedDate);
}
</script>
I'm afraid there's no documentation, so try them out.