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 '';
}
Related
I'm kind of new to react and I have a basic ish question, but when browsing the web I couldn't find a solution that could help.
I have a component that is adding a user for a web application and a component inside of that called 'NewAnimal' that is a set of input boxes. When I click the button "Add Animal Entry", I want to be able to repeat the 'NewAnimal' component in case a user has multiple animals to register to an account. I tried to do this in the repeatComponet function but I'm unsure how (Ignore onAddAnimals as this is just me attempting to add the new animal to the create User state).
<div class="new-owner-div-2">
<h5>Owners Animals</h5>
<hr/>
<NewAnimal onAddAnimals={addNewAnimalHandler}> </NewAnimal>
<div>
<button className='addNewAnimal' onClick{repeatComponet}>
<dt> Add Animal Entry</dt>
</button>
</div>
</div>
Any help would be much appreciated!
Within an *ngFor loop, where I'm building a list of search results (mat cards) with sample reading texts, I want to allow the user to click on one of them to read more, and open a route to a document template populated with the right doc.
This static HTML works with routerlinkactive catching the params in the docview page...
<button mat-button [routerLink]="['/docview', {sDocName: 'AW010001'}]">READ MORE...</button>
I want to replace the hardcoded Doc ID 'AW010001' with the appropriate ID for each iteration through the *ngFor. But this code fails...
<button mat-button [routerLink]="['/docview', {sDocName: '{{sDocIDs[i]}}'}]">READ MORE...</button>
The error I get is the typical...
Parser Error: Got interpolation ({{}}) where expression was expected
at column 25 in [['/docview', {[sDocName]:'{{sDocIDs[i]}}' }]]
Check out Angular 5-Routing (Practical Guide)
To high-light the main points:
Update the route table:
{ path: 'book/:id', component: BookDetailsComponent, }
Use this format:
<a [routerLink]="['/book',b.Id]">Details</a>
So in your example I think it should look like this:
<button mat-button [routerLink]="['/docview', sDocIDs[i]">READ MORE...</button>
With ngFor loop i guess that you only need something like this : routerLink="/docview/{{sDocName.sDocIDs}}" + proper function in component
Go to angular.io, example is shown in tutorial
Actually... I ended up moving the routerLink functionality into a function in my .ts file for that component...
readMore(sDoc: string) {
this.router.navigate(['/docview', {sDocName: sDoc}]);
window.scrollTo(0, 0);
}
Then in my HTML, I use a variable that is associated with all the other story metadata... in this case I used an array for development, but will eventually replace that array variable with an element of a data model for the stories.
<button mat-raised-button (click)="readMore(DocIDs[i])">READ MORE...</button>
This is working well for me.
How do I create a form-submittable web component?
Background:
I have a customer-picker component that is basically a text input plus a tiny button to the right of the text box plus a dialog that pops up when the button is clicked. It is used in the same way as one might use an html select.
This component is used as part of an html form that is submitted in the old fashioned (non-ajax) kind of way. The actual html input is encapsulated privately inside of the customer-picker component.
Problem:
The text input's value is not submitted
I guess I can understand why this is. I suppose this is the desired behavior (otherwise we are breaking encapsulation).
So with all that said, how do I create a submittable web component?
For example, suppose I have a form like this:
<form action="action.jsp">
<input name="date-start"/>
<input name="date-end"/>
<input name="name-first"/>
<input name="name-last"/>
</form>
that gets submitted like this:
action.jsp?date-start=2016-06-01&date-end=2016-06-30&name-first=Joe&name-last=Smith
I would like to create the same form using components like this:
<form action="action.jsp">
<date-range name="date">
<full-name name="name">
</form>
that gets submitted exactly the same way as the example above:
action.jsp?date-start=2016-06-01&date-end=2016-06-30&name-first=Joe&name-last=Smith
I am aware of iron-form. But this solution has some problems.
For one, it does not emulate native form submission very well. In a normal html form, when you submit, the current page is automatically replaced by whatever is returned by the action URL. This doesn't seem to happen with iron-form.
Second. It only allows your component to contribute a single value to the submitted data. In the above mentioned date-range example, I would like two values to be submitted for one component.
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.
I'm still using 4.1 and I'm trying to center a form content on screen.
When I add a new form it stays on the "left" of the screen.
I've tried to change form.html (temmplates/shared) adding a div with a style like this:
margin-left : 10%; margin-right : 10%;
up next to the form tag and closing it at the bottom.
The form goes to the right but not centered at all.
Anyone has any clue to help with this ?
Here is a screenshot of a simple Form (it's not basec on models)
thanks
Alejandro
Ok - i've gone to a default of atk4.2 to demonstrate.
If you add a new page with defaults as follows
<?php
class page_test extends Page {
function init() {
parent::init();
$p=$this;
$f=$p->add('MVCForm')->setModel('Customer');
}
}
?>
I get the following and the fields extend across the whole width of the page.
This is because the default page template takes the whole width and is expected.
In order to adjust the form, you can use view functionality so create a view under the /lib/View directory called Centre.php and put the following code in it
<?php
class View_Centre extends View {
function init(){
parent::init();
}
function defaultTemplate() {
return array('view/centre');
}
}
?>
Then create a new template for the view in yoursite/templates/default/view called centre.html and insert the following html code
<div style='width:50%; margin: auto;'>
<?$Content?>
</div>
and then in the page, we add the view first and the form into the view rather than straight into the page.
<?php
class page_test extends Page {
function init() {
parent::init();
$p=$this;
$v=$p->add('View_Centre');
$f=$v->add('MVCForm')->setModel('Customer');
}
}
?>
and this results in the following web page
The base ATK4 form is itself a view which means you can style the form however you want so if you get for example use a different style of form such as the one described here you can do this by copying yoursite/atk4/atk4/templates/shared/form.html to yoursite/atk4/templates/shared.form.html and changing the second line from
<?form?>
<div id="<?$_name?>" class="atk-form <?$class?>" style="<?$style?>">
<?$hint?>
<form class="<?$form_internal_class?>" id="<?$form_name?>" name="<?$form_name?>" action="<?$form_action?>" method="POST" <?$enctype?>>
<fieldset class="<?$fieldset?>">
to
<?form?>
<div id="stylized>" class="myform <?$class?>" style="<?$style?>">
<?$hint?>
<form class="<?$form_internal_class?>" id="<?$form_name?>" name="<?$form_name?>" action="<?$form_action?>" method="POST" <?$enctype?>>
<fieldset class="<?$fieldset?>">
Create a new form.css file in yoursite/templates/default/css which contains the styling
Copy yoursite/atk4/templates/shared/shared.html to yoursite/templates/shared/shared.html and add an extra tag
<?$css_include?>
just above the existing
<?$js_include?>
and in Frontend.php, let every page find the new css file.
$this->addLocation('templates',array(
'css'=>array(
'default/css',
),
));
$this->template->appendHTML('css_include','<link type="text/css" href="'.$this->api->locateURL('css','form.css').'" rel="stylesheet">');
which results in a styled form like this
There are some examples of different form layouts here that you can use to adjust the form layout itself. Not sure from your question if you want to center the form in the page or centre the fields.
If you just want to centre the Form within the webpage, you want to use margin: auto for centering css rather than setting a percentage on each side as shown here
Also note, if you amend files from the atk4 directory, you should make a copy into yoursite/templates/shared and amend it there so you can upgrade by overwriting the atk4 directory later without losing anything.
If i use the default form template (in this case in a CRUD), i get the following
If i make your change to the atk4/templates/form.html by adding
<div style="width: 50%; margin: 0 auto;">
as the second line in form.html and adding the corresponding
</div>
one line from the bottom, it shifts everything slightly to the right as follows
What is unclear in your question is what you are trying to achieve - do you want to move the fields within the form or do you want to centre the whole form on the page ?
I think the reason for the shifting is because of setting the width to 50% but I dont know what layout you are trying to obtain - do you just want to right align the labels to the fields maybe ? Please post screenshots in the original question of what you are getting and try to describe what you want to achieve.