0

So I have a custom HTML page that lists items as cards. Each item has a button that, when clicked, will make an API POST request. This request must include the users id number and some other information.

My issue is that I have no idea how to capture the users id without using a custom SharePoint column. I figured that If I could find out how SharePoint gets that information I could use the same method to get it for my button but I dont know where to start. My code is below and Here is the link to the GitHub project.

HTML

<html>
<head>
    <title>Software Request</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body class="main-page">
    <div id="app"></div>
    <script src="script.js"></script>
</body>
</html>

CSS

.main-page{
     /* background-color: #505050 */
     background-color: #eee;
}
.stack{
    padding: 2em;
    overflow: auto;
}

.grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    align-items: stretch;
    object-fit: cover;
    padding: 1em;
    gap: 1em;
}

.nested{
    display: grid;
    grid-template-columns: repeat(3, 17% 77%);
    /* grid-template-areas: "sidebar main main"; */
    grid-template-rows: repeat(3, 120px);
    border-radius: 6px;
    box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4);
    background: snow;
    grid-auto-rows: 80%;
    border: 1px solid #ccc;
    margin: .1rem;
}
.nested:hover{
    box-shadow: 0 1px 0px 0px rgba(0,0,0,0.2);
}
.text{
    padding: 1px 2px 15px 15px;
}
.text > h3{
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    color: #177FAD;
    font-size: 20px;
    padding: 10px;
    /* border-bottom: 1px solid #dfdfdf; */
}

.text > p{
    font-family: 'Montserrat', sans-serif;
    color: rgb(0, 0, 0);
    font-size: 15px;
}

.request-button{
    background: snow;
    border-color: black;
    color: black;
    padding: 10px;
    width: 100px;
    /*border-radius: 3px;*/
}

.request-button:focus{
    border-color: rgb(85, 85, 165);
}
.request-button:hover{
    background-color: black;
    color: white;
    transition: all .3s ease;
}
.request-button:active{
    top: 2px;
}

JavaScript

const softwareData = [
    {
      title: "Microsoft Azure",
      description: "Microsoft Azure is a cloud computing service created by Microsoft for building, testing, deploying, and managing\
applications and services through Microsoft-managed data centers.",
      icon: "Assets/azure.png"
    },
      {
        title: "SQL Server",
        description: "Microsoft SQL Server is a relational database management system developed by Microsoft. It is a software \
product with the primary function of storing and retrieving data as requested by other software applications",
        icon: "Assets/sql.png"
      }
  ];


// Function to read more and restrict text length on each card
  function getDesc(itemDesc){
    let desc = itemDesc.description;

    let newDesc = desc.split(" ");    //sends string to array than removes commas and splits by number of words
    newDesc = newDesc.join(" ");

      let firstHalf = newDesc.slice(0,100);   //gets the first 100 characters 
      firstHalf = firstHalf + " . . .";       //append three dots after
      // alert(firstHalf);   

      let secondHalf = newDesc.slice(101);    //gets the remainder of the sliced string
      // alert(secondHalf);
  }
  function softTemplate(item) {
    return `
      <card class="nested">
        <img class="image" src="${item.icon}">
          <div class="text">
            <!--<button class="request-button" onclick="getDescription('${item.description}')">Request</button> -->
            <h3>${item.title}</h3>
            <p>${item.description}</p>
            <button class="readmore" onclick="getDesc()">Read More</button>
        </div>
      </card>
    `;
  }

// This allows the http div to use the app class.
// Sets up the structure of the page and sends our Template Literal to two functions for work.
  document.getElementById("app").innerHTML = `
  <div class="stack">
    <main class="grid">
      ${softwareData.map(getDesc).join("")}
      ${softwareData.map(softTemplate).join("")}
    </main>
  </div>
  `;
  • Thanks for the adding that additional tag @Nizam – binjamin Nov 1 '19 at 15:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.