saving states or proceeding form data when creating a VSTS extension - azure-devops

I am trying to make a VSTS extension that works like this
The Personas extension lets the user type in the Name, Tag, Description, and Avatar, and add the item on the left column as shown in the image.
This wouldn't be a hard task if I do it on a web, but since this is my first time creating an extension for VSTS, I am not sure how to approach this.
I followed this tutorial: https://learn.microsoft.com/en-us/vsts/extend/get-started/node?view=vsts
and successfully deployed my extension with just my name displayed.
Below is my code that displays some form.
my_hub.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="lib/VSS.SDK.min.js"></script>
<style>
body {
background-color: rgb(0, 67, 117);
color: white;
margin: 10px;
font-family: "Segoe UI VSS (Regular)","-apple-system",BlinkMacSystemFont,"Segoe UI",sans-serif;
}
</style>
<script type="text/javascript">
VSS.init();
console.log(VSS);
VSS.ready(function() {
document.getElementById("name").innerText = VSS.getWebContext().user.name;
});
</script>
</head>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
This successfully displays the form in the extension, but my questions are:
How do we save the state so that we can display the saved form data on the left column as shown in the image?
How do we submit the form data to proceed? Do we need a database for this? If so, how do we set it up for this task?
Please help! Thanks.

For developing vsts extension, we do not offer the ability to use a database.
You need to use Data storage. VSTS extensions have the ability to store user preferences and complex data structures directly on Microsoft-provided infrastructure. This ensures your user's data is secure and backed up just like other account and project data. It also means for simple data storage needs, you (as the extension provider) are not required to setup or manage (or pay for) third-party data storage services.
The service is designed to let you store and manage two different
types of data:
Settings: simple key-value settings (like user preferences)
Documents: collections of similar complex objects (documents)
More details about how to set storage please refer official tutorial.

Related

request.form did not show value [duplicate]

I have following form,
<form action="contact_us.asp" method="post" enctype="multipart/form-data" name="form1" id="form1">
<input name="firstname" type="text" id="firstname" size="30" />
<input name="lastname" type="text" id="lastname" size="30" />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
But when I am trying to get value of these post variables in my ASP file contact_us.asp then it returns blank. Code is below:
<%#LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<%
Dim FirstName, LastName, Email, Message
FirstName = request.form("firstname")
LastName = request.form("lastname")
response.write(FirstName & "OK")
%>
Its returning only "OK" to me. nothing in Message variable?
Please help me and tell me what's wrong here?
Classic ASP doesn't provide built-in support for working with `multipart/form-data. This is a surprisingly basic deficiency even for a language of ASP's venerable age, but what're you gonna do about it, move to ASP.NET? (Yes? oh. well never mind then.)
If you aren't doing file uploads, it's easiest just to stick with the default enctype (which is application/x-www-form-urlencoded). The only advantage of multipart/form-data is that you can put file uploads in it. (Theoretically, it would also have the advantage that you can specify character encodings definitively. But no browser actually does that.)
If you do need to handle multipart/form-data in Classic ASP you will need to parse the incoming request body yourself, splitting it into fields and values. Or rather, more typically, use an existing library to do it*.
That library will usually provide separate interfaces for reading the uploaded files and the other form values. This completely replaces use of the Classic ASP Request.Form interface. Exactly where you can find it depends on the library you choose. This does mean that if you want to have a form that can respond to either enctype equally you have to check the type and use one of the two different interfaces.
*: There are loads. for example. I'm not endorsing either of these as such... neither of them actually parse multiparts properly as per the standard and both seem a bit lax about filename security (never store a file under the user-submitted filename! security disaster!). But that seems to be par for the course for ASP upload scripts. At least, unlike many, they're not asking money for them.
I found by removing enctype completely (which defaults to application/x-www-form-urlencoded) from the form tag that Request.Form("SomeInputTagId") worked fine with method="post". I also didn't need to install any third party readers. Hope this helps.
Don't use enctype="multipart/form-data"
Remove that from the code and see if it works. The form-data enctype is used for uploading data, for example image files. You need to access the form elements slightly differently if you use that enctype.
If you are uploading data, then the ASP object you are using (for example ASP Upload) will have functions to access form fields. Request.form("") wont work.
Accessing the form values would be along the lines of:
Set yourUploadComponent = CreateObject("Your.UploadComponentClassString")
sFormValue = yourUploadComponent.Form.Item("txtName").Value
You will need to read the objects documentation.

