inventree/inventree-website
2
0
Fork 0
mirror of https://github.com/inventree/inventree-website.git synced 2025-04-28 05:26:44 +00:00
Code
inventree-website/SergeoLacruz/inventree-supplier-panel.html
inventree-bot 980a93b1ac deploy: 4a43b1c8082ae7643c217b318d3ac7be9b2cc676
2025-04-20 01:20:44 +00:00

516 lines
24 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang=" en-US ">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/assets/splide/css/splide.min.css">
<link rel="stylesheet" href="/assets/index.css">
<link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.ico">
<script src="/assets/splide/js/splide.min.js"></script>
<!-- Fontawesome integration -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<title>InvenTree - Inventree Supplier Panel</title>
<meta itemprop="description" name="description"
content="InvenTree is an open-source inventory management system which provides intuitive parts management and stock control. It is at the center of an ecosystem of a..." />
<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Inventree Supplier Panel | InvenTree</title>
<meta name="generator" content="Jekyll v4.3.3" />
<meta property="og:title" content="Inventree Supplier Panel" />
<meta name="author" content="SergeoLacruz" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="The InvenTree-supplier-panel" />
<meta property="og:description" content="The InvenTree-supplier-panel" />
<link rel="canonical" href="/SergeoLacruz/inventree-supplier-panel" />
<meta property="og:url" content="/SergeoLacruz/inventree-supplier-panel" />
<meta property="og:site_name" content="InvenTree" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2025-04-20T01:20:34+00:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Inventree Supplier Panel" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"SergeoLacruz"},"dateModified":"2025-04-20T01:20:34+00:00","datePublished":"2025-04-20T01:20:34+00:00","description":"The InvenTree-supplier-panel","headline":"Inventree Supplier Panel","mainEntityOfPage":{"@type":"WebPage","@id":"/SergeoLacruz/inventree-supplier-panel"},"url":"/SergeoLacruz/inventree-supplier-panel"}</script>
<!-- End Jekyll SEO tag -->
</head>
<body class="flex flex-col antialiased cm-gray-1 min-h-screen">
<div class="flex-none">
<header class="cm-gray-2 body-font sticky top-0 z-50 bg-gradient-to-r from-white to-secondary">
<div class="container mx-auto flex flex-wrap p-5 flex-row items-center">
<a class="flex title-font font-medium items-center cm-gray-1 mb-0 mr-2" href="/">
<img src="/assets/logo.png" alt="logo" height="32" width="32" class="h-8">
<span class="ml-3 text-xl">InvenTree</span>
</a>
<div class="flex-grow xs:flex-none"></div>
<nav class="md:mr-auto md:py-1 xs:ml-4 xs:pl-4 xs:border-l xs:border-gray-400 flex flex-wrap items-center text-base justify-center">
<a class="mr-5 hover:cm-gray-1" href="/deploy.html">Deploy</a>
<a class="mr-5 hover:cm-gray-1" href="https://docs.inventree.org/en/stable/">Docs</a>
<a class="mr-5 hover:cm-gray-1" href="/blog">Blog</a>
</nav>
</div>
</header> <article class="max-w-p90">
<h2>inventree-supplier-panel
<span class="sm:ml-2 text-sm">
<a href="/SergeoLacruz">
<span class="inline-flex">
<img src="https://github.com/SergeoLacruz.png?size=40" alt="mdo" class="self-center w-5 h-5 rounded-full" style="margin:0px">
<p> SergeoLacruz</p>
</span>
</a></span>
<span class="sm:ml-2 text-sm">last modified: 20 Apr 2025</span>
</h2>
<div class="flex-wrap md:flex md:flex-nowrap">
<div class="w-full md:w-auto md:mr-4">
<h1 id="the-inventree-supplier-panel">The InvenTree-supplier-panel</h1>
<p>This is a plugin for <a href="https://inventree.org">InvenTree</a>, which uploads a purchase order
to a supplier WEB page. After using this plugin you can directly order the parts on
supplier WEB page. You need to have a supplier account and a different kinds of API keys
depending on the supplier.
The data will be created in your supplier account. Each time you transfer your PO
a new data set cart will be created. So make sure that you delete them from time to time in
the supplier WEB interface.
The plugin also helps to create supplierparts based on the supplier part number..
Actually the plugin supports two suppliers: Mouser and Digikey.</p>
<h2 id="installation">Installation</h2>
<p>The plugin is on pypi. You can install it by just calling:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>pip install inventree-supplier-panel
</code></pre></div></div>
<h2 id="configuration">Configuration</h2>
<h3 id="mouser-supplier-id">Mouser Supplier ID</h3>
<p>Place here the primary key of the supplier Mouser in your system. You can select from a list of
your suppliers. If this is not set the panel will not be displayed and a error is raised.</p>
<h3 id="digikey-supplier-id">Digikey Supplier ID</h3>
<p>Place here the primary key of the supplier Digikey in your system. You can select from a list of
your suppliers. If this is not set the panel will not be displayed and a error is raised.</p>
<h3 id="mouser-api-key">Mouser API key</h3>
<p>Place here your Mouser key for manipulating shopping carts. You find it in your Mouser account.</p>
<h3 id="digikey-id-and-digikey-secret">Digikey ID and Digikey Secret</h3>
<p>This is the client ID and the client secret that has been generated in the Digkey API admin WEB portal.
Copy it from there to the InvenTree settings.</p>
<h3 id="digikey-token-and-digikey-refresh-token">Digikey token and Digikey refresh token</h3>
<p>These fields are filled automatically. The Digikey API requires two tokens with different life times.
Please refer to the Digikey section for more information.</p>
<h3 id="proxy-con">Proxy CON</h3>
<p>Protocol to proxy server e.g. https</p>
<h3 id="proxy-url">Proxy URL</h3>
<p>In case you need to authorise a proxy server between your InvenTree server and the internet
put the required setting here. Example:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>https://user:password@ipaddress:port
</code></pre></div></div>
<p>If you do not need this just leave the fields empty.
A proxy can also be set using the environment variables PROXY_CON and PROXY_URL. The
values in the environment variables overwrite InvenTree settings.</p>
<h3 id="base-url">Base URL</h3>
<p>The base URL for server instance is in the Server Settings category of InvenTree. The plugin
uses this setting to build the OAuth callback for Digikey. Put the correct URL here.</p>
<h2 id="what-the-plugin-does">What the plugin does</h2>
<p>The plugin creates a new panel which is visible on the purchase order details view.
This is called either Mouser actions or Digikey actions depending on the supplier of the
active PO. On the panel there are three things:</p>
<ul>
<li>a button that starts the transfer of your PO to the supplier</li>
<li>a status bar that shows error messages</li>
<li>a table that contains the created Mouser shopping cart.</li>
<li>in case of Digikey a button that initiates the token generation.</li>
</ul>
<p><img src="/assets/plugins/mouser_panel.png" alt="Mouser Panel"></p>
<p>The button “Transfer PO” initiates the transfer. It takes each element of your PO using the SKU of
the supplier part and transfers it to the suppliers WEB shop. When finished it downloads
the data from the WEB page and puts the data into the table. Here you see
the actual stock at the supplier and an OK bubble when the stock is large enough for you order.
You also find the actual price as well as the total amount of your order. If the supplier
detects an error with the part it is displayed in the very right column.</p>
<p>The plugin also transfers your IPNs (internal part numbers). Most suppliers reserve a field
for such numbers. They show up in your shopping cart as well as on the invoice and even
on the labels that they put onto the bags and reels.</p>
<p>Finally the actual prices are copied back into your
InvenTree purchase order line items. So you can always see what you payed for the part when
you ordered it. This does not modify the price breaks of the supplier part. These are stored
with the supplier part. Here we just modify the purchase order.</p>
<h2 id="working-with-mouser">Working with Mouser</h2>
<h3 id="set-up">Set up</h3>
<p>For this plugin to work you need to have Mouser as a supplier in your InvenTree database.
Supplierparts must be added to all the parts that you like to buy at Mouser. All Mouser supplier
parts need to have the proper SKU. It needs to match the Mouser part number exactly.</p>
<p>For access to the Mouser API you need a Mouser account and a shopping cart API key.
You can get this in your Mouser WEB account. Do not mess up with the Mouser search API
key. This is a different one. If the key is properly set up you can find it on the Mouser
WEB page here:
<img src="/assets/plugins/mouser_api.png" alt="Mouser WEB"></p>
<h3 id="usage">Usage</h3>
<p>Using Mouser is easy. Only the Mouser shopping cart key is required for authentication. Its lifetime
is endless. Mouser has an API for the shopping cart. On pressing the button a shopping
cart is crated and all items are put into this shopping cart. When you login to the
Mouser WEB shop you can use this shopping cart for your order.</p>
<p>Please be aware that the plugin creates a new cart with a new ID each time the button is pressed.
If you afterwards create a order in the WEB UI, be careful selecting the right one
and delete all unused carts.</p>
<h4 id="currency-support">Currency support</h4>
<p>Mouser needs a country code for currency support. The plugin selects a proper country based on
the InvenTree currency setting and transfers this to Mouser. Mouser sends back the sopping cart
in the correct currency. The currency name is shown in last line of the table.</p>
<h2 id="working-with-digikey">Working with Digikey</h2>
<h3 id="set-up-1">Set up</h3>
<p>You need a registration on the <a href="https://developer.digikey.com">Digikey API products WEB page</a>.
This is not your normal Digikey account for shopping. You have to apply separately. After
registration create an organisation and inside the organization a production app.
The most important thing to set is the OAuth Callback. This is an URL on your local server
that is called by Digikey for key generation. The plugin sets up an URL for this.
Just add your local IP. The entry should look somehow like:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>https://192.168.1.40:8123/plugin/suppliercart/digikeytoken/
</code></pre></div></div>
<p>In this example 192.168.1.40:8123 is the local IP address and port where my
InvenTree development server runs. Place here the appropriate address.
In Production products section make sure that Product information and MyLists is activated.</p>
<p>In the View tab of your app you find the Client-ID and the Client-Secret. Place those in
the plugin settings.</p>
<p>Digikey Supplierparts have to by in your InvenTree Database as described already in
the Mouser section.</p>
<h3 id="usage-1">Usage</h3>
<p>Using Digikey is more complex. The authorisation system is token based and they do not
have a shopping cart API.</p>
<h4 id="authorization">Authorization</h4>
<p>The Digikey Client ID and the Client secret are the first things you need. With those
you call an API endpoint. You HAVE to go through an interactive browser window and
enter your credentials. Afterwards Digikey opens a callback URL on your local machine
and transfers a key. With this key the plugin calls another API endpoint to create
a token and a refresh token. The key gets bad after 60 seconds.</p>
<p>The token is used for each call to a Digikey API. It is good for 30 minutes. It has to
be refreshed using the refresh token. This one is valid for 90 days.</p>
<p>The plugin has a button in the panel that initiates the first step. It opens a browser
where you enter your credentials. When the OAuth callback is properly set the URL
…plugin/suppliercart/digikeytoken/ is called. This triggers a call to
https://api.digikey.com/v1/oauth2/token from where the plugin get the tokens. The tokens
are stored in the plugin setting area. Do not change them manually.</p>
<p>Each time you transfer a PO the refresh token is called independently from the
tokens live time. This also refreshes the refresh token. So you are save when
you use the plugin ate least once in 90 days. In case the token gets bad you need to
create a fresh set using the token button again.</p>
<p>If you are confused now read the documentation on the Digikey WEB page for more details.</p>
<h4 id="mylists">MyLists</h4>
<p>Digikey does not have such a simple shopping cart API. The plugin uses the MyLists API.
It creates a list on the WEB shop that can easily be transferred to a shopping
cart. When creating a list a list name has to be provided. The plugin creates a name
based on the PO name and adding a -xx that counts upwards each time you push the button.
The reason is that each name is allowed only once. Even when the list is deleted, the
name stays blocked forever. If you are done with your order delete the lists from your
Digikey WEB account.</p>
<h4 id="currency-support-1">Currency support</h4>
<p>Digikey requires a country code and a currency code. The plugin uses the same translation
as mentioned in the Mouser section and transfers both to Digikey. Digikey sends back the
list in the correct currency. Unfortunately the currency code is not sent back. The only
thing Digikey sends is a currency symbol but no info if $ is USD, AUD or whatever kind of Dollar.
The plugin shows the symbol in the table for control.</p>
<h2 id="automatically-add-supplierparts">Automatically add supplierparts</h2>
<p>The plugin can add supplierparts based on the supplier part number. For users with
edit part permission a panel called “Automatic Supplier parts” is shown. Here
you can select the supplier and add the exact supplier part number. The plugin
will create a corresponding supplierpart. I can fill the following part fields automatically:</p>
<ul>
<li>Supplier part number</li>
<li>URL</li>
<li>Package when available</li>
<li>Lifecycle status</li>
<li>Minimum order</li>
<li>Description</li>
</ul>
<p>If the supplier does not provide information for a field it it left empty.</p>
<h2 id="how-it-works">How it works</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>def get_custom_panels(self, view, request)
</code></pre></div></div>
<p>This defines the panel. The function must return a panels list. Here it returns just one
panel. The panel is returned under three conditions: The view must be PurchaseOrderDetail,
the supplier must be Mouser or Digikey and the user must have edit permissions to purchase orders.
The content_template is an html file that defines how the panel content looks.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>re_path(r'transfercart/(?P&lt;pk&gt;\d+)/', self.TransferCart, name='transfer-cart'),
</code></pre></div></div>
<p>Here we define the url that controls the panel. Let’s look at the details here:</p>
<ul>
<li>
<p><code class="language-plaintext highlighter-rouge">name='transfer-cart'</code>: This is the name under which the url is called from the html file. We will
come to that later when we discuss the template.</p>
</li>
<li>
<p><code class="language-plaintext highlighter-rouge">self.TransferCart</code> is the function that is called. It is defined later in this plugin</p>
</li>
<li>
<p><code class="language-plaintext highlighter-rouge">transfercart/(?P&lt;pk&gt;\d+)/</code> The string that looks a bit like white noise defines the url. transfercart
is the url which can be chosen freely. The ? is well known for parameters. In this case we get just one
parameter, the orders primary key. \d+ is a regular expression that limits the parameters to a digital
number with n digits.</p>
</li>
</ul>
<p>May be it is worth to leave a few more words on this. We define the url of the plugin. This is called by the Javascript
function when we push the button. Let’s have a look on the names and how they belong together:</p>
<p><img src="/assets/plugins/plugin_dataflow.svg" alt="Dataflow"></p>
<p>In the picture you see the relevant lines in the python and java code. The names in the coloured boxes need to match.
In case something does not fit the panel will not render and you will get an error message.</p>
<h2 id="issues">Issues</h2>
<h3 id="api-keys-are-global">API keys are global</h3>
<p>The API keys and especially the proxy password are user specific and shall not be given to
others. Up to now there are no user specific settings in InvenTree. So these keys are global
and visible to, at least every admin. All users who use the plugin will have the same
keys. We use a team key to solve this.</p>
<h3 id="missing-digikey-features">Missing DigiKey features</h3>
<p>Digikey allows more features like customer ID and list owners. These are not implemented so far.
The plugin supports just a single Digikey organization and user. Some APIs require a createdBy
value to be set. xxxx works fine so far.</p>
<h3 id="https-callback">https Callback</h3>
<p>The OAuto callback setting in your Digikey WEB account allows only https. http is not allowed.
This is usually not a problem in production environments. However the development server
usually runs http. But InvenTree has the required stuff for https on board. I just changed
the runserver to runsslserver in tasks.py.</p>
</div>
<div class="w-full md:w-1/4">
<h2 class="block sm:hidden">Detail section</h2>
<div>
<p class="mb-0">License:
<small>
<i class="fa-brands fa-osi"></i>
MIT<br>
</small>
</p>
<div class="">
Status:<br>
<div>
<small>
<i class="fa-regular fa-circle-check success"></i>Stable
</small>
</div>
<div>
<small>
<i class="fa-regular fa-circle-check success"></i>Maintained
</small>
</div>
</div>
Package on PyPI:<pre class="my-0">inventree-supplier-panel</pre>
<a href="https://github.com/SergeoLacruz/inventree-supplier-panel/issues" class="no-underline" aria-label="open the issue tracker">
<div>
<h4 class="plugin_links">Issue Tracker <i class="fa-solid fa-arrow-up-right-from-square" title="External link"></i>
</h4>
</div>
</a>
<a href="https://github.com/sergeolacruz/inventree-supplier-panel" class="no-underline" aria-label="open source on GitHub">
<div>
<h4 class="plugin_links">Sourcecode on GitHub <i class="fa-solid fa-arrow-up-right-from-square" title="External link"></i>
</h4>
<p class="font-normal">sergeolacruz/inventree-supplier-panel</p>
</div>
</a>
<div>
<h4 class="plugin_links">Categories</h4>
<div>
<a href="/plugins/categories/#supplier"><span class="plugin_cat">Supplier</span></a>
</div>
</div>
<div>
<h4 class="plugin_links">Tags</h4>
<div>
<a href="/plugins/tags/#supplier"><span class="plugin_tag">supplier</span></a>
<a href="/plugins/tags/#mouser"><span class="plugin_tag">mouser</span></a>
<a href="/plugins/tags/#digikey"><span class="plugin_tag">digikey</span></a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="flex-grow"></div>
<div class="flex-none">
<footer class="cm-gray-2 body-font">
<div class="container px-5 pt-8 mx-auto flex md:flex-row md:flex-nowrap flex-wrap flex-col">
<div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
<div class="flex title-font font-medium items-center md:justify-start justify-center cm-gray-1">
<img src="/assets/logo.png" alt="logo" height="32" width="32" class="h-8">
<span class="ml-3 text-xl">InvenTree</span>
</div>
<p class="mt-2 text-sm cm-gray-3">Intuitive Inventory Management</p>
</div>
<div class="flex-grow flex flex-wrap md:pl-10 mb-1 md:mt-0 mt-10 md:text-left text-center md:justify-left justify-center">
<div class="md:w-1/4 px-4">
<h2 class="footer-categorie title-font">
Quick
</h2>
<nav class="list-none mb-10"><ul>
<li><a href="/demo.html" class="footer-link">Demo</a></li>
<li><a href="/deploy.html" class="footer-link">Deploy</a></li>
<li><a href="https://docs.inventree.org/en/stable/" class="footer-link">Docs</a></li>
<li><a href="/news" class="footer-link">News</a></li>
<li><a href="/plugins" class="footer-link">Plugin List</a></li>
</ul></nav>
</div>
<div class="md:w-1/4 px-4">
<h2 class="footer-categorie title-font">
<a href="/extend/">Ecosystem</a>
</h2>
<nav class="list-none mb-10"><ul>
<li><a href="/extend/api.html" class="footer-link">API</a></li>
<li><a href="/extend/app.html" class="footer-link">App</a></li>
<li><a href="/extend/plugin/" class="footer-link">Plugins</a></li>
<li><a href="/extend/integrate/" class="footer-link">Integrations</a></li>
</ul></nav>
</div>
<div class="md:w-1/4 px-4">
<h2 class="footer-categorie title-font">
Sitemap
</h2>
<nav class="list-none mb-10"><ul>
<li><a href="/about/" class="footer-link">About</a></li>
<li><a href="/alternatives/" class="footer-link">Alternatives</a></li>
<li><a href="/blog" class="footer-link">Blog</a></li>
<li><a href="/contribute.html" class="footer-link">Contribute</a></li>
<li><a href="/support.html" class="footer-link">Support</a></li>
</ul></nav>
</div>
</div>
</div>
<div class="bg-gray-100">
<div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
<p class="cm-gray-2 text-sm text-center sm:text-left">© 2021-now InvenTree by<a href="https://github.com/inventree" rel="noopener" class="cm-gray-2 ml-1" target="_blank">@inventree</a>— website made with ♥ by<a href="https://github.com/matmair" rel="noopener" class="cm-gray-2 ml-1" target="_blank">@matmair</a></p>
<span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
<a href="https://github.com/inventree/inventree" alt="github repo" class="ml-3 cm-gray-3">
<img class="h-5 w-5" alt="GitHub logo" src="/assets/github.svg">
</a>
<a href="https://reddit.com/r/inventree" alt="Reddit" class="ml-3 cm-gray-3">
<img class="h-5 w-5" alt="Reddit logo" src="/assets/reddit.svg">
</a>
<a href="https://twitter.com/inventreedb" alt="Twitter" class="ml-3 cm-gray-3">
<img class="h-5 w-5" alt="Twitter logo" src="/assets/twitter.svg">
</a>
<a href="https://chaos.social/@InvenTree" rel="me" alt="Mastodon" class="ml-3 cm-gray-3">
<img class="h-5 w-5" alt="Mastodon logo" src="/assets/mastodon.svg">
</a>
</span>
</div>
</div>
</footer>
</div>
</body>
</html>
View Git Blame Copy Permalink