View source for Documentation:Model Examples

<html>
<style>
    .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        box-sizing: border-box;
        padding: 0 2em 5em 5em;
    }
    .heading {
        color: #F67A07;
        font-size: 2.25em;
        font-weight: 700;
        text-transform: uppercase;
    }
    .description, .sub-heading, .search-input {
        font-size: 16px;
    }
    @media (max-width: 767px) {
        .content {
            padding: 2em 1em;
        }
        .heading {
            font-size: 1.5em;
        }
        .sub-heading {
            font-size: 1em;
        }
        .description {
            font-size: 0.875em;
        }
.content,
.container-model {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}
    }
.container-model {
    display: flex;
    padding-left: 5em;
    padding-right: 5em;
}

.sidebar {
  flex: 0 0 200px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  margin-top:50px;
}

.menu-item {
  color: #0060A8;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  word-wrap: break-word;
}

.card-container, .card-container-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 32px;
  margin: 0 auto;
  max-width: 960px;
}

.cards {
  max-width: 296px;
  background: white;
  border-radius: 6px;
  border: 1px solid #E3E8EE;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
}

.card img {
  width: 100%;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.contentss {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  justify-content: space-between;
}

.title {
  color: #112B3C;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.description {
  font-size: 14px;
  font-weight: 300;
  color: black;
}

.download-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #F67A07;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.download-indicator {
    width: 14px;
    height: 15px;
    display: block;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none"><path d="M1 10.6094L1 11.3594C1 12.602 2.00736 13.6094 3.25 13.6094L10.75 13.6094C11.9926 13.6094 13 12.602 13 11.3594L13 10.6094M10 7.60937L7 10.6094M7 10.6094L4 7.60937M7 10.6094L7 1.60937" stroke="%23F77A07" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sidebar a {
  display: block;
  color: #182933;
  text-decoration: none;
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
  font-weight: 500;
}

.sidebar a.active {
  color: #1A50AD;
}

.sidebar a.active svg {
  position: absolute;
  left: 0;
  top: 0;
}

@media (max-width: 768px) {
  .sidebar, .search-container {
    display: none;
  }

.card-container, .card-container-3 {
    grid-template-columns: 1fr;
    padding: 0 15px; 
    grid-gap: 20px;
  }

.cards {
    margin-bottom: 20px;
    width: auto;
    max-width: 296px;
    box-sizing: border-box;
    margin: 10px auto;
  }
  }
}

search-container {
  display: flex;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #E3E8EE;
  background: #FFF;
  width: 951px;
  height: 36px;
  flex-shrink: 0;
}

.search-container input[type="search"] {
  border: none;
  outline: none;
  padding: 0 10px;
  height: 100%;
  width:100%
  color: #999B9E;
}

.search-container svg {
  margin: 0 10px;
}

.search-container input::placeholder {
  color: #999B9E;
}

.search-container input:focus {
  border: none;
  outline: none;
}
h2 {
    border-bottom: none;
}
.section-divider {
    border: 0;
    height: 1px;
    background-color: #E3E8EE;
    margin: 20px 0;
}

@media (max-width: 600px) {
    .cards {
      flex-direction: column;
    }

.title, .description {
      font-size: 16px;
    }

.download-link {
      font-size: 12px;
      padding: 8px 12px;
    }
  }


</style>

<div class="content">
    <div style="color: #44546F;">Model Examples</div>
<div class="heading">This page is under construction - <a href='https://wiki.mdriven.net/Documentation:Model_Examples_Old'> refer to this page in the mean time</a></div>
    <div class="heading">MODEL EXAMPLES</div>
    <div class="description" style="color: black; font-weight: 400; word-wrap: break-word">
        Get started with MDriven sample models. Explore and choose what you want to build.
    </div>
    <div class="description" style="color: black; font-weight: 650; word-wrap: break-word">
    </div>
</div>
<div class="container-model">
    <div class="sidebar">
      <!-- Menu items -->
       <a href="#complete-models" class="menu-item">Complete models</a>
    <a href="#another-model" class="menu-item">Patterns</a>
    <a href="#final-model" class="menu-item">Extensions</a>
    </div>
   <main>
  <div class="search-container" style="display: flex;align-items: center;border-radius: 4px; border: 1px solid #E3E8EE;background: #FFF;width: 100%;height: 36px; flex-shrink: 0;">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M13 13L9 9L13 13ZM10.3333 5.66667C10.3333 8.244 8.244 10.3333 5.66667 10.3333C3.08934 10.3333 1 8.244 1 5.66667C1 3.08934 3.08934 1 5.66667 1C8.244 1 10.3333 3.08934 10.3333 5.66667Z" stroke="#999B9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <input type="search" id="searchBox" onkeyup="searchCards()" placeholder="Search here...">
  </div>
   
      <!-- Section for Complete Models -->
  <section id="complete-models">
        <h2>Complete Models</h2>
<div style="color: black; font-size: 16px; font-weight: 400; word-wrap: break-word">Use ready-made  "complete system"  (model+data) to apply to an existing turnkey site.</div>
    <div class="card-container">
