When fetching list's items the link of title column is missing

Question

I wrote a spfx web part using sp-pnp-js to fetch items from a list, this is my query to the list:

public async getAgreements(): Promise<Agreement[]> {
    let select = '*';

    let Agreements: Agreement[] = [];

    const items = await sp.web.lists.getById('ID_OF_THE_LIST').items
      .select(select)
      .get();

    items.forEach(item => {
        Agreements.push({
            AgreementName: item.Title,
            CustomerAgreementNr: item.CustomerAgreementNr

        });
    });

    return new Promise<Agreement[]>(async(resolve) => {
        resolve(Agreements);
    });
  }

In the SharePoint list I changed the display name of the title column to AgreementName so when I want to render the list in the web part I use AgreementName. To render the list I am using ListView and IViewField and it looks like this:

export default class AgreementContainer extends React.Component<IAgreementContainerProps, IAgreementContainerState> {
constructor(props: IAgreementContainerProps) {
    super(props);

    this.state = {
        agreements: []
    }
};

private viewFields: IViewField[] = [
    {
        name: "AgreementName",
        linkPropertyName: "AgreementName.ServerRelativeUrl",
        displayName: "Agreement Name",
        maxWidth: 25,
        minWidth: 25,
        sorting: true,
        isResizable: true
      },
      {
        name: "CustomerAgreementNr",
        displayName: "Customer Agreement Nr",
        maxWidth: 4,
        isResizable: true
      }
]

public componentDidMount(): void {
    this.props.provider.getAgreements().then((agreements) => {
        this.setState({
            agreements: agreements
        });
    });

}

public render(): JSX.Element {
    console.log(this.state.agreements);
    return (
        <div className={ styles.agreementDatabase }>
        <ListView 
            items = {this.state.agreements}
            viewFields={this.viewFields}
        />
        </div>
      );
}
}

But the result for the AgreementName column is just an empty a-tag with a tabindex attribute:

<a tabindex="-1">Agreement</a>

I have tested with the internal name instead (Title) but the result is the same. How can I fetch the link in order to link the item name?

And a last question, there are date columns too in the list and when they gets rendered the date is in this format: 2019-03-26T13:00:00Z , is there a way to convert the date to a friendly format? something like 2019-03-26 ?

Best regards, Americo

Answer 1

Date field will always come in ISO date format only. You can use custom JS function to get it converted in to desired style. Example JS function:

function ConvertISOdateFormatToRequiredFormat(date) {
    var formattedDate = null;
    if (date != "" && date != null) {
        var Ldate = new Date(date);
        var year = Ldate.getFullYear();
        var month = Ldate.getMonth() + 1;
        var dt = Ldate.getDate();

        if (dt < 10) {
            dt = '0' + dt;
        }
        if (month < 10) {
            month = '0' + month;
        }

        //var months = { 1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'Apr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dec' };
        formattedDate = month + "/" + dt + "/" + year;
        return formattedDate;
    }
    else {
        return formattedDate;
    }
}

Regarding Title, Try to query that list in browser like https://siteaddress/_api/web/lists/getbytitle('List title')/items

And then check how the value is coming in TITLE FIELD. You will not get the link. If you need to frame the link, you can form the link with the help of ID column.