AMP for Email linked drop downs

I am new to AMP for Email and I am trying to create some interactive forms to be send as Email to my customers. Now I am facing an issue in the linked drop down implementation in AMP for Email. My requirement is based on the country drop down selection I have to fill the city drop down for my users to select their city.
But as per the documentation in <amp-list>
Binding to the [src] attribute is not allowed.
So how can I do my linked drop down functionalities in my amp for email
Please suggest!
One solution is to use amp-form instead of amp-list and bind to a hidden input element:
<form id="myForm" method="post" action-xhr="https://example.com">
<input type="hidden" name="param" value="" [value]="state.param">
<div submit-success>
<template type="amp-mustache">
<!-- your server response template -->
</template>
</div>
</form>
<button on="tap:AMP.setState({ state: { param: 'hello' } }), myForm.submit">Bind</button>
Also see the Advanced Server Request example on amp.dev: it demonstrates how you can replace an amp-list with an amp-form seamlessly on user interaction.

Sitecore 8 EXM: Create Custom Email Campaign

I am new to Sitecore. I am looking to create a custom email template for an email campaign. I am using Sitecore 8.1 with EXM 3.3. I Have been trying to implement the following walk-through:
Walkthrough: Building a custom message template
However, when I create a new email campaign with my new template, I am unable to assign components to the various placeholders on my aspx page. I have proved that the aspx file is the correct file in my Sitecore website by adding plain html to the file and seeing the results displayed in the body section of the message tab in the EXM application, as you can see from the following screen shot.
Below is the code for my Email Template:
<%# Register TagPrefix="sc" Namespace="Sitecore.Web.UI.WebControls" Assembly="Sitecore.Kernel" %>
<%# Register TagPrefix="sc" Namespace="Sitecore.Web.UI.WebControls" Assembly="Sitecore.Analytics" %>
<%# OutputCache Location="None" VaryByParam="none" %>
<html>
<head>
<title>
<!-- Used for storing title of the email -->
<sc:Placeholder runat="server" Key="mn-title"/>
</title>
<!-- The VisitorIdentification control ensures that people viewing this page
with a traditional web browser will be classified as humans not bots.
This control is not required if people only view messages using Email clients -->
<sc:VisitorIdentification runat="server" />
</head>
<body style="background-color:gold">
<label>test html label added here!</label>
<form method="post" runat="server" id="mainform">
<table style="width:100%">
<tr>
<td colspan="2" style="background-color:blue;color:green;width:100%">
<!-- Used for storing the title of the newsletter in h1 -->
<sc:Placeholder runat="server" Key="mn-header" />
</td>
</tr>
<tr>
<td style="background-color:white;color:black;width:100%">
<!-- Used for storing the content blocks of the newsletter in h2 and paragraphs -->
<sc:Placeholder runat="server" Key="mn-content" />
</td>
</tr>
<tr>
<td colspan="2" style="background-color:blue;color:green;width:100%">
<!-- Used for storing the footer e.g. the unsubscribe link -->
<sc:Placeholder runat="server" Key="mn-footer" />
</td>
</tr>
</table>
</form>
</body>
</html>
The html code contains the following placeholder keys:
<sc:Placeholder runat="server" Key="mn-title" />
<sc:Placeholder runat="server" Key="mn-header" />
<sc:Placeholder runat="server" Key="mn-content" />
<sc:Placeholder runat="server" Key="mn-footer" />
When go to the Message tab for my email in EXM and choose the Add component button, I get the "Add Here" buttons on my page but am unable to choose any renderings to fit the mn-header and mn-footer components. The mn-content allows me to choose from several predefined renderings as seen in the screen shot below:
Have I missed something important here? How can I select/choose what renderings are available for my placeholders?
The Walk-through contains five sections that need completing:
Create a branch template
You can see from the following screen shot that this section is configured correctly:
Create template
You can see from the following screen shot that this section is configured correctly:
Create the layout
You can see from the following screen shot that this section is configured correctly:
Bind the layout and the message template
I'm pretty sure that I have managed to complete the first 3 sections of the walk-through correctly but when I try to complete the section "Bind the Layout and the message template", point 5 of the walk-through says:
On the Controls tab, add the relevant controls. As a minimum add the following two controls:
Target Item – in /Renderings/Email Campaign.
Set Page Title – in /Renderings/Email Campaign.
But I don't have "Target Item" as an rendering to add in this case as you can see from the following screen shot:
So I have added the following components in the Device Editor from the available renderings as seen in the following screen shot:
Make your template available in EXM
You can see from the following screen shot that this section is configured correctly:
Any Ideas what I am missing or doing wrong? Thanks in advance!
I think documentation for creating custom template is not yet updated for Sitecore EXM 3.3.
I dont think Set Target Item is needed any more. I have installed sample newsletter package and I dont find it using that.
Regarding your question.
You need to create data source item and assign it to your control's data source property.
I would suggest you to install sample newsletter package (came with default exm module package) and see it's structure and presentation details on Message root item. I have attached the one I have created.
For your Scenario you need to create item under message root using "custom newsletter ll content" template and assign that item as a data source for Display body control.
Hope this helps!
Sample News Letter from Sitecore : No Target item present.
Newsletter item with datasource
Now go to presentation details of Root item and attach this data source to renderings

