Missing resource value for #salesforce/Schema/User.Name" Error - salesforce

I am trying to display my name and email registered in salesforce using Lightning Web Component.
I imported User.Name and User.Email but still I am getting error.
Could you tell me why this happens?
Thanks in advance.
Blockquote
[Line: 4, Col: 23] LWC1512: Missing resource value for #salesforce/Schema/User.Name
[Line: 5, Col: 23] LWC1512: Missing resource value for #salesforce/Schema/User.EMAIL
JS
import { LightningElement, wire, track, api } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import USERID_FIELD from '#salesforce/user/Id';
import NAME_FIELD from '#salesforce/Schema/User.Name';
import MAIL_FIELD from '#salesforce/Schema/User.Email';
const FIELDS = [
USERID_FIELD, NAME_FIELD, MAIL_FIELD
];
export default class JsSample extends LightningElement {
#api recordId;
#wire(getRecord, {'recordId': USERID_FIELD, fields: FIELDS})
record;
getName() {
return getFieldValue(this.record.data, NAME_FIELD);
}
getEMail() {
return getFieldValue(this.record.data, MAIL_FIELD);
}
#track inputText = '';
handleChange(event){
this.inputText = event.target.value;
}
/**
* 初期化処理
*/
connectedCallback(){
}
}
HTML
<template>
<div class="container">
UserInfo<br>
<div class="showProperties">
Name:{name}<br>
Mail:{eMail}
</div>
</div>
<div class="おまけ">
<label for="wireText">Input Text</label><input type="text" id="wireText" onchange={handleChange}/>
<lightning-formatted-text value={inputText}></lightning-formatted-text>
</div>
</template>
update:
I cannot show my name using this code...
import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import Id from '#salesforce/user/Id';
import NAME_FIELD from '#salesforce/schema/User.Name';
import MAIL_FIELD from '#salesforce/schema/User.EMail';
const FIELDS = "[NAME_FIELD, MAIL_FIELD]";
export default class JsSample extends LightningElement {
#api recordId;
userId = Id;
#wire(getRecord, {recordId: '$userId', fields: FIELDS})
user;
get name() {
return getFieldValue(this.user.data, NAME_FIELD);
}
get eMail() {
return getFieldValue(this.user.data, MAIL_FIELD);
}
// #track inputText = '';
// handleChange(event){
// this.inputText = event.target.value;
// }
// /**
// * init
// */
// connectedCallback(){
// }
}

Wire adaptors use lowercase camel case names, for instance salesforce and schema (apart from SObject and field names). Your references to the schema objects have incorrect case with the word Schema. They should be:
import NAME_FIELD from '#salesforce/schema/User.Name';
import MAIL_FIELD from '#salesforce/schema/User.Email';
I made that correction and then pushed to my scratch org and it compiled and saved correctly.

Related

observer mobx-react seems not working in React

I am a starter to React and mobx. Based on my design, data should be updated after click the button using observer, observable modules. Even though the console log displays the email changed whenever clicking the button, the view doesn't change at all. Could you give me any advice?
import Link from 'next/link';
import React, { useState } from 'react';
import ProfileImage from '../components/ProfileImage';
import faker from 'faker';
import { decorate, observable } from 'mobx';
import { observer } from "mobx-react"
class Data {
avartar = faker.image.avatar();
email = faker.internet.email();
name = {
firstName: faker.name.firstName(),
lastName: faker.name.lastName(),
};
}
decorate(Data, {
avartar: observable,
email: observable,
name: observable,
})
class Index extends React.Component {
data = new Data();
generate = () => {
this.data.email = faker.internet.email();
this.data.name.firstName = faker.name.firstName();
this.data.avartar = faker.image.avatar();
console.log("check: ", this.data.email);
}
render() {
return (
<>
<h1>Index</h1>
<button className="btn btn-primary" onClick={this.generate}>Change</button>
<div>
<dl className="row">
<dt className="col-sm-3">Avatar</dt>
<dd className="col-sm-9"><img src={this.data.avartar} /></dd>
<dt className="col-sm-3">Name</dt>
<dd className="col-sm-9">{this.data.name.firstName} {this.data.name.lastName}</dd>
<dt className="col-sm-3">Email</dt>
<dd className="col-sm-9">{this.data.email}</dd>
</dl>
</div>
</>);
}
}
Index = observer(Index);
export default Index;
You need to also decorate the Index.data property with #observable.
#observer
class Index extends React.Component {
#observable data = new Data();
}
// Or non-decorator syntax:
Index = observer(decorate(Index, { data: observable }));