</html>
{{#widget:Models|img=/Special:Filepath/File:2021-04-13_09h30_34.png|title=Gantt Chart Interactive|description=Use this when you need to show and interact with data in a timeline.|downloadLink=https://learn.mdriven.net/Special:Redirect/file/GanttChartInteractive.modlr}}
{{#widget:Models|img=/Special:Filepath/File:2020-05-31_22h59_58.png|title=A Trello-like Board With Cards You Can Move Between Lists|description=Move cards between lists, click cards, add new cards and more.|downloadLink=https://learn.mdriven.net/Special:Redirect/file/TrelloLikeBoard.modlr}}
{{#widget:Models|img=/Special:Filepath/File:2021-04-02_17h00_48.png|title=Markup Editor TinyMCE|description=Lets your users produce rich HTML text.|downloadLink=https://learn.mdriven.net/Special:Redirect/file/HtmlEditor.modlr}}
{{#widget:Models|img=/Special:Filepath/File:2020-05-31_17h14_29.png|title=SVG - Move boxes around|description=Objects represented by SVG graphics that react to mouse events so that they can be moved around and saved.|downloadLink=https://learn.mdriven.net/Special:Redirect/file/SvgInteractionMoveBoxesAround.modlr}}
{{#widget:Models|img=/Special:Filepath/File:2020-05-31_19h31_33.png|title=Google Maps to Show and Update Positions|description=Place a marker on a Google map, track the setting of the map, and move the marker.|downloadLink=https://learn.mdriven.net/Special:Redirect/file/GoogleMapWithMarkers.modlr}}

<html>

</div>
  </section>
<hr class="section-divider" />
  <!-- Section for Patterns -->
  <section id="another-model">
        <h2>Patterns</h2>
<div><span style="color: black; font-size: 16px; font-weight: 400; word-wrap: break-word">Packages primarily used by importing into an existing model. </span><a
 href="#" style="color: #1A50AD; font-size: 16px;  font-weight: 500; text-decoration: underline; word-wrap: break-word"> <a href='https://wiki.mdriven.net/Documentation:Model_Examples_Old'> How to merge modlr file?</a></div>
    <div class="card-container">
</html>
{{#widget:Models|img=/Special:Filepath/File:2020-05-30_19h31_20.png|title=SysUserAuthentication - important architectural pattern|description=This example adds the SysSingleton and SysUser classes needed to enable login and authentication in Turnkey systems.|downloadLink=https://learn.mdriven.net/Special:Redirect/file/SysUserAuthentication.modlr}}
{{#widget:Models|img=/Special:Filepath/File:Password_reset_model_sample.png|title=Password Reset Sample - Architectural Pattern|description=Add this functionality to your model and this frees you to integrate and adapt it as needed.|downloadLink=https://learn.mdriven.net/Special:Redirect/file/PasswordResetTemplate.modlr}}
{{#widget:Models|img=/Special:Filepath/File:2020-06-30_20h04_31.png|title=SysAsyncTicket - Important Architectural Pattern|description=A model pattern you can easily add to your model, backed by recent MDrivenServers.|downloadLink=https://learn.mdriven.net/SysAsync_package}}
{{#widget:Models|img=/Special:Filepath/File:2020-06-17_15h43_02.png|title=Localization and Translation - Architectural Pattern|description=MDriven systems can adhere to a model pattern and use that to store translations to all texts in actions and ViewModels.|downloadLink=https://learn.mdriven.net/Special:Redirect/file/Translations.modlr}}
{{#widget:Models|img=/Special:Filepath/File:2022-07-19_13h48_16.png|title=SysTurnkeyTraceLog|description=Add a class following this pattern if you need to track what users are up to in your Turnkey app.|downloadLink=https://github.com/supportMDriven/MDrivenComponents.git}}
{{#widget:Models|img=/Special:Filepath/File:BaseApp_image.png|title=BaseApp|description=A model extracted from larger models used in various projects with certain functions ready to go.|downloadLink=https://learn.mdriven.net/File:BaseApp.zip}}
{{#widget:Models|img=/Special:Filepath/File:Asp.Net_Identity_package_image.png|title=Asp.Net Identity package|description=Use this pattern for Turnkey login support.|downloadLink=https://learn.mdriven.net/File:AspNetIdentity.zip}}

<html>
</div>
  </section>
<hr class="section-divider" />
  <!-- Section for Extensions -->
  <section id="final-model">
        <h2>Extensions</h2>
<div><span style="color: black; font-size: 16px; word-wrap: break-word">Ready-made solutions used by importing into an existing model. </span><a href="#" style="color: #1A50AD; font-size: 16px; font-weight: 500; text-decoration: underline; word-wrap: break-word"> <a href='https://wiki.mdriven.net/Complete_model_examples'> How to merge modlr file?</a></div>
    <div class="card-container">
</html>
{{#widget:Models|img=/Special:Filepath/File:2020-05-31_12h01_07.png|title=Consume and Purchase GetPaid#1|description=This model extends your system with the ability to charge the end-user for services you provide.|downloadLink=https://learn.mdriven.net/Special:Redirect/file/ChargeEndUserViaMDrivenPortalService.modlr}}
{{#widget:Models|img=/Special:Filepath/File:2020-07-20_12h48_44.png|title=PayPal - Checkout GetPaid#2|description=Integrate PayPal as an alternative method to get paid by users.|downloadLink=https://learn.mdriven.net/Special:Redirect/file/PayPalCheckout.modlr}}
{{#widget:Models|img=/Special:Filepath/File:2020-06-22_18h49_08.png|title=Theme Builder - Build Themes in Runtime|description=Set CSS variables to influence the colors and sizes of the UI.|downloadLink=https://learn.mdriven.net/Special:Redirect/file/ThemeBuilder.modlr}}
{{#widget:Models|img=/Special:Filepath/File:OutgoingEmailQueue-model.png|title=Outgoing Email Queue|description=This is a model pattern that adds an outgoing email queue to the standard base model.|downloadLink=https://learn.mdriven.net/Special:Redirect/file/OutgoingEmailQueue.modlr}}
{{#widget:Models|img=/Special:Filepath/File:Calender_model_diagram.png|title=Calendar Model for Linking Things to Dates, Weeks, Months, and Years|description=This model implements classes that make aggregation (for statistics, for example) easy.|downloadLink=https://learn.mdriven.net/Special:Redirect/file/CalendarPackage.modlr}}
{{#widget:Models|img=/Special:Filepath/File:ComplaintTrackerStartScreen.png|title=Store Complaint Handling|description=The complete app, model, and example data for a clothing shop, to help staff handle customer complaints professionally.|downloadLink=https://learn.mdriven.net/images/5/50/StoreComplaintHandling.zip}}
{{#widget:Models|img=/Special:Filepath/File:2017-08-26_17h45_56.png|title=Turnkey Sample SoftConflict|description=A small app that helps you be constructive about issues in your daily life.|downloadLink=https://learn.mdriven.net/images/a/ac/DatabaseCompact.zip}}
{{#widget:Models|img=/Special:Filepath/File:2017-08-07_22h03_55.png|title=Turnkey Sample Board Map Balls Gantt|description=This sample is a bit of a playground for html5 component development that jacks into the Turnkey.|downloadLink=https://learn.mdriven.net/Documentation:Turnkey_sample_Board_Map_Balls_Gantt}}



<html>
    </div>
</div>
    </div>
  </section>
</main>
</div>
  <script>
  function searchCards() {
    var input, filter, cards, title, i, txtValue;
    input = document.getElementById("searchBox");
    filter = input.value.toUpperCase();
    cards = document.getElementsByClassName("cards");
   
    for (i = 0; i < cards.length; i++) {
      title = cards[i].getElementsByClassName("title")[0];
      if (title) {
        txtValue = title.textContent || title.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          cards[i].style.display = "";
        } else {
          cards[i].style.display = "none";
        }
      }      
    }
  }
  </script>
  <script>
  // JavaScript to scroll to the section smoothly when a sidebar link is clicked
  document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('.sidebar a').forEach(link => {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        const targetSection = document.querySelector(targetId);
        if (targetSection) {
          targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    });
  });
  </script>
  <script>
 
  document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('.sidebar a').forEach(link => {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        const targetSection = document.querySelector(targetId);
        if (targetSection) {
          targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    });
  });
  </script>
  <script>
  document.addEventListener('DOMContentLoaded', (event) => {
    const svgMarkup = `<svg xmlns="http://www.w3.org/2000/svg" width="4" height="16" viewBox="0 0 4 16" fill="none">
      <path d="M0 0C2.20914 0 4 1.79086 4 4L4 12C4 14.2091 2.20914 16 0 16L0 0Z" fill="#1A50AD"/>
    </svg>`;
 
    // Function to create a new SVG element
    const createSvgElement = (htmlString) => {
      const div = document.createElement('div');
      div.innerHTML = htmlString.trim();
      return div.firstChild;
    };
 
    // Function to update active link style and SVG
    const updateActiveLink = (targetId) => {
      document.querySelectorAll('.sidebar a').forEach(link => {
        if (link.getAttribute('href') === targetId) {
          link.classList.add('active');
          // Insert SVG for active link
          link.prepend(createSvgElement(svgMarkup));
        } else {
          link.classList.remove('active');
          // Remove SVG for non-active links
          if (link.querySelector('svg')) {
            link.removeChild(link.querySelector('svg'));
          }
        }
      });
    };

updateActiveLink('#complete-models');
 
    document.querySelectorAll('.sidebar a').forEach(link => {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        updateActiveLink(targetId);
        const targetSection = document.querySelector(targetId);
        if (targetSection) {
          targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    });
  });
  </script>
  </html>
{{Edited|July|12|2024}}
{{Class|scroll}}