I have the following dom repeat, which basically takes an array of survey question and displays them.
<template is="dom-repeat" items="{{survey.Questions}}">
<template is="dom-if" restamp if="{{isFormat(item.Type, 'Single-Select')}}">
<question-singleselect question="{{item}}" auth-Data="{{authData}}"></question-singleselect>
</template>
<template is="dom-if" restamp if="{{isFormat(item.Type,'Open-Ended')}}">
<question-openended question="{{item}}" auth-Data="{{authData}}"></question-openended>
</template>
and in the code further down, I want to take the answers, and create the header record, and all the detail/answer records... The header, I can save no problem, the detail records, I am trying to do the following.
for(question in survey.Questions)
{
...
}
Getting the error message, 'survey cannot be found'. How can I gain access to the array of questions that I am displaying on this page? I have tried this.$. and other different things I found on the web and this site.
Well instead of survey.questions. It seemed that I had to give the dom-repeat an ID and reference that ID with the following:
<template is="dom-repeat" id="testquestions" items="{{survey.Questions}}">
...
...
var item = this.$.testquestions;
Related
I have started the LWC below. I am attempting to clean up our rich text screen components on a lightning page. Currently there are over 12 different components based to show on a picklist value. I want to condense those into one LWC. So if Picklist Value = "1" the LWC should display the first paragraph code message below.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<Center>
<H1>Attention:</H1>
<p>Please be advised that this client was mailed Message Link Text letter on 12/1/2020 for the Legacy Secret Project. </p>
<p>Please be advised that this client was mailed Message Link Text letter on 12/1/2020 for the Legacy Secret Project. </p>
</Center>
I'm pretty limited with my knowledge of LWC so any advice on how to display the message based on picklist would be awesome! I'd really like to stick to just one component that runs on one object with one picklist.
Thanks!
You can create a #track variable in lwc js file, and store the active value of picklist into it.
Create a couple of getters for different conditions.
In lwc HTML file, wrap the paragraph tag with template tag and use if:true directive with appropriate getter as value
Example:
In component.html:
<template if:true={value1}>
<p>text for value 1</p>
</template>
<template if:true={value2}>
<p>text for value 2</p>
</template>
In component.js
#track picklistVal;
get value1(){
return this.picklistVal == '1';
}
get value2(){
return this.picklistVal == '2';
}
you can try one more simple approach
In the above approach need to define multiple getters and multiple template conditions. which may leads to improper solution if you are having a huge amount of picklist values.
component.html
<p> {value} </p>
component.js
get value(){
if(this.picklistValue == 'value1'){
return 'value1';
}
return '';
}
So, over the past week I have looked at loading multiple galleries at once. I have been working in MeteorJS with blaze templates but, the methods I am using aren't working.
Essentially, all my data comes from multiple MongoDB collections which are organized in one main collection. When the website starts, I want to access the list of current collections and for each collection display a gallery of photos.
(Main Photo Page)
{{#each collections}}
{{>gallery collectionName=collectionName}}
{{/each}}
(Gallery Template)
<Template name="gallery">
{{getPhotos}}
</Template>
I have tried using a reusable blaze template that is fed the data and then runs a helper to display the images. It works, but I am having trouble loading only one template/collection at a time. I want to load one first, when that is done, load the next etc.
I have also wondered about using ReactJS for this with MeteorJS on the backend, but before I start, I'm wondering about how easy is it to load components one by one vs templates?
Thanks for any ideas or help!
You could try merging the cursors in a helper, instead of inside the template. This will force the order you like and still be reactive since the find is in a reactive context (the helper).
(HTML)
<Template name="gallery">
{{#each getPhotos}}
<img src="{{this.src}}">
{{/each}}
</Template>
(js)
'getPhotos':function(){
let mergedCursor = [];
for (collectionObject in Template.currentData().collections){
//not clear how you are getting the collections
mergedCursor.concat(collectionObject.find().fetch());
}
return mergedCursor;
}
You could also import the collections in the same js file and merge them directly.
I am using paper-cards, that contains each element of a survey, which is wrapped by neon-animated-pages. When I have a long question or has multiple answers and have to scroll down on a phone, when I switch to the next question, which is shorter, is off the screen since you have to navigate down. How do I focus back on the top? Especially since the code I am on is currently running on the card that I am leaving, not the one I am navigating to.
<neon-animated-pages id="views" class="flex" selected="0" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
<template is="dom-repeat" id="surveyquestions" items="{{survey.Questions}}" sort="_sort">
<template is="dom-if" restamp if="{{isFormat(item.Type, 'Single-Select')}}" >
<question-singleselect question="{{item}}" auth-Data="{{authData}}"></question-singleselect>
</template>
....
</template>
</neon-animated-pages>
Actually found it....after searching a long while. I tried to do this, but with the actual elements, but this works.
document.getElementById("mainContainer").scrollTop = 0
I'm trying to create a custom element for reuse. What I have is data consisting of three attributes that will be displayed on it's respective page, depending on the link you click.
I'm using the Polymer Starter Kit. Basically, I want to have a page of information that changes depending on what the URL is. I have a list of programs on a page with links to their respective pages. So far I have this:
In my index.html, I have a section that looks like this:
<section data-route="programs">
<paper-material elevation="1">
<h1>Programs</h1>
<a href$="{{baseUrl}}programs/firstprogram">Program 1</a></br>
<a href$="{{baseUrl}}programs/secondprogram">Program 2</a></br>
<a href$="{{baseUrl}}programs/thirdprogram">Program 3</a></br>
</paper-material>
</section>
Then I have a custom element, program-info, that looks like this
<dom-module id="program-info">
<template>
<h2 class="page-title">{{program.name}}</h2>
<p>{{program.price}}</p>
<p>{{program.description}}</p>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'program-info'
});
})();
</script>
</dom-module>
Based on the program that was clicked, I want to grab data and use it in my custom element (name, price, description). I've thought about putting it in an array since there are only seven programs, but I don't know understand how to grab the right item in the array based on the URL.
Any thoughts?
If you are indeed using PSK, take a look at the section/page user-info in app/index.html. It displays information about a user based the name that was grabbed from the URL.
Of course you should also take a look at the routing configuration in app/elements/routing.html to figure out how the name is grabbed from the URL and set to the params variable.
Then you should add/modify your programs route to suit your needs.
Edit:
You can see a similar approach in this sample app : The data is fetch when the route changes and is then set to an article property in the scope of the blog-app element. In this element, said article property is itself bound to the similarly named property of the "page element" article-detail that is in charge of displaying the article's content that was previously fetched over the network.
So, I've tried several times to thrust myself into the world of website development. Each time, I have abandoned a project for one simple reason: lists.
I would like to know, from front to back, the dataflow for a system which follows the following sequence of events:
The user is shown a list in a website
The user fills out a new list item in some sort of modal dialog
The user hits "Submit" and that item is now added to the list.
That new list item is sent to the server to be stored
Would there be a whole new page load? When would the data be posted to the server? What are the various options for this (seemingly simple) application? I am targeting relatively small web tools. Not necessarily single page, but I'm not against it.
I understand how to add the new <li> to a list with JQuery, and I know how to build the modal with HTML. I can pull the data from the modal, but I'm not sure how to take that data from JQuery, turn it into the appropriate block of HTML (which could be rather complex), and store the new record in the database.
I can't seem to find a tutorial on this sort of data handling.
Thank you!
Simple. Since you mentioned jQuery, let's use jQuery. Ready? Here we go!
I'm assuming you have a textarea or an input in your modal where a user can enter text. If so, give it an id attribute so it can be referenced, like id="myText".
Then, to take the textarea or input's content and turn it into a list item in your list, you'll need to append an <li> with the textarea's content to its parent <ul> tag. Again, you'll need some way to reference the <ul> tag, so give the <ul> tag an id attribute, something like myList, so it becomes <ul id="myList">.
Now, it's just a matter of taking the val()ue from the input field, and appending it to the list. This is how you do that.
var textareaStuff = $('#myText').val();
$('#myList').append('<li>'+textareaStuff+'</li>');
That wasn't so hard, was it? This is actually quite fun.
I will admit, POSTing stuff to the server may take some getting used to, but it's not too hard.
I've prepared an HTML file for you that does all these things, with pretty detailed documentation. It should be able to help you learn what you're wanting to learn. It's below.
<!DOCTYPE html>
<html>
<head>
<title>My jQuery Experiments</title>
</head>
<body>
<!-- Here's your list with its ID so we can reference it in JS. -->
<ul id="myList">
<li>Sample Item 1</li>
</ul>
<input id="myText"> <!-- Here's your input field. This can be in a modal. -->
<button id="addItemButton">Add Item</button> <!-- We need a save button. -->
<!-- Include jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- This is the javascript you'll need to write and understand -->
<script type="text/javascript" >
// When the element with id="addItemButton" is clicked,
$('#addItemButton').click(function() {
// Append the stuff in brackets to the element with id="myList"
$('#myList').append('<li>' + $('#myText').val() + '</li>');
// ^ The stuff in brackets is an li code with the value of the HTML
// element with id="myText", your input field above.
// Now to post it to a server, we'll need to use AJAX.
// Luckily, jQuery has an AJAX function. It looks like this:
$.ajax('http://example.com/mysaver.php', {
// We're POSTing stuff to the server.
method: 'post',
// This is the data to send to the server.
// It is a JSON object.
// If using PHP, you'll get $_POST['item'] = whatever is in id="myText"
data: { item: $('#myText').val() },
// If the AJAX request was successful,
success: function(data) {
// The argument 'data' contains whatever the server returned.
},
// If not,
error: function(jqXHR) {
// Handle your error here.
}
});
});
</script>
</body>
</html>
I hope this was helpful! Go ahead and approve this answer if it was, and please feel free to ask further questions in the comments and I'll do my best to help out where I can.