DetailsList component is not taking into account selection property

I have created the following sample application to try and simplify as much as possible an issue I am having as part of a larger application I am working on.
The issue has to do with the selection property of the DetailsList component in office-ui-fabric-react.
I have included the main components of the sample application below to try and illustrate my issue.
App.tsx
import * as React from 'react';
import './App.css';
import { ClickedItemsList } from './ClickedItemsList';
import { GenerateItemButton } from './GenerateItemButton';
import { ItemSelectionStore } from './ItemSelectionStore';
class App extends React.Component {
public itemSelectionStore: ItemSelectionStore = new ItemSelectionStore();
public render() {
return (
<div>
<GenerateItemButton store={this.itemSelectionStore} />
<ClickedItemsList store={this.itemSelectionStore} />
</div>
);
}
}
export default App;
ItemSelectionStore.tsx
import * as React from 'react';
import './App.css';
import { ClickedItemsList } from './ClickedItemsList';
import { GenerateItemButton } from './GenerateItemButton';
import { ItemSelectionStore } from './ItemSelectionStore';
class App extends React.Component {
public itemSelectionStore: ItemSelectionStore = new ItemSelectionStore();
public render() {
return (
<div>
<GenerateItemButton store={this.itemSelectionStore} />
<ClickedItemsList store={this.itemSelectionStore} />
</div>
);
}
}
export default App;
GenerateItemButton.tsx
import * as React from 'react';
import { ItemSelectionStore } from './ItemSelectionStore';
export interface IGenerateItemButtonProps {
store: ItemSelectionStore
}
export class GenerateItemButton extends React.Component<IGenerateItemButtonProps> {
public render() {
return (
<button onClick={this.handleClick}/>
)
}
private handleClick = () =>
this.props.store.onAddItemButtonClicked();
}
ClickedItemList
import { observer } from 'mobx-react';
import {CheckboxVisibility, DetailsList, IColumn, IObjectWithKey, Selection, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
import * as React from 'react';
import { ItemSelectionStore } from './ItemSelectionStore';
export interface IClickedItemsListProps {
store: ItemSelectionStore
}
#observer
export class ClickedItemsList extends React.Component<IClickedItemsListProps> {
private columns: IColumn[] = [{ key: 'key', name: 'Extracted key', fieldName: 'key', minWidth: 150 }];
public render() {
const { store } = this.props;
const selectedItems = store.selectedItems;
// creating items to display
const itemsToDisplay: IObjectWithKey[] = [];
selectedItems.forEach(k => itemsToDisplay.push({'key': k}));
// creating selection
const selection = new Selection();
selection.setItems(itemsToDisplay);
selection.setAllSelected(true);
return (
<DetailsList
items={itemsToDisplay}
selectionPreservedOnEmptyClick={true}
columns={this.columns}
checkboxVisibility={CheckboxVisibility.always}
selectionMode={SelectionMode.multiple}
selection={selection}
/>
)
}
}
When a user clicks on the button a random string is added to a list of items which are dynamically displayed by the ClickedItemsList component.
The items appear as they should on every click but I am having trouble with the selection property.
I want all items added to the list to also be in a selected state but my sample application fails to do so and all items simply appear in a non selected state.
Thoughts ?

Showing set of items in react is not working correctly

I have a problem like this. I am very new to react stuff. I have developed a smart contract and have been deployed and now I am trying to interact with it through React web application.
This the code where I am interacting with the smart contract.
import React, { Component } from 'react';
import Layout from '../components/Layout';
import Header from '../components/Header';
import { Card, Button } from 'semantic-ui-react';
import factory from '../ethereum/factory';
class Drivers extends Component{
async componentDidMount(){
const drivers = await factory.methods.getDeployedDriverContracts().call();
// console.log(drivers);
return { drivers: drivers};
}
renderDriver(){
const items = this.props.drivers.map(address=>{
return{
header: address,
description: "yeahh",
fluid: true
}
})
return <Card.Group items={items}></Card.Group>
}
render(){
return(
<div>
<Header/>
<Layout>
{this.renderDriver()}
</Layout>
</div>
);
}
}
export default Drivers;
This is my contract
pragma solidity ^0.4.17;
contract Driverfactory{
struct Driver {
address contractd;
address account;
}
address[] private deployedDriverContracts;
mapping(address=>Driver) public drivers;
function createDriver(string lisenceId,string firstName,string lastName,string vehicle,string vehicleType) public{
require(msg.sender!=drivers[msg.sender].account);
address newDriver = new DriverProfile(lisenceId,firstName,lastName,vehicle,vehicleType,msg.sender);
deployedDriverContracts.push(newDriver);
Driver memory newDriver1 = Driver({
contractd:newDriver,
account:msg.sender
});
drivers[msg.sender] = newDriver1;
}
function getDeployedDriverContracts() public view returns(address[]){
return deployedDriverContracts;
}
function checkDriver(address driver) public view returns(bool){
if(driver==drivers[driver].account){
return true;
}
else{
return false;
}
}
function driverContract(address driver) public view returns(address){
address dc_adrs =drivers[driver].contractd;
return dc_adrs;
}
}
contract DriverProfile{
struct Driver{
string lisenceId;
string firstName ;
string lastName;
address account;
string vehicle;
string vehicleType;
uint totalOffenceAmount;
uint offenceCount;
uint pendingPayments;
mapping(uint=>Fine) fines;
}
Driver public driver;
constructor(string lisenceId,string firstName,string lastName,string vehicle,string vehicleType,address owner) public{
driver = Driver({
lisenceId:lisenceId,
lastName:lastName,
firstName:firstName,
account:owner,
vehicle:vehicle,
vehicleType:vehicleType,
totalOffenceAmount:0,
offenceCount:0,
pendingPayments:0
});
}
}
When I open the browser and in that page it gives me an error like this.
TypeError: Cannot read property 'map' of undefined
Drivers.renderDriver
C:/Users/tharindusa/Desktop/TrafficFine/trafficfine/src/components/Drivers.js:22
19 | }
20 |
21 | renderDriver(){
> 22 | const items = this.props.drivers.map(address=>{
23 | return{
24 | header: address,
25 | description: "yeahh",
Can someone help me to solve this problem?. Thank You!!
You need to use state as your not providing drivers as props. Do something like this.
import React, { Component } from 'react';
import Layout from '../components/Layout';
import Header from '../components/Header';
import { Card, Button } from 'semantic-ui-react';
import factory from '../ethereum/factory';
class Drivers extends Component{
//Initial state empty drivers array
this.state = {
drivers : []
}
async componentDidMount(){
const drivers = await factory.methods.getDeployedDriverContracts().call();
// set state
this.setState({drivers});
}
renderDriver = () => {
//Use drivers from state
const items = this.state.drivers.map(address=>{
return{
header: address,
description: "yeahh",
fluid: true
}
})
return <Card.Group items={items}></Card.Group>
}
render(){
return(
<div>
<Header/>
<Layout>
{this.renderDriver()}
</Layout>
</div>
);
}
}
export default Drivers;
This article will help you to clear your concept.

Update Subcomponent with viewer after mutation in relay

I’m new to Relay (with reactjs) and have a problem with updating my UI after a commit mutation in the viewer. In my example I have a Salutation Component with the first name of the user and to simplify this, I put a input field right after the output of the name.
When the user changes the name in the textfield, I send this to my updatemutation and to the API. My problem is that I don’t know how to update the name above the input, after the new name was saved. Could anyone help me - what do I need to do in the updater?
Many thanks!
The "root"-Component:
import React, {Component} from 'react';
import {QueryRenderer, graphql} from 'react-relay';
import environment from 'app/settings/createRelayEnvironment';
import Salutation from 'app/components/dashboard/includes/Salutation';
const DashboardQuery = graphql`
query DashboardQuery {
viewer {
...Salutation_viewer
}
}
`;
class Dashboard extends Component {
render() {
return (
<QueryRenderer
environment={environment}
query={DashboardQuery}
render={({error, props}) => {
if (error) {
return <div>{error.message}</div>;
} else if (props) {
return (
<div>
<Salutation viewer={props.viewer}></Salutation>
</div>
);
}
return <div>Loading</div>;
}}
/>
);
}
}
export default Dashboard;
The Salutation-component:
import React, {Component} from 'react';
import {createFragmentContainer, graphql} from 'react-relay';
import PropTypes from 'prop-types';
import UpdateDashboardMutation from 'app/mutations/UpdateDashboardMutation';
class Salutation extends Component {
render() {
return (
<div className="salutation">
<h2>Willkommen {this.props.viewer.firstName}</h2>
<input type="text" onChange={this._onChange.bind(this)}/>
</div>
);
}
_onChange(event) {
UpdateDashboardMutation(event.currentTarget.value);
}
}
Salutation.propTypes = {
viewer: PropTypes.object
};
export default createFragmentContainer(Salutation, graphql`
fragment Salutation_viewer on Viewer {
firstName
}
`);
And the Updatemutation:
import {commitMutation, graphql} from 'react-relay';
import environment from 'app/settings/createRelayEnvironment';
const mutation = graphql`
mutation UpdateDashboardMutation($input: UpdateDashboardMutationInput!) {
updateDashboard(input: $input) {
ok,
errors {
field,
messages
}
}
}
`;
function UpdateDashboardMutation(firstName) {
commitMutation(
environment,
{
mutation,
variables: {
input: {
firstName
}
},
updater(store) {
// what i have to do here?
}
}
);
}
export default UpdateDashboardMutation;
Try:
const viewer = store.getRootField('viewer');
viewer.setValue(firstName, 'name');
See https://facebook.github.io/relay/docs/en/relay-store for details.

How to manage select box (representing a relation between entities) with Meteor React?

I'm using Meteor/React to build a social App. Users are related to others by a ManyToOne relation (a user have a representative).
So I made a Member Component which return a template with a form inside it to select the representative, and created an API to execute some actions on users.
Everything works quite well but the delete function do not update the client side (I opened another window with the application).
I feel like i'm missing the point with the Component notion, should that select box be a Component too ?
Here is Member.jsx
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { Members } from '../api/members.js';
// Member component - represents a single member item
export default class Member extends Component {
componentDidMount() {
ReactDOM.findDOMNode(this.refs.select_representant).value = this.props.member.representant;
}
componentDidUpdate() {
ReactDOM.findDOMNode(this.refs.select_representant).value = this.props.member.representant;
}
setRepresentant() {
Meteor.call('members.setRepresentant', this.props.member._id, 'oo');
}
deleteThisMember() {
Meteor.call('members.remove', this.props.member._id);
}
renderRepresentants() {
let representants = Members.find().fetch();
return representants.map((representant) => (
<option key={representant._id} value={representant._id}>{representant.pseudo}</option>
));
}
handleSubmit(event) {
event.preventDefault();
// Find the text field via the React ref
const representantId = ReactDOM.findDOMNode(this.refs.select_representant).value.trim();
const representant = Members.findOne({ _id: representantId });
Meteor.call('members.setRepresentant', this.props.member._id, representantId);
}
render() {
return (
<div>
<h3 className="text">
{this.props.member.pseudo} <button className="delete" onClick={this.deleteThisMember.bind(this)}>×</button>
</h3>
<form className="form-horizontal">
<div className="form-group">
<label htmlFor="select_representant" className="col-sm-3 control-label">Représentant</label>
<div className="col-sm-7">
<select ref="select_representant" className="form-control custom-select" name="select_representant" onChange={this.handleSubmit.bind(this)}>
{this.renderRepresentants()}
</select>
</div>
</div>
</form>
</div>
);
}
}
and members.jsx
import { Mongo } from 'meteor/mongo';
import { Meteor } from 'meteor/meteor';
import { check } from 'meteor/check';
export const Members = new Mongo.Collection('members');
Meteor.methods({
'members.insert'(pseudo) {
check(pseudo, String);
Members.insert({
pseudo
});
},
'members.remove'(memberId) {
check(memberId, String);
Members.remove(memberId);
represented = Members.find({ representant: memberId }).fetch();
for(representedItem in represented){
Members.update(representedItem, { $set: { representant: null } });
}
},
'members.setRepresentant'(memberId, representantId) {
check(memberId, String);
check(representantId, String);
Members.update(memberId, { $set: { representant: representantId } });
},
});
Try this:
deleteThisMember() {
Meteor.call('members.remove', this.props.member._id);
renderRepresentants();
}
Or, you tried to put your member list on thie.props?
Since you query for the Members within the React render function, it's not reactive with the changes in the database. You need to use createContainer from the react-meteor-data to see the changes in your front-end:
import { createContainer } from 'meteor/react-meteor-data';
...
export default class Member extends Component {
...
renderRepresentants() {
let representants = this.props.representants;
...
}
...
}
createContainer(() => {
return {
representants: Members.find().fetch()
};
}, Member);
Now the query should be properly reactively updated when there are changes in the Members collection.

Resources