Autofill populating wrong fields

I have a site with a checkout page that has always worked beautifully.
Recently, any customer that uses autofill to fill out his info, gets his email address dumped into the company field.
There are no changes that we did that could affect that.
What other tools can I use to get to the bottom of this?
The OP's problem may have been solved (or may have come back again in recent updates!) but as of early 2019, you can diagnose some of these problems by setting the show-autofill-type-predictions flag in chrome://flags, restarting Chrome, then looking at the title (tooltip text) for the input in question. It will tell you what information is being used to guess the "type" of field, and what kind of saved data should be used to populate it.
We still don't know what caused the issue, but for anyone seeing this we ended up making the field readonly so that auto-fill doesn't fill it. We then wrote some JS that on focus, it becomes active and the user can manually fill it in.
<input type="text" name="company" readonly="" onfocus="this.removeAttribute('readonly');">
Found myself in a similar problem, and the autocomplete property is what to be used in this situations
<input type="text" name="fooBar" autocomplete="organization" >
exhaustive list of autocomplete/autofill tags for html form inputs
I encountered a similar problem, having a "company" field placed under a "name" field. That company field was auto-filled with a birth year.
It came from another form on the same site that was displaying a "birthdate" field group just below the "name" field. So chrome stored its auto-fill values in that order.
I ended up with changing my second form field order (sadly it was the best I could do).
You need to add name to the input tag. Browsers use name to identify what info is supposed to go into the field. You can also use the same for ID and for placeholder if you like.
Try this:
<input type="text" name="company" id="company" placeholder="company">
If that still does not work, you might consider turning off autofill for that particular field*:
<input type="text" name="company" id="company" placeholder="company" autocomplete="off">
*you can also turn off autofill for the whole form using the same autocomplete property and off value.
We recently started having an issue like this with our shopping cart page when it was viewed from chrome and you had a saved user name and password for the site. Chrome would inexplicably put the user name value into the quantity box. After much hair-pulling, we realized that there were a hidden user name and password field on the page. These auto-filled correctly when visible. When hidden chrome would auto-fill the quantity input box. By setting autocomplete="username" and autocomplete="current-password" on these controls the issue went away.
The Almost Invisible Input Proxy Trick
I just encountered the same issue with the Chrome 72... It just wanted to fill any kind of field (select or input) as long it was not readonly (with complete no respect for name, autocomplete, etc attributes), with any kind of value it may have stored previously.
You may want to avoid the field to be populated because you listen on the change event or there are some validation on input that may trigger error message just because of bad autofill.
You just want the autofill value to be discarded and not even show (even before javascript execution).
You just provide another field for the browser to fill and you make it almost impossible to see by hiding it under the other field.
<input type="text" id="autofill-if-you-dare" style="position: absolute; z-index: -1; top: 20px; width: 0; height:0" />
Note: You can still hide or remove it by javascript afterwards but you should not hide it before autofilling has been completed, because Chrome will populate only visible fields. And as other answers have stated, it doesn't trigger any event, so you must rely on polling to do so.
I had the problem that chrome will fill in my email in all fields in one of my forms. The other form works correctly.
I found the problem is that the word Name must be before the name input. Or the word email must be before input for email. I had it afterwards. Also using <label for="email">Your email</label> after the email input worked.
**Incorrect autocomplete:**
<input type="text" name="name"/> Your name
<input type="email" name="email"/> Your email
**Correct autocomplete:**
Your name <input type="text" name="name"/>
Your email <input type="email" name="email"/>
or
<label for="name">Your name</label> <input type="text" name="name"/>
<label for="email">Your email</label> <input type="email" name="email"/>
or
<input type="text" name="name"/> <label for="name">Your name</label>
<input type="email" name="email"/> <label for="email">Your email</label>
I solved this problem by making sure the section I was adding was actually wrapped in a <form> tag. The site's global "search" field was being considered part of the page's form because neither had a <form> tag.
Since you can have inputs outside of forms, and this isn't really a big problem for a single-page-app (maybe not the best practice though!), this might be a worthwhile thing to check.
February 2021:
autocomplete="__away" worked for me src.
autocomplete="new-password" also worked src.
Still hacky but it worked for me in Chrome and MS Edge both 88.0.7.
Related(Duplicate?) questions:
Autocomplete Off is completely Ignored
Disabling Chrome Autofill
Autocomplete off vs false?
I have been encountering this issue lately, specifically with chrome. It seems that
autocomplete="off"
isnt being picked up anymore by Chrome. I found the following sources helpful :
Chromium (which i believe is what a lot of Chrome is based on) has the following code that shows the regex that is used when finding fields to populate with Chrome's autocomplete:
https://cs.chromium.org/chromium/src/components/autofill/core/common/autofill_regex_constants.cc?sq=package:chromium&g=0&l=262
I feel like they only other work around that I have found is to follow these conventions :
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
Or at least make sure that you give an attribute that's disimilar enough from the above list so it that wont get picked up by autocomplete features.
Suppose there are three fields, One with wrong autocomplete.
<input type="text" name="field1"/>
<input type="password" name="field2"/>
<input type="text" name="wrongAutocompleteField3"/>
Now make display of wrongAutocompleteField3 as none:
<style>
.d-none{
display:none;
}
</style>
....
<input type="text" name="wrongAutocompleteField3" class="d-none"/>
On page load remove this .d-none class:
<script>
$(function(){
$('[name="wrongAutocompleteField3"]').removeClass('d-none');
});
</script>
In Chrome, add this on the top of the page:
<input id="" class="" name="" type="password" style="display: none;">
You need to add form tag
<form action="#" method="GET">
<input type="text" name="text"/>
</form>

Tinymce Editor in web application

I want to use the Tinymce Editor in my web application. I have a text area on it and I want to submit the data of that text area to the next page. That page should display the data it received. Can you give any suggestions how I can do this.
The best way to think of TinyMCE is as a special textarea. Just like you can submit data from a textarea and retrieve the content via request variables, you can do the same for a TinyMCE editor instance.
In your front-end code, you would have something like this:
...
<script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
</head>
<body>
<form method="post" action="show.php">
<p>
<textarea name="content" cols="50" rows="15">Content in TinyMCE</textarea>
<input type="submit" value="Save" />
</p>
</form>
...
Then, in your show.php page, you would retrieve the content like you would retrieve a textarea value:
<?php
...
echo $_POST['content'];
...
It's about as simple as that to retrieve the data and display it in your page. Of course, you would need to take security precautions in displaying data that is entered by an end user. Also, this is assuming you are using PHP as the back-end technology; but, the principles carry over to any technology.
And, consult the TinyMCE documentation for detailed instructions and information on advanced use cases.
You should start with this instructions.
Displaying html content is very simple. You need to place the written text one of yor pages receives on that page - that